FACEBOOKタイムラインを自分のWEBサイトに表示させてみよう

ブログの更新が自分のドメインサイト・FACEBOOK・Twitter・Mixiなど更新すべきサイトが多くありすぎます。
面倒だけど戦略としては放置もできない…悩む必要もなく連動させればいいのです。

TwitterのツイートFACEBOOK投稿と連動させる方法
外部サイト→TwitterをFacebookで利用する方法 

  1. Facebook右上の管理パネルから「アプリの作成」をクリックします。
     
  2. 表示された画面の「WEB」をクリックして、開いた画面から「Integrate with your website」をクリックしてください
     
  3. Social Plugins」で設定できます。
    facebookdevelopers.png
     
  4. Like Box」をクリックしてください。下記の表示がされますか?
    facebookdevelopers4.png
    • FACEBOOK Page URL : 自分のFACEBOOKページのURLを入力してください。
      【例:ユニークURL】http://www.facebook.com/isolutionjapan
      ※FACEBOOK用のユニークURLの取得はこちらで確認できます。名刺などにも書き込む人が増えたのでオリジナルのURLに変更する。
       
    • Width : 自分のサイトに表示させる横幅です。
      ※単位は使用できずピクセルの値を入力します。「%」が使えないのが残念です。
       
    • Height : 自分のサイトに表示させる縦幅です。
      数値を入力しない場合は表示されている高さになります。表示の下方が「もっと見る▼」になっておりクリックするとスクロールバーが表示され表示されます。
       
    • Show Faces : このチェックボタンはサイトに「いいね!」を押した人のプロフィール画像が出ます。
       
    • Color Scheme : デザインのテーマカラーを「light」「dark」から選べます。
       
    • Stream : ここにチェックが入ると投稿が表示されるようになります。
       
    • Border Color : 読み込んだフレーム全体の周りに表示されるボーダーの色になります。お勧めはセーフRGBコードでの記入です。
      【例:白】#FFF 【例:赤】#F00 【例:青】#00F 【例:黒】#000
      もちろんRGBカラーコードや特定の色の名称でもいいです。【白の場合】#FFFFFF or #FFF or white
       
    • Header : 冒頭のFACEBOOKページへのリンクバーになります。
       
  5. 上記を入力完了したら「Get Code」をクリックしてください。
    facebookdevelopers5.png
     
  6. このコードを貼り付ければ作業は完了です。
    選べるコードタイプは「HTML5」「XFBML」「IFRAME」「URL」です。
    • HTML5 : 通常はこちらをお勧めします。
    • XFBML : FACEBOOKの話題の拡散効果を狙うなら最適です。
    • IFRAME : 上記と表示は同じですが…「いいね!」と言っていますと表示されますが基本コメント欄のポップアップがありません。…初心者向け
    • URL : FACEBOOKページへのリンクになります。…あまり意味がないですね。

      HTML5とXFBMLはどちらもJavaScript SDKを利用したものです。
       
  7. Movable Type利用のCMSユーザーは「テンプレートモジュール」を作って配置するとすっきりしていいですね。
    設置が不明な人はこちらでサポートします。Let's Try!

設置が完了したらこのようになります。
http://isolution.jp/blog/

他との連動方法もアップしますね

  
カテゴリーアーカイブ