今回は、ワードプレスで作成したホームページにFacebookのタイムラインを埋め込む簡単な方法をご紹介させていただきます。
Contents
Facebookのタイムラインを埋め込む手順
- Facbookページプラグインでコードを取得
- ワードプレスのページにコードを貼り付け
- 中央寄せにする場合の設定
このような流れになります。
１．Facbookページプラグインでコードを取得
facebook for developersページプラグインのサイトに行って、Facebookの埋め込みタグを生成します。
以下のサイトにアクセスしてください。
facebook for developersページプラグイン
①FacebookページのURLを入力
②埋め込みの幅（180px～500px）
③埋め込みの高さ（70px～）
これらを入力します。
plugin containerにチェックが入っている状態にし、「コードを取得」をクリックします。
以下のように埋め込みコードが表示されます。
２．ワードプレスのページにコードを貼り付け
今度はワードプレスの固定ページや投稿ページの編集画面に行って、Facebookページを貼り付けたいところで、「カスタムHTML」ブロックを追加します。
追加したHTMLの入力欄に先ほどの埋め込みコードステップ１とステップ２を続けてコピペします。
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v11.0"
nonce="xxxxxxx"></script>
<div class="fb-page" data-href="https://www.facebook.com/xxxxxxx/"
data-tabs="timeline" data-width="500" data-height="800" data-small-header="false"
data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<blockquote cite="https://www.facebook.com/xxxxxx/" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/xxxxxxxxxx/">xxxxxxxx</a></blockquote></div>これでワードプレスのサイトにFacebookページのタイムラインが表示されるようになりました。
３．中央寄せにする場合の設定
また、表示を中央寄せにしたい場合、先ほどの追加したHTMLのステップ２の部分の前に
<div class="fb_wrap">後に
</div>を追加し、divタグ（クラス：fb_wrap）で囲います。そうすると以下のようになります。
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v11.0"
nonce="xxxxxxx"></script>
<div class="fb_wrap">
<div class="fb-page" data-href="https://www.facebook.com/xxxxxxx/"
data-tabs="timeline" data-width="500" data-height="800" data-small-header="false"
data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<blockquote cite="https://www.facebook.com/xxxxxx/" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/xxxxxxxxxx/">xxxxxxxx</a></blockquote></div>
</div>次にダッシュボード「外観」＞「カスタマイズ」をクリックし、「追加CSS」をクリックします。
以下のコードを追加します。
.fb_wrap{
text-align:center;
}これで画面中央に表示されるようになります。
まとめ
以上でワードプレスで作成したホームページにFacebookページを埋め込む方法をご紹介させていただきました。
実際やってみるとのそんなに難しくないので、Facebookページをお持ちの方は、是非設定されてみていただければと思います。
