サイドバーにFacebook_iframeの設置

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

Facebook_iframe_002 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」に入力します。Facebook_iframe_001

④その他の表示設定

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

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

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

⑥Like BoxをWordPressサイトに表示

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

⑦サイドバーに表示

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

Follow me!

投稿者プロフィール

近江公人
近江公人asamai-cts Owner
あさまいCTSの代表オヤジです(2021年現在=60歳)
横手市中央町で「ラーメン与市」を2012年まで約15年間を経営。
その後、「横手市雇用創出協議会 実践支援員」を経て、一時会社勤めをするが体調を崩し、再度、自営業の世界に戻る。
現在の「あさまいCTS」は2019年1月に起業。業務内容は主に、パソコンの修理、出張スマホ・パソコン教室、ホームページ作成 その他何でも屋みたいなものです・・・