サイドバーにFacebook_iframeの設置
カスタマイズ備忘録 その2
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はにサイドバーに表示するので「テキストウィジェット」を使用します。
そんなに難しくなく、5段階の難易度でいうと2くらいの易しいものでした。
投稿者プロフィール

- asamai-cts Owner
-
あさまいCTSの代表オヤジです(2021年現在=60歳)
横手市中央町で「ラーメン与市」を2012年まで約15年間を経営。
その後、「横手市雇用創出協議会 実践支援員」を経て、一時会社勤めをするが体調を崩し、再度、自営業の世界に戻る。
現在の「あさまいCTS」は2019年1月に起業。業務内容は主に、パソコンの修理、出張スマホ・パソコン教室、ホームページ作成 その他何でも屋みたいなものです・・・
最新の投稿
新着情報2023.05.05CHAT GPTでVBAコード生成してみた
Blog2023.04.15Chat GPTを試してみた
備忘録2022.11.30VBスクリプトで作ってみた(1)
備忘録2022.07.04Googleカレンダーからリマインダーを送ってみた(1)