Movable TypeにFacebookの「いいね!」ボタンを設置

Movable TypeにFacebookの「いいね!」ボタンを設置

Facebookの「いいね!」ボタンを設置しましたのでメモ。
ちなみに生成できるコードは4種類あるのですが、今回はHTML5版と、以前設置したことのあるIFRAME版について書いています。

こういうボタンを設置します。

Facebookの「いいね!」ボタン

Like Button - Facebook開発者でコードを生成します。

英語なのでどきどき…
URL to Like ボタンを配置するURL
Send Button チェックで、「送信」ボタンを表示
Layout Style レイアウト
Width 横幅
Show Faces チェックで、「いいね!」してくれた人のアイコン表示
Font 使用フォントの選択(日本語で表示する場合は未選択でOK)
Color scheme 表示カラー
Verb to display ボタンに表示する文字

HTML5版・XFBML版の場合は以下のように設定します。

  • 「Send Button」のチェックを外す
  • 「Layout Style」は「buttoncount」か「boxcount」を選択

HTML5版を設置します

HTML5版

JavaScript読み込み用(<body>のすぐ後に配置)

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

ボタン本体のコード(ボタンを表示したい場所に配置)

<div class="fb-like" data-href="アドレス" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div>

URLをMTタグで取得するように置換したのが以下のコード。

<div class="fb-like" data-href="<$mt:EntryPermalink$>" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div>

以前はIFRAME版を設置していました

IFRAME版

コードを取得するところから。
Send Buttonにチェックを入れていると、「IFRAME」「URL」のコードを取得できないので注意。
JavaScript読み込み用のコードはなく、以下のコードをボタンを表示した居場所に配置するだけ。簡単です。

<iframe src="//www.facebook.com/plugins/like.php?href=アドレス&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;font=verdana&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>

URLをMTタグで取得するように置換したのが以下のコード。

<iframe src="//www.facebook.com/plugins/like.php?href=<$mt:EntryPermalink$>&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;font=verdana&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>

参考サイト

「いいね!」ボタンは XFBML 版を設置して Facebook に最適化すべき - てっく煮ブログ

下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事