SimplicityのFBページウィジェットを使って配置してみた

こんにちは。ノッツです(^o^)/

このブログを作ってから半月が経ち、お陰様で少しずつ当サイトに訪れてくれる方も増えてきました。

ブログを運営していて嬉しいことの一つはやっぱりこれです。

訪れていただいた方に再度訪れていただくにはもちろんブログの中身も大事ですが、訪れていただくためにSNSを活用することも重要だと思います。

そこで、FacebookページとGoogle+ページでアカウントをとり、Facebookの方はSimplicityのFacebookページ「いいね！」ウィジェットを使って設置してみました。

（今までもFacebookとGoogle+のボタンを設置していましたが、個人のアカウントを結びつけていたのでなんか違うなって思っていたので、ようやくすることができました。）

今回は、SimplicityのFacebookページ「いいね！」ウィジェットの設置方法を書きたいと思います。このウェジェットは、Simplicity1.7.2から追加されています。

この設置方法は、Simplicityの公式サイトにも書かれています。

SimplicityのFacebookページ「いいね！」ウィジェットの使い方

Simplicity1.7.2にて、『Simplicity Facebookページ「いいね！」 』を追加しました。 このウィジェットを本文下などに設定すると、PCでは以下のように表示されます。 画面幅が少し狭くなると以下のように表示され

wp-simplicity.com

このウェジェットで「いいね！」の増加量がかなり上がったとのことですよ。

Photo by Marcin Wichary

前準備

SimplicityのFacebookページ「いいね！」ウィジェットを使うには、予め設定しておく必要があります。

それはすぐに終えることができますが、カスタマイザーにある以下の画像のところにFacebookページのURLを入力することです。

自分のFacebookページにアクセスして、URLバーにある「facebook.com/XXXXXXX」のXXXXXX部分をコピペするだけです。

前準備はこれで終わりです。

Facebookページウィジェットの設置

Facebookページウィジェットの設置方法です。

以下の「[S]Facebookページ「いいね!」」ウィジェットを使います。

そして、ウェジェットを起きたいウィジェットエリアに置きます。

今回私は、投稿SNSボタン下に置いてみることにしました。

初期の状態で以下の項目が入力されているので「保存」クリックするだけです。

この記事をお届けした<br>
一期一笑ラボの最新ニュース情報を、<br>
<span style="color: #F27C8E;font-weight: bold;font-size: 1.1em;">いいね</span>してチェックしよう！

確認してみると、以下のように無事に配置されました。

デフォルトのままでもいいんですが、少々独自性を出そうと文字の中身だけ変えてみることにしました。

ピンク色の「いいね！」の後にグットアイコンを入れていいね！ぽくし、そして少々文章を変えました。

アイコンはWEBフォントのFont-Awesomeを使用しました。

Font Awesome

The worlds most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

上記のFont-Awesomeのサイトに載っている、グットアイコンのコードをコピペします。

<i class="fa fa-thumbs-o-up"></i>

グットアイコンを使用しましたが、他にもアイコンがいっぱいあります。

Font-Awesomeのサイトのコードは<i>タグになっていますが、以前にSimplicityの公式サイトの記事で<i>タグより<span>タグのほうが良いってことを目にしたので<span>タグに変更します。

<span class="fa fa-thumbs-o-up"></span>

あとは最後の文字を「チェックしよう！」から「チェック！」に変えました。

最終的になったコードは以下です。

この記事をお届けした<br>
一期一笑ラボの最新ニュース情報を、<br>
<span style="color: #F27C8E;font-weight: bold;font-size: 1.1em;">いいね <span class="fa fa-thumbs-o-up"></span></span>してチェック！

大きくは変わっていませんがいい感じです 笑

ちなみに、スマートフォンはレスポンシブで表示されこんな感じになります。

スタイルシートでいじると更にカスタマイズできると思うので、いじってみると面白いかもしれませんね。

これはまたの機会にでも。

追記：以下のように変えました。

この記事をお届けした<br>
「一期一笑ラボ」の最新ニュース情報を<br>
<span style="color: #F27C8E;font-weight: bold;font-size: 1.1em;">“いいね <span class="fa fa-thumbs-o-up"></span>”</span>してチェック！

さいごに

まだ、いいね！の数はゼロなので、いいね！していただけると中の人は飛んで喜びます^^

是非、いいね！よろしくお願いします。

といっても、いい記事を書いていかないとダメなので、これからも誰かの少しの役に立つ記事を心がけ、ブログを楽しみながら運営を続けていきます！