はてなダイアリーにFacebookのLikeBoxを設置する方法
フェイスブック 若き天才の野望 (5億人をつなぐソーシャルネットワークはこう生まれた)
- 作者: デビッド・カークパトリック,小林弘人解説,滑川海彦,高橋信夫
- 出版社/メーカー: 日経BP社
- 発売日: 2011/01/13
- メディア: ペーパーバック
- 購入: 33人 クリック: 2,842回
- この商品を含むブログ (240件) を見る
イイネ！してくれた人を知るために
このブログへのアクセスリファラーを見てみるとFacebookからの誘導がいくつかあります。誰かがFacebookでシェア、このブログ上でイイネ！ボタン押下をしてくれているんですが、誰がイイネ！してくれたのかが分かりません。イイネ！してくれた人を知るため、また更なるイイネ！を取得するためにLikeBoxを設置します。
Facebookページ作成
- http://www.facebook.com/pages/create.php からFacebookページの作成を行います。
- まずはカテゴリを選びます。私はアーティスト、バンド、有名人カテゴリを選択しました。
- 次にプロフィール画像を投稿します。
- 最後にFacebookページのURLを登録します。今回は http://www.facebook.com/yutakikuc こういったURLで登録しました。
- 上の右写真のようなページが作成されます。
LikeBox設置モジュール作成
- http://developers.facebook.com/docs/reference/plugins/like-box/ からLikeBoxの設置モジュールを作成します。
- Facebook Page URLの項目に上で登録したFacebookページのURLを記載します。
- 設置したいLikeBoxのWidthやHeighといったパラメータを入力します。
- 一番下にあるGet Codeというボタンを押します。
- Like BoxのプラグインコードというPopUpが出てきます。HTML5、XFBML、IFRAMEが選択できます。HTML5のコードそのままはてなダイアリーに貼付けるとエラーが出てしまうので、ここではIFRAMEを選択します。
- IFRAME定義をはてなダイアリーで読み込めるように変換します。IFRAMEを選択した時にiframe srcの先頭にhttp:を付ける事を忘れないようにしましょう。 なぜか付与されていないです。
- 変換は便利なサイトがありました。はてなダイアリーに任意のiframeを貼り付ける - daily gimite
- 以下は変換したモジュールです。
<script src="http://gmodules.com/ig/ifr?url=http://gimite.net/rails/iframe_gadget/xml%3Fparams%3Dscrolling%3Dfalse%21url%3Dhttp://www.facebook.com/plugins/likebox.php%253Fhref%253Dhttp%25253A%25252F%25252Fwww.facebook.com%25252Fyutakikuc%2526width%253D292%2526height%253D590%2526colorscheme%253Dlight%2526show_faces%253Dtrue%2526border_color%2526stream%253Dtrue%2526header%253Dtrue&synd=open&w=300&h=200&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
はてなダイアリーにLikeモジュールの貼付け
- はてなダイアリーにログインして管理ページを表示します。
- 管理ページ => デザイン => デザインの編集 => ページフッタの入力フォームを選択します。
- ページフッタの入力フォームに上で生成されたLikeBoxモジュールを追記します。追記する箇所はdiv class="sidebar"の中に定義します。こうするとブログのサイドバーに表示されます。
- また分かりやすいようにfacebookという帯タイトルもつけます。
- 埋め込むコードは以下のようになります。
<div class="sidebar"> <!-- FB --> <div class="hatena-module" id="facebook"> <div class="hatena-moduletitle">facebook</div> <script src="http://gmodules.com/ig/ifr?url=http://gimite.net/rails/iframe_gadget/xml%3Fparams%3Dscrolling%3Dfalse%21url%3Dhttp://www.facebook.com/plugins/likebox.php%253Fhref%253Dhttp%25253A%25252F%25252Fwww.facebook.com%25252Fyutakikuc%2526width%253D250%2526height%253D590%2526colorscheme%253Dlight%2526show_faces%253Dtrue%2526border_color%2526stream%253Dtrue%2526header%253Dtrue&synd=open&w=300&h=200&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script> </div> <!-- FB --> </div>
- 最後に自分のはてなダイアリーを見てLikeBoxが表示されていることを確認します。
