設置することで情報拡散に使用でき便利だが、標準仕様ではHTML文法的に正しくないタグで構成されているSNSボタン。
Twitterツイートボタンとmixiチェックボタンについて解説した前回に引き続き、今回はFacebookとGREEのいいね!ボタンのHTML文法的に正しい設置方法について少し。
FacebookとGREEのいいね!ボタンは、SNSボタンの中でもかなり特殊なタグで構成されています。
Twitterツイートボタンとmixiチェックボタンは、一般的にも多用される<a>のリンクタグで構成されていたため、カスタマイズも比較的容易だったのですが、FacebookとGREEのいいね!ボタンでは<iframe>(インラインフレーム)というタグが使用されています。
Facebookいいね!ボタン
<iframe src="http://www.facebook.com/plugins/like.php?href=(エンコードされたURL)&send=false&layout=box_count&show_faces=false&action=like&colorscheme=light&font&width=70&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=(エンコードされた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>はHTMLページの中に全く別のHTMLページを出力表示させる際に使われるタグで、主にページの中に大量の情報を表示させたりする際などに多用されています。
ところが<iframe>は、HTMLのバージョンによっては非推奨となっている上、タグの属性でも特殊なコードが使われていることが珍しくないため、HTML文法的には忌避されるタグだったりするんですよね。
実際、上記のタグを「Another HTML-lint」でチェックをかけてみると、以下のようなエラーメッセージが出力されてしまいます↓
7: <IFRAME> は他のHTML用のタグです。
6: <IFRAME> に不明な属性 `ALLOWTRANSPARENCY` が指定されています。
7: </IFRAME> は他のHTML用のタグです。
もちろん、こんな高レベルなエラーメッセージが出てくる時点で、「Another HTML-lint」では100点満点どころか80点の獲得すらも絶望的となってしまいます。
しかも<iframe>は<a>タグと異なり、それを使うこと自体がHTML文法に違反していると言われてしまうわけですから、<iframe>タグ内でどんなカスタマイズをしても意味がありません。
よって、FacebookとGREEのいいね!ボタンをHTML文法的に正しく表示させるためには、<iframe>を直接使うことなくボタンを表示させるためのテクニックが必要となるわけです。
そのための方法としてまず考えられるのは、JavaScriptを使用してHTMLタグを出力させる、というやり方があります。
その手法は以下の通り↓
Facebookいいね!ボタン
<script type="text/javascript">
document.write(‘<iframe src="http://www.facebook.com/plugins/like.php?href=(エンコードされたURL)&send=false&layout=box_count&show_faces=false&action=like&colorscheme=light&font&width=70&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=(エンコードされた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関数は「HTMLページ内に文字列を書き出す」ためのもので、これはタグも書き出すことが可能なんですよね。
ただし、document.write関数内で「/(スラッシュ)」を直接記載すると、「Another HTML-lint」では高レベルのエラーメッセージが出力されてしまいます。
「/(スラッシュ)」はそれ自体がJavaScriptで使用する演算子のひとつになっているため、そのままでは演算子の処理が行われてしまうのです。
これは「/(スラッシュ)」の前に「\」をつけ、演算子ではなく文字列としての「/(スラッシュ)」であるとJavaScriptに示すことで回避できます。
これで高レベルエラーはあらかた回避できるのですが、さらにスマートなタグ構成にしたいのであれば、JavaScript記載部分を外部のJavaScriptファイルに移してそれを読み込む形式にするという方法がオススメです。
具体的にはこんな風にします↓
HTMLファイル
表示したい箇所に<script type="text/javascript" src="(○○○.jsフォルダのあるURL)(○○○.js)”></script>
外部JavaScriptファイル(○○○.js)
document.write(‘(<iframe>のタグ内容全部)’);
これで、SNSボタンを設置しながら「Another HTML-lint」の減点回避が可能になるのではないかと。
JavaScriptを使用しているので、JavaScriptが使用できないブラウザや環境だと何も表示されないのが辛いところではあるのですが、まあこれはやむをえないでしょうね。
前回のテクニックと併せ、結構使える手法なのではないかと思いますので、自分でサイトを運用している方は是非試してみてはいかがでしょうか?
※記事内で紹介しているHTMLタグ内における「<」「>」「&」は、全て半角から全角に変換しています。