サイドバーにFacebook_iframeの設置

カスタマイズ備忘録　その２

　Wordpressのサイドバーに右のようなFacebookのiframeを導入する方法を自分用の備忘録としてまとめました。
完成までには「BULLDOG KARTE」さんのサイトを参考にさせて頂きました。
自分のサイトでは、デフォルトのサイドバーの幅をCSSで広げているので、≪width:260px:≫に設定。
サイトのキャッシュが効いているので何回かの試行錯誤を繰り返しながらピッタリ収まりました。
以前デベロッパ－から出力されるコードに脱落（http:の文字が抜け）があったけど現在は無くても大丈夫みたいです。
手順を下に掲載しておきます。
下の図の赤丸の所に注意して作ってみました。

①Like Box作成サイトにアクセス

Like Boxを簡単に作成できる、Facebook Developersにアクセスします。https://developers.facebook.com/docs/plugins/like-box-for-pages?locale=ja_JP

②自分のFacebookページのURLを貼る

Facebookページを開き、URLをコピーします。コピーしたURLを一番上の「Facebook Page URL」に貼り付け「Enter」キーを押すと、右側のプレビューが自分のFacebookページに変わります。

③Like Boxの「Width」と「Height」を設定

サイトに表示したい大きさを指定します。横幅の指定は「Width」に数値を入力し、高さの指定は「Height」に入力します。

④その他の表示設定

サイズの指定が完了したら、その他の表示設定を行います。右側に現在のプレビューが表示されるので、確認しながら設定を行えます。

⑤貼り付け用のコードを取得

Like Boxが完成したら、サイトに貼り付けるためのコードを取得するために「Get Code」ボタンをクリックします。するとポップアップが表示されるので、「IFRAME」を選択しコードをすべてコピーします。

⑥Like BoxをWordPressサイトに表示

Like BoxをWordPressサイトに表示
サイトでの表示方法は、コピーしたコードを投稿、または固定ページの本文に貼り付けるだけ。

⑦サイドバーに表示

このHPはにサイドバーに表示するので「テキストウィジェット」を使用します。
そんなに難しくなく、５段階の難易度でいうと２くらいの易しいものでした。