【WordPressメモ】FacebookページをWordPressサイトで簡単に表示させる方法

このブログはWordPressで作っているのですが、今日Facebookページをサイト内のウィジェットに設置したので、やり方を備忘録としてメモ。

ちなみにテーマは、バズ部さんの「Xeory Base」を愛用しています。

Sumbnail arrow

やったことは2つだけです。

  1. Facebook for developersの「ページプラグイン」で、縦横幅を指定してコードを生成
  2. WordPressサイトのウィジェットに「カスタムHTML」を追加。コードを入れて、中央揃えにする(モバイルだと左寄りで表示されるため)

Facebookのページプラグインにアクセス

Page plugin

こちらのページにアクセスします。

https://developers.facebook.com/docs/plugins/page-plugin

FacebookページのURLが入っていると、こんな感じでプレビューが生成されているのを確認できるはず。
Plugin default preview

横幅・高さを指定する欄があるので、好みの縦横幅を指定します。

  • (横幅):180px ~ 500pxの間で指定。デフォルトは340px。
  • 高さ(縦幅):70px以上の高さを指定。デフォルトは500px。

Xeory BaseテーマのStyle.cssを確認したところ、サイドバーのコンテンツの幅が290pxだったので、290pxを指定。

プレビューの下にある、[コードを取得] をクリックします。

JavaScript SDKか、IFrameから選べますが、IFrameの方が簡単そうだったので、IFrameのコードを取得。あとは、WordPressに入れ込むだけです。

Iframe code

WordPressサイトのウィジェットにFacebookページを追加

[外観] > [ウィジェット] にアクセスし、サイドバーの好きな場所に [カスタムHTML]を追加します。

[タイトル]には「Facebookページ」などタイトルにあたる文言を。

[内容]に、IFrameのコードを入れ込みます。

Custom html

※そのまま保存しようとすると、ひとつエラーが。
Facebookから生成されたままのコードで保存しようとしたところ「“allowTransparency”は小文字にしてください」といった意味合いの英語エラーメッセージが出ました。“allowtransparency”にして保存したところ、無事ウィジェットが追加されました。

ただ、モバイルで表示を確認したところ、表示がこのウィジェットだけ左寄りにずれていたので、“center”タグを追加。

Mobile center

無事中央揃えで違和感なく表示できました。

私はプログラマーでもWebデザイナーでもないので、WordPressは勉強することだらけなのですが、良い学びになっています。

同じようなものを必要としている方のお役に立てれば幸いです。

2020年10月追記

本ブログでは2年以上の間、バズ部さんの無料WordPressテーマ「Xeory Base」を使ってきました。ただ、プラグインを減らしたい、もっとブログ運用を簡単にしたいという理由で、現在は「THE・THOR(ザ・トール)というテーマを利用しています。スタイル面含め、私のほしい機能は基本的にすべてカバーされており、HTMLやCSSをいじる必要が現状ほぼありません。

気になる方はぜひチェックしてみてくださいね。

The Thor(ザ・トール)の公式サイトを見る

▼もっと詳しいThe Thor(ザ・トール)の感想・レビューはこちら▼

WordPressテーマ「The Thor(ザ・トール)」レビュー:実際にこのサイトで使って感じた長所と短所、向いてそうな人を正直に書いてみた

この記事に関連したおすすめ書籍



SEOに強い Webライティング 売れる書き方の成功法則64
ふくだ たみこ
ソーテック社
販売価格 ¥2,138(中古: ¥ 1,800)

日々の学びや気付きをつぶやいています