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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

このブログは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は勉強することだらけなのですが、良い学びになっています。

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

 

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



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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

このブログを書いている人

コメントを残す

*

CAPTCHA