サイドバーに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くらいの易しいものでした。
投稿者プロフィール
最新の投稿
備忘録2022年2月4日拡張子とは、何ですか?
備忘録2021年9月22日VBAで出席名簿を作ってみた
HP作成講座2021年9月6日WordPressローカル環境構築 その1
お知らせ2021年6月1日2021年後半のカレンダーをアップロードしました