アメブロにfacebookページの「いいね!」Boxを設置する

fb_likebox_10.png

facebookページの「いいね!」Boxを、アメブロのサイドバーに設置する方法についてお問い合せをいただきましたのでお答えしたいと思います。
上記の画像のようにfacebookページのパーツをアメブロのサイドバーに表示します。

ブログの読者に「いいね!」を押してもらうことにより、ブログよりも氣軽に投稿できるfacebookで情報発信できるようになります。

作業の流れとしては

1)facebookでFBページのパーツのコードを取得します
2)アメブロのデザインカスタマイズで、取得したコードを貼り付けます。

以下は、作業の手順です。


ソーシャルプラグインのページに移動

こちらからfacebookのソーシャルプラグインページに移動します。

https://developers.facebook.com/docs/plugins/

facebookページの編集画面から「ソーシャルプラグインを利用する」というリンクを辿っても結構です。
そうすると、このようなプラグインの一覧ページが表示されます。

fb_likebox_04.png

今回使用するのは、赤丸で囲んだ「Like Box」ですので、その文字をクリックします。

Like Boxの表示スタイルを設定する

fb_likebox_05.png

上の画像のように、スタイルを設定する画面が表示されます。
左のグレーの部分に値を設定すると、右側に実際のイメージが表示されます

  • 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」ボタンをクリックすると、下記のようなウィンドウがポップアップで表示されます。

fb_likebox_06.png

Implementationは選択肢として「html5」「xfbml」「iframe」があります。
どれを貼り付けても動作しますけど、オススメは「iframe」です。

理由は

  1. 「iframe」はそのまま貼り付けて日本語で表示される
  2. アメブロのフリープラグインは3800文字という上限があるので、できるだけ文字数が少ないものを選択したい

表示されたコードをコピーしておきます。


アメブロに貼り付ける

アメブロのマイページから「ブログのデザインの変更」画面を表示します。
下記のようなページが表示されますので、「サイドバーの設定」をクリックします。

fb_likebox_07.png

次に、「プラグインの追加」をクリックして、「フリープラグイン」タブを開いて、先程コピーしておいたコードを貼り付けて保存します。

fb_likebox_08.png

最後に、「サイドバーの配置」で「プリープラグイン」を使用する機能にドラッグして保存します。

fb_likebox_09.png

これでfacebookページのLikeBoxをアメブロに設置することができました。

コメントをどうぞ

コメントする

※ コメントは認証されるまで公開されません。ご了承くださいませ。

公開されません

(いくつかのHTMLタグ(a, strong, ul, ol, liなど)が使えます)


画像の中に見える文字を入力してください。

About

近藤彰宏のWebサイトにようこそ!

プロフィール

起業コンサルタント

何か自分の得意なことで世の中の役に立ちたい!・・・そんな想いで起業した方、これから起業したいと思っている方をお手伝いします。
コンサルティングのモットーは「誰かの成功法より自分の正攻法」。成功法則オタクを卒業して、自分のやり方を見つけましょう!
起業を志す方に、業務内容に応じたIT活用と、タスク管理術をコンサルティングします

1972年10月生まれ
ゆるワクTVパーソナリティ&放送オペレーター
全脳思考ファシリテーター
趣味はゴルフ・ボウリング・草野球

その他の主催イベントなど

ゆるワクTV

起業家をゲストにお迎えして、ゲストのテーマに沿ってビジネスへの想いを引き出すUstreamトーク番組

全脳思考イントロダクション講座

カリスマ経営コンサルタント神田昌典氏が開発した「全脳思考」
3時間でその思考法を手に入れる講座

中部全脳カフェ

誰でも氣軽に全脳思考を体験できる、講座ではない氣軽な集まり

悠久マスターズ

ゴルフと全脳思考をハイブリッドした、遊びの中から新しいビジネスのヒントを得る体感型セミナー

サイト内検索

カテゴリ

最近のピクチャ

  • ステッドラー トリプラス
  • facebookページSSL対応
  • facebookからのメール
  • Lightbox
  • zenback_01.png
  • fb_likebox_10.png
  • 110914_01.png
  • 110913_01.jpg

Twitter

最近のコメント