前回、FacebookのLike Boxが、2015年6月23日から利用できなくなることを書きました。
上の記事で、新しいFacebookボックスとなるPage Pluginを使ってみたのですが、本文下で使おうとすると、ちょっとした難点があったので、それを補う使い方を書いてみました。
とは言っても、本当に大したことはしてないので、自分の備忘録がてら載せておきます。
photo by Franco Bouly
目次
Facebook Page Pluginの難点
当サイトの本文のカラム幅は680pxあります。
それで、これまでのLike Boxの場合は、以下のようにメインカラム幅いっぱいに広げて設置していました。
ただ、新しいPage Pluginは、最大幅が500pxです。
Page Pluginの幅は280~500px
これだと、Page Pluginの設定画面で幅を680pxに設定したとしても、余分なスペースができてしまいます。
この空いたスペースが、何だか気持ち悪いので中央ぞろえして、以下のようにしたいと思います。
Facebookボックスの設定方法
上記のようにするには、まずはPage Pluginの設定を行って、コードを取得します。
Facebook Page Pluginの設定
とりあえず、Page Pluginから以下のように設定してみました。(説明はデフォルトから変更部分)
設定したら、「Get Code」ボタンからコードを取得しておきます。
初めて設置する場合は、上下両方のコードを利用します。
HTMLの編集
あとは、先程取得したコードを以下の「<!– Facebook Page Pluginのタグ –>」と書かれているコメント部分と入れ替えます。
<div class="facebook-page-plugin"> <!-- Facebook Page Pluginのタグ --> </div>
編集し終えたコードは、Wordpressテーマの本文下に貼り付けます。(通常は、single.phpあたり)
WordPressテーマでSimplicityを利用している場合は、「投稿SNS下ウィジェット」に、以下のように貼り付けるだけでもOKです。
CSSの編集
あとは、Wordpressなどの場合は、style.cssに以下のスタイルを書き込みます。
.facebook-page-plugin{ text-align: center; margin: 20px 0; }
もっと、難しく書く必要があるのかと思いましたが、中央ぞろえと、上下のマージンを設定しただけで済みました。
動作確認
上記までの設定を、パソコンで表示させてみると、以下のように表示されます。
あと、モバイル端末などで表示させた場合は、Page Pluginボックスが自動的に読み込み時にレスポンシブ表示されます。
以下は、幅が320pxの端末。(iPhone4相当)
以下は、幅が414pxの端末。(iPhone6 Plus相当)
こんな感じに、読み込み時に画面に合わせて表示してくれるので、特に特別な設定は必要ないかと思います。
まとめ
FacebookのPage Pluginは、横幅が500pxと限られているので、今回は中央寄せをしてみました。
Page Pluginは、ページ読み込み時に、自動的に画面幅に合わせてレスポンシブ表示されるので、特に複雑なスタイルを書く必要もなく、簡単にできました。
個人的に、デザインは、以前のLike Boxの方が好みでしたが、そのうち慣れるのかもしれません。
Facebookページの「いいね!」を増やすには、僕の経験上では本文下が最も有効でした。
新しいFacebookボックスパーツになっても、こういったツールは、有効に利用できればと思います。