facebookページの「いいね！」Boxを、アメブロのサイドバーに設置する方法についてお問い合せをいただきましたのでお答えしたいと思います。
上記の画像のようにfacebookページのパーツをアメブロのサイドバーに表示します。
ブログの読者に「いいね！」を押してもらうことにより、ブログよりも氣軽に投稿できるfacebookで情報発信できるようになります。
作業の流れとしては
１）facebookでFBページのパーツのコードを取得します
２）アメブロのデザインカスタマイズで、取得したコードを貼り付けます。
以下は、作業の手順です。
ソーシャルプラグインのページに移動
こちらからfacebookのソーシャルプラグインページに移動します。
https://developers.facebook.com/docs/plugins/
facebookページの編集画面から「ソーシャルプラグインを利用する」というリンクを辿っても結構です。
そうすると、このようなプラグインの一覧ページが表示されます。
今回使用するのは、赤丸で囲んだ「Like Box」ですので、その文字をクリックします。
Like Boxの表示スタイルを設定する
上の画像のように、スタイルを設定する画面が表示されます。
左のグレーの部分に値を設定すると、右側に実際のイメージが表示されます
- Facebook Page URL：facebookページのURLを入力します。ユーザーネームが未取得ならコピペが無難です
- Width：パーツ全体の幅を数値で決定します。単位はピクセルです。
- Color Scheme：パーツのカラーイメージです。LightもしくはDarkから選択。
- Show Faces：チェックを入れると、FBページに「いいね！」している人のリストが表示されます。
- Border Color：パーツの境界線のカラーを入力。赤色にしたければ「red」または「#FF0000」と入力。
- Show Stream：チェックを入れると、FBページのウォールへの投稿を表示します。
- Show header：チェックを入れると、タイトル部分のロゴを表示します。
縦のサイズは指定できず、Show FacesやShow Streamなどのオンオフによって自動的に変わります。
それぞれの値を変更してTabキーを叩くと、右側に変更が反映されますので、お好みに合わせてカスタマイズしてください。
コードを取得
「Get Code」ボタンをクリックすると、下記のようなウィンドウがポップアップで表示されます。
Implementationは選択肢として「html5」「xfbml」「iframe」があります。
どれを貼り付けても動作しますけど、オススメは「iframe」です。
理由は
- 「iframe」はそのまま貼り付けて日本語で表示される
- アメブロのフリープラグインは3800文字という上限があるので、できるだけ文字数が少ないものを選択したい
表示されたコードをコピーしておきます。
アメブロに貼り付ける
アメブロのマイページから「ブログのデザインの変更」画面を表示します。
下記のようなページが表示されますので、「サイドバーの設定」をクリックします。
次に、「プラグインの追加」をクリックして、「フリープラグイン」タブを開いて、先程コピーしておいたコードを貼り付けて保存します。
最後に、「サイドバーの配置」で「プリープラグイン」を使用する機能にドラッグして保存します。
これでfacebookページのLikeBoxをアメブロに設置することができました。
コメントする