このブログはWordPressで作っているのですが、今日Facebookページをサイト内のウィジェットに設置したので、やり方を備忘録としてメモ。
ちなみにテーマは、バズ部さんの「Xeory Base」を愛用しています。
やったことは２つだけです。
- Facebook for developersの「ページプラグイン」で、縦横幅を指定してコードを生成
- WordPressサイトのウィジェットに「カスタムHTML」を追加。コードを入れて、中央揃えにする（モバイルだと左寄りで表示されるため）
Facebookのページプラグインにアクセス
こちらのページにアクセスします。
https://developers.facebook.com/docs/plugins/page-plugin
FacebookページのURLが入っていると、こんな感じでプレビューが生成されているのを確認できるはず。
横幅・高さを指定する欄があるので、好みの縦横幅を指定します。
- 幅（横幅）：180px ~ 500pxの間で指定。デフォルトは340px。
- 高さ（縦幅）：70px以上の高さを指定。デフォルトは500px。
Xeory BaseテーマのStyle.cssを確認したところ、サイドバーのコンテンツの幅が290pxだったので、290pxを指定。
プレビューの下にある、[コードを取得] をクリックします。
JavaScript SDKか、IFrameから選べますが、IFrameの方が簡単そうだったので、IFrameのコードを取得。あとは、WordPressに入れ込むだけです。
WordPressサイトのウィジェットにFacebookページを追加
[外観] > [ウィジェット] にアクセスし、サイドバーの好きな場所に [カスタムHTML]を追加します。
[タイトル]には「Facebookページ」などタイトルにあたる文言を。
[内容]に、IFrameのコードを入れ込みます。
※そのまま保存しようとすると、ひとつエラーが。
Facebookから生成されたままのコードで保存しようとしたところ「“allowTransparency”は小文字にしてください」といった意味合いの英語エラーメッセージが出ました。“allowtransparency”にして保存したところ、無事ウィジェットが追加されました。
ただ、モバイルで表示を確認したところ、表示がこのウィジェットだけ左寄りにずれていたので、“center”タグを追加。
無事中央揃えで違和感なく表示できました。
私はプログラマーでもWebデザイナーでもないので、WordPressは勉強することだらけなのですが、良い学びになっています。
同じようなものを必要としている方のお役に立てれば幸いです。
本ブログでは２年以上の間、バズ部さんの無料WordPressテーマ「Xeory Base」を使ってきました。ただ、プラグインを減らしたい、もっとブログ運用を簡単にしたいという理由で、現在は「THE・THOR(ザ・トール)」というテーマを利用しています。スタイル面含め、私のほしい機能は基本的にすべてカバーされており、HTMLやCSSをいじる必要が現状ほぼありません。
気になる方はぜひチェックしてみてくださいね。
▼もっと詳しいThe Thor（ザ・トール）の感想・レビューはこちら▼
WordPressテーマ「The Thor（ザ・トール）」レビュー：実際にこのサイトで使って感じた長所と短所、向いてそうな人を正直に書いてみた