W3CのMarkup Validation Service (validator.w3.org)はWebサイトの文書が規格に従っているかどうかを確認する事ができます。
有名なサイトであっても規格そのものに準拠していることは、このサービスを使えばあまり真剣に考えていないようすがみてとれます。
でもルールは守ってこそのルールですから、ここはどうにかしてValidatorサービスを通すようにしてみました。
今回使っている定義はXMTML/RDFaですが、XHTML系列であれば同じだと思います。
お題: Twitter/FacebookのボタンをWebサイトに追加する
作成した郵便番号の検索システムやらにTwitter/Facebookのボタンを追加しようとして、公式ガイドをみたところ見たことのないタグの使い方をしていました。
ちなみにボタンを追加するためのTwitterの公式ガイドは「Resources → Tweet Button」で、Facebookの方は「Like Button」にガイドがあります。
XHTMLではiframeタグが使えずにObjectタグを使うなどの変更が必要だったりすることは知られていますが、今回はその範囲を越えています。
スマートではないですが、規格に準拠しないところはJavaScriptを使って動的に作成することにしました。
Twitterボタンを設置する
オリジナルのコードは次のようになっています。
twitter.comに指示されたボタンを埋め込むためのHTML断片
<a
href="http://twitter.com/share"
class="twitter-share-button"
data-count="vertical"
data-via="YasuhiroABE">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
課題
問題はdata-countなどの属性が標準では定義されていないところです。
この部分をJavaScriptを使って追加してあげることにしました。
変更したコード
..
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript" charset="utf-8"></script>
..
<script type="text/javascript"><!--
jQuery(document).ready(function($){
$("a.twitter-share-button").attr("data-url","http://www.yadiary.net/postal/");
$("a.twitter-share-button").attr("data-text", "CouchDBを使用した郵便番号検索 @VPS");
$("a.twitter-share-button").attr("data-via", "YasuhiroABE");
$("a.twitter-share-button").attr("data-count", "horizontal");
$("a.twitter-share-button").attr("data-lang", "ja");
}
--></script>
...
<!-- twitter button -->
<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>
...Facebookボタンを追加する
ボタンを追加する方法にはiframeタグを使う方法と、FBMLを使う方法が選択可能です。
TwitterボタンではjQueryを使用したので、JavaScriptを使ってみます。
facebookから提示されたボタンを埋め込むためのHTML断片
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.yadiary.net/postal" show_faces="true" width="60"></fb:like>課題
fbタグが未定義なので、xmlnsでnamespaceを追加しています。 これは実際に定義されている必要はないので、他にも使われているらしい"http://www.facebook.com/2008/fbml"を使いました。
修正した
<html xml:lang="ja"
...
xmlns:fb="http://www.facebook.com/2008/fbml"
>
<head>
...
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"><!--
jQuery(document).ready(function($){
/* for facebook button */
var fbtag = document.createElement('fb:like');
fbtag.setAttribute("href","http://www.yadiary.net/postal/");
fbtag.setAttribute("layout", "button_count");
fbtag.setAttribute("show_faces","true");
fbtag.setAttribute("width", "80");
document.getElementById("facebook-button").appendChild(fbtag);
});
--></script>
...
</head>
<body>
...
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<span id="facebook-button"></span>
...
</body>
...今回jQueryを使っているのは、「既に使っているから」という以外の理由はありません。 コード自体はjQueryには依存していないはずです。
まとめ
はたしてこの方法が妥当なのか微妙ですが、どちらのボタンもJavaScriptを有効にしていないと動かないので、タグをJavaScriptでレンダリングしても良いのかなぁと自分を納得させています。
なんにしても、こんな方法で標準に準拠しないようなタグを使うことも可能です。
結果としてValidatorサービスでエラーなしにする事ができて満足しています。
