Y's note

Web技術・プロダクトマネジメント・そして経営について

本ブログの更新を停止しており、今後は下記Noteに記載していきます。
https://note.com/yutakikuchi/

はてなダイアリーにFacebookのLikeBoxを設置する方法

フェイスブック 若き天才の野望 (5億人をつなぐソーシャルネットワークはこう生まれた)

フェイスブック 若き天才の野望 (5億人をつなぐソーシャルネットワークはこう生まれた)

イイネ!してくれた人を知るために

このブログへのアクセスリファラーを見てみるとFacebookからの誘導がいくつかあります。誰かがFacebookでシェア、このブログ上でイイネ!ボタン押下をしてくれているんですが、誰がイイネ!してくれたのかが分かりません。イイネ!してくれた人を知るため、また更なるイイネ!を取得するためにLikeBoxを設置します。

やること

やることは3つです。

  1. Facebookページ作成
  2. LikeBox設置モジュール作成
  3. はてなダイアリーにLikeBoxモジュールを貼付け

Facebookページ作成


LikeBox設置モジュール作成


<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&amp;synd=open&amp;w=300&amp;h=200&amp;title=&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;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&amp;synd=open&amp;w=300&amp;h=200&amp;title=&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>
</div>
<!-- FB -->
</div>