2019-04-23 / 最終更新日時 : 2019-07-13 Yasuko Yakuwa Customize

Facebookページを埋め込むためのコード取得

先に「Facebookページの記事の埋め込み」というタイトルで記事を書きましたが、今回は特定の「記事」を埋め込むのではなく、WordPressの固定ページや投稿記事などに「Facebookページ」そのものを埋め込み表示するための方法についてです。

もちろん、使っているテーマによっては埋め込み用のウィジェットが用意されているものもありますね。私の使っている「LightningPro」だと「VK FB Page Plugin」というウィジェットがあるので、これに表示させたいFacebookページのURLをセッティングしてやれば、サイドバー等で表示させることができます。

ウィジェット等を使わず、一般的にFacebookページを埋め込むには以下のようにします。

Facebookソーシャルプラグインのページにアクセスします。
https://developers.facebook.com/docs/plugins/
左サイドメニューから「ページプラグイン」をクリックします。
「FacebookページのURL」に、埋め込みたいFacebookページのURLを入力します。
必要に応じて幅や高さを設定したりオプションを選択して、「コードを取得」ボタンを押します。
コードは「JavaScript SDK」のコードを使用します。
Step 2とStep 3の二つのコードが発行されますが、これを両方使います。（Facebookにログインしていない場合はStep 1とStep 2のコードになりますが、同じものです。）
投稿記事や固定ページのFacebookページを表示させたい場所に、二つのコードを続けて貼り付けます。
コードを貼りつける場合は、ビジュアルエディタではなくテキストエディタに切り替えてから貼り付けてくださいね。

以下に、私の好きな「仙台の古地図・古写真を愉しむ」のFacebookページを貼りつけてみました。

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.3"></script>
<div class="fb-page" data-href="https://www.facebook.com/tizusanpo/" data-tabs="timeline" data-width="500" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/tizusanpo/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/tizusanpo/">仙台の古地図・古写真を愉しむ</a></blockquote></div>

横幅を500pxに設定してあります。自動でセンタリングしないようなので、発行されたコードにちょっと細工して、二つ目のコードを<div style=”text-align: center”>～</div>で囲んでやっています。