WordPressの記事の下にレスポンシブなFacebookパーツを作成

thumbnail

今回はFacebookパーツをWordPressに表示する方法を紹介する。

Facebookページを作る

FacebookパーツをWordPressに表示させるにはFacebookページを作成する必要がある。 基本的には個人のアカウントのパーツを直接WordPressに表示させることは出来ない。

これが僕のアカウントページだが、右上のメニューからページを作成をクリック。

すると、ページタイプの選択画面になる。 ブログの場合は「会社または団体」でいいだろう。

細かいジャンルを選択し、ページの名前を決めよう。 「スタート」を押せばページの完成だ。

Facebook公式のページプラグインを使う場合

まずは、公式サイトへアクセス。 さっき作成したFacebookページのURLをコピーして「FacebookページのURL」の欄に貼り付ける。

タブの欄にtimeline、event、messagesのいずれかを指定することでパーツに何を表示するかを指定できる。 複数表示する場合は「,」区切りで「timeline,messages」というように指定する。

設定が完了したらプレビュー画面の下の「コードを取得」というボタンを押す。 「ステップ2」に表示されているコードをbodyタグの開始タグのすぐ後ろあたりに貼り付ける。

「ステップ3」に表示されているコードを表示したい場所に貼り付ける。 これで完成だ!

WordPressプラグインを使用する

公式のパーツでもいいが、できるだけテーマファイルを汚したくないのでプラグインを使うことにした。 「Facebook Page Plugin」がオススメだ。

スクリプトタグなどをテーマファイルに追加しなくても、ウィジェットやショートコードでパーツを表示させることができるようになる。 僕のテーマではフッターにウィジェットを追加できないので、ショートコードをテーマファイルで呼び出して実装する。

インストールして有効化したら、特に設定は必要ない。 ショートコードが使えるようになるので、表示したい場所に貼り付ける。 ただし、テーマファイルの中でショートコードを使うにはdo_shortcode関数を用いなければならない。

<?php echo do_shortcode('[facebook-page-plugin href="https://www.facebook.com/Rikson-Blog-495612150562554/"]'); ?>
設定できる属性
設定内容 プロパティ
FacebookページのURL href URL
width 180〜500
高さ height 70〜
cover true/false
いいね!してくれた人の画像の表示 facepile true/false
タブ表示 tabs timeline,messages(コンマ区切りで複数指定可)
カスタム表示?よくわかんない cta true/false
ヘッダーを小さくするか small true/false
レスポンシブ表示 adapt true/false
言語 language en_USやja_JPなど

さて、どうでしたか? うまくいかなかったですか? 僕の場合はちゃんとレスポンシブになってくれなかったので、自前でCSSを工夫してゴニョゴニョした。

まずはこんな感じのコードを表示したい部分に貼り付ける。

<div class="facebook-page">
  <div class="facebook-page-header">Facebook</div>
  <div class="facebook-page-body"><?php echo do_shortcode('[facebook-page-plugin href="https://www.facebook.com/Rikson-Blog-495612150562554/" width="500"]'); ?></div>
</div>

そして、こんな感じのCSSを書いて完成!

.facebook-page{
  text-align: center;
  border: 1px solid #CECECE;
  padding: 5px;
}

.facebook-page-header{
  background: #305097;
  color: #FFF;
  padding: 5px;
}

.facebook-page-body{
  padding: 10px 0;
  overflow: hidden;
}

PC表示

スマホ表示

シェアボタンが消えてしまう・・・。