Facebook Page PluginをWordPressの投稿本文下に設置した方法

前回、FacebookのLike Boxが、2015年6月23日から利用できなくなることを書きました。

当サイトでもこれまで使用してきたFacebookのライクボックスが2015年6月23日から利用できなくなります。Face...

上の記事で、新しいFacebookボックスとなるPage Pluginを使ってみたのですが、本文下で使おうとすると、ちょっとした難点があったので、それを補う使い方を書いてみました。

とは言っても、本当に大したことはしてないので、自分の備忘録がてら載せておきます。

photo by Franco Bouly

スポンサーリンク
レクタングル(大)広告

Facebook Page Pluginの難点

当サイトの本文のカラム幅は680pxあります。

それで、これまでのLike Boxの場合は、以下のようにメインカラム幅いっぱいに広げて設置していました。

これまでのFacebook Like Box

ただ、新しいPage Pluginは、最大幅が500pxです。

Page Pluginの埋め込み幅

Page Pluginの幅は280~500px

これだと、Page Pluginの設定画面で幅を680pxに設定したとしても、余分なスペースができてしまいます。

Page Pluginを最大幅で埋め込んだ場合

この空いたスペースが、何だか気持ち悪いので中央ぞろえして、以下のようにしたいと思います。

Page Pluginを中央揃え

Facebookボックスの設定方法

上記のようにするには、まずはPage Pluginの設定を行って、コードを取得します。

Facebook Page Pluginの設定

とりあえず、Page Pluginから以下のように設定してみました。(説明はデフォルトから変更部分)

FacebookPage Pluginの設定

設定したら、「Get Code」ボタンからコードを取得しておきます。

Page Pluginのコード

初めて設置する場合は、上下両方のコードを利用します。

HTMLの編集

あとは、先程取得したコードを以下の「<!– Facebook Page Pluginのタグ –>」と書かれているコメント部分と入れ替えます。

<div class="facebook-page-plugin">
  <!-- Facebook Page Pluginのタグ -->
</div>

編集し終えたコードは、Wordpressテーマの本文下に貼り付けます。(通常は、single.phpあたり)

WordPressテーマでSimplicityを利用している場合は、「投稿SNS下ウィジェット」に、以下のように貼り付けるだけでもOKです。

「投稿SNS下ウィジェット」にテキストウィジェットを貼り付ける

CSSの編集

あとは、Wordpressなどの場合は、style.cssに以下のスタイルを書き込みます。

.facebook-page-plugin{
  text-align: center;
  margin: 20px 0;
}

もっと、難しく書く必要があるのかと思いましたが、中央ぞろえと、上下のマージンを設定しただけで済みました。

動作確認

上記までの設定を、パソコンで表示させてみると、以下のように表示されます。

Page Pluginを中央揃え

あと、モバイル端末などで表示させた場合は、Page Pluginボックスが自動的に読み込み時にレスポンシブ表示されます。

以下は、幅が320pxの端末。(iPhone4相当)

iPhone4相当の端末でPage Pluginを表示

以下は、幅が414pxの端末。(iPhone6 Plus相当)

iPhone6 plus相当

こんな感じに、読み込み時に画面に合わせて表示してくれるので、特に特別な設定は必要ないかと思います。

まとめ

FacebookのPage Pluginは、横幅が500pxと限られているので、今回は中央寄せをしてみました。

Page Pluginは、ページ読み込み時に、自動的に画面幅に合わせてレスポンシブ表示されるので、特に複雑なスタイルを書く必要もなく、簡単にできました。

個人的に、デザインは、以前のLike Boxの方が好みでしたが、そのうち慣れるのかもしれません。

Facebookページの「いいね!」を増やすには、僕の経験上では本文下が最も有効でした。

Facebookページを利用している人なら、自分のブログにFacebookライクボックスを設置していることかと思います。こん...

新しいFacebookボックスパーツになっても、こういったツールは、有効に利用できればと思います。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

スポンサーリンク