タナウツネット雑記ブログ

設置することで情報拡散に使用でき便利だが、標準仕様ではＨＴＭＬ文法的に正しくないタグで構成されているＳＮＳボタン。
Twitterツイートボタンとmixiチェックボタンについて解説した前回に引き続き、今回はFacebookとGREEのいいね！ボタンのＨＴＭＬ文法的に正しい設置方法について少し。

FacebookとGREEのいいね！ボタンは、ＳＮＳボタンの中でもかなり特殊なタグで構成されています。
Twitterツイートボタンとmixiチェックボタンは、一般的にも多用される＜a＞のリンクタグで構成されていたため、カスタマイズも比較的容易だったのですが、FacebookとGREEのいいね！ボタンでは＜iframe＞（インラインフレーム）というタグが使用されています。

Facebookいいね！ボタン
＜iframe src="http://www.facebook.com/plugins/like.php?href=（エンコードされたＵＲＬ）＆amp;send=false＆amp;layout=box_count＆amp;show_faces=false＆amp;action=like＆amp;colorscheme=light＆amp;font＆amp;width=70＆amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"＞＜/iframe＞

GREEいいね！ボタン
＜iframe src="http://share.gree.jp/share? url=（エンコードされたＵＲＬ）＆type=0＆height=20" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="border:none; overflow:hidden; width:100px; height:20px;" allowTransparency="true"＞＜/iframe＞

＜iframe＞はＨＴＭＬページの中に全く別のＨＴＭＬページを出力表示させる際に使われるタグで、主にページの中に大量の情報を表示させたりする際などに多用されています。
ところが＜iframe＞は、ＨＴＭＬのバージョンによっては非推奨となっている上、タグの属性でも特殊なコードが使われていることが珍しくないため、ＨＴＭＬ文法的には忌避されるタグだったりするんですよね。
実際、上記のタグを「Another HTML-lint」でチェックをかけてみると、以下のようなエラーメッセージが出力されてしまいます↓

7: ＜IFRAME＞ は他のHTML用のタグです。
6: ＜IFRAME＞ に不明な属性 `ALLOWTRANSPARENCY` が指定されています。
7: ＜/IFRAME＞ は他のHTML用のタグです。

もちろん、こんな高レベルなエラーメッセージが出てくる時点で、「Another HTML-lint」では１００点満点どころか８０点の獲得すらも絶望的となってしまいます。
しかも＜iframe＞は＜a＞タグと異なり、それを使うこと自体がＨＴＭＬ文法に違反していると言われてしまうわけですから、＜iframe＞タグ内でどんなカスタマイズをしても意味がありません。
よって、FacebookとGREEのいいね！ボタンをＨＴＭＬ文法的に正しく表示させるためには、＜iframe＞を直接使うことなくボタンを表示させるためのテクニックが必要となるわけです。

そのための方法としてまず考えられるのは、JavaScriptを使用してＨＴＭＬタグを出力させる、というやり方があります。
その手法は以下の通り↓

Facebookいいね！ボタン
＜script type="text/javascript"＞
document.write(‘＜iframe src="http://www.facebook.com/plugins/like.php?href=（エンコードされたＵＲＬ）＆amp;send=false＆amp;layout=box_count＆amp;show_faces=false＆amp;action=like＆amp;colorscheme=light＆amp;font＆amp;width=70＆amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"＞＜\/iframe＞’);
＜/script＞

GREEいいね！ボタン
＜script type="text/javascript"＞
document.write(‘＜iframe src="http://share.gree.jp/share? url=（エンコードされたＵＲＬ）＆type=0＆height=20" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="border:none; overflow:hidden; width:100px; height:20px;" allowTransparency="true"＞＜\/iframe＞’);
＜/script＞

JavaScriptのdocument.write関数は「ＨＴＭＬページ内に文字列を書き出す」ためのもので、これはタグも書き出すことが可能なんですよね。
ただし、document.write関数内で「/（スラッシュ）」を直接記載すると、「Another HTML-lint」では高レベルのエラーメッセージが出力されてしまいます。
「/（スラッシュ）」はそれ自体がJavaScriptで使用する演算子のひとつになっているため、そのままでは演算子の処理が行われてしまうのです。
これは「/（スラッシュ）」の前に「\」をつけ、演算子ではなく文字列としての「/（スラッシュ）」であるとJavaScriptに示すことで回避できます。
これで高レベルエラーはあらかた回避できるのですが、さらにスマートなタグ構成にしたいのであれば、JavaScript記載部分を外部のJavaScriptファイルに移してそれを読み込む形式にするという方法がオススメです。
具体的にはこんな風にします↓

ＨＴＭＬファイル
表示したい箇所に＜script type="text/javascript" src="（○○○.jsフォルダのあるＵＲＬ）（○○○.js）”＞＜/script＞

外部JavaScriptファイル（○○○.js）
document.write(‘（＜iframe＞のタグ内容全部）’);

これで、ＳＮＳボタンを設置しながら「Another HTML-lint」の減点回避が可能になるのではないかと。
JavaScriptを使用しているので、JavaScriptが使用できないブラウザや環境だと何も表示されないのが辛いところではあるのですが、まあこれはやむをえないでしょうね。
前回のテクニックと併せ、結構使える手法なのではないかと思いますので、自分でサイトを運用している方は是非試してみてはいかがでしょうか？

※記事内で紹介しているＨＴＭＬタグ内における「＜」「＞」「＆」は、全て半角から全角に変換しています。