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

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

Facebookページを作る

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

Facebookページを作る

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

Facebookページを作る

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

Facebookページを作る

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

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

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

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

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

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

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

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

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

WordPressプラグインを使用する

WordPressプラグインを使用する

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

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

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

<?php echo do_shortcode('[facebook-page-plugin href="https://www.facebook.com/Rikson-Blog-495612150562554/"]'); ?>
設定できる属性
設定内容プロパティ
FacebookページのURLhrefURL
width180〜500
高さheight70〜
covertrue/false
いいね!してくれた人の画像の表示facepiletrue/false
タブ表示tabstimeline,messages(コンマ区切りで複数指定可)
カスタム表示?よくわかんない(-.-;)ctatrue/false
ヘッダーを小さくするかsmalltrue/false
レスポンシブ表示adapttrue/false
言語languageen_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表示

スマホ表示

シェアボタンが消えてしまう・・・。(´;ω;`)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です