小粋空間  -  a cheap joke and a play on words site

Facebookのfb:like要素を設置したページを(X)HTML validにする方法

Facebookのfb:likeタグをブログに設置したときに、そのページを(X)HTML validにする方法です。

１．概要

いいね！ボタン設置用のコードはiframe要素が用意されていますが、「Send Button」をチェックしている場合、スクリーンショットのようにfb:like要素しかありません。

fb:like要素を設置したページは、The W3C Markup Validation Serviceなどではvalidな(X)HTMLとなりません。

２．対処

validな(X)HTMLにするためには、「Send Button」のチェックをはずして、iframe要素を取得するしかありません。下のコードはMovable Typeのブログ記事ページへの設置例です。

<iframe src="http://www.facebook.com/plugins/like.php?href=<$mt:EntryPermalink$>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px"></iframe>

---

お詫び：当初投稿していた内容は以下ですが、このカスタマイズではvalidな(X)HTMLになりません（The W3C Markup Validation ServiceではOKになりますが、script要素が評価される前の結果を表示するためです）。誤った情報を公開してしまい、大変申し訳ございませんでした。またご指摘くださった皆様、ありがとうございました。

２．カスタマイズ

validな(X)HTMLにするには、fb:likeタグを次のようなJavaScriptに置き換えます。コードはMovable Typeのブログ記事ページへの設置例です。

<div class="fblike" id="fblike<mt:EntryID>"></div>
<script type="text/javascript">
//<![CDATA[
var c = document.getElementById('fblike<mt:EntryID>');
var e = document.createElement('fb:like');
e.setAttribute('href', '<mt:EntryPermalink>');
e.setAttribute('send', 'false');
e.setAttribute('width', '450');
e.setAttribute('show_faces', 'true');
e.setAttribute('font', 'verdana');
c.appendChild(e);
//]]>
</script>

setAttributeの内容は適宜変更してください。

３．参考サイト

参考サイトは以下です。ありがとうございました。

W3C Validated FB (Facebook) Like Button

上記のページをThe W3C Markup Validation Serviceでチェックしてみてください。