記事一覧

HTML文法的に正しいSNSボタンの設置方法 その1

2012年2月より、タナウツではSNSボタンとはてなブックマークボタンが導入されています。
2月5日のサイト更新に続いて、ブログでも先週末からサイトと同様にボタンを設置しています。
今回は、これらSNSボタンを設置する際の問題と対策について少し。

Facebookのいいね!ボタンやTwitterのツイートボタンなどに代表されるSNSボタン。
mixiやGREEなどでも、ページ情報についての記録やコメントが行えるボタンがユーザーに提供されており、これらのボタンは、大手のポータルサイトなどはもちろんのこと、個人のブログでも昨今ではよく見かけるようになりました。
この手のボタンは公式サイトで公開されているHTMLタグを貼り付けるだけで手軽に利用できますし、何よりもSNSを利用するネットユーザーが飛躍的に増えている昨今、情報拡散という観点から言っても大きな利点となります。
また最近では、ブログを設置する段階からSNSボタンの設置サービスを標準で用意してくれるところも多くなっており、HTMLについての専門的な知識が特になくても、SNSボタンがさらに手軽に設置できるようにもなってきました。
SNSの隆盛を考えれば、SNSボタンの使用用途もまた、当面の間は拡大を続けていくことになるでしょう。

ところが、実はSNSボタンを設置する際には少なからぬ問題が伴います。
公式サイトなどで公開されている設置タグは、正式なHTML文法に乗っ取って作られたものではなく、かなり特殊なタグが付加されているのです。
たとえば、Twitterの公式サイトで提供されているツイートボタンの場合、以下のようなタグで構成されています↓

<a href="http://twitter.com/share" class="twitter-share-button" data-url=" (ページのURL) " data-text="(ページのタイトル名やコメントなど)" data-count="horizontal">ツイートする</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

赤文字で表示している部分は、全てツイートボタンオリジナルの非正規タグです。
これを「Another HTML-lint」でチェックをかけると、以下のような高レベルのエラーメッセージが出力されてしまいます↓

6: <a> に不明な属性 `data-url` が指定されています。
6: <a> に不明な属性 `data-text` が指定されています。
6: <a> に不明な属性 `data-count` が指定されています。

左の数値がエラーのレベルなのですが、だいたい6以上のレベルのエラーが発生したら、もうその時点で100点どころか80点レベルすらも諦めざるをえなくなってきます。
他のSNSボタンも状況は似たり寄ったりで、エラーレベルが最低でも6以上、場合によっては8~9などの高レベルに到達する(ちなみに「Another HTML-lint」におけるエラーレベルの最高値は9)ことも珍しくありません。
このように、公式サイトで公開されているSNSボタンのタグをそのまま使えば、HTMLチェックでたちまちのうちに大減点になってしまうことが確実なのです。
この大減点がイヤという理由から、あえて自分のサイトやブログにSNSボタンを設置しないという人もいるくらいで、かくいう私自身、最初はHTML文法チェックの減点を避けるためにSNSボタンを敬遠していたものでした。
しかし、それでもSNSボタンの設置による利点は捨てがたいし、HTML文法チェックの大減点を回避する形で上手く設置できる良い方法は何かないものなのか?
これが、タナウツサイト本家の全面リニューアルの際、私が最も苦労した部分のひとつでもありました。

タナウツで新規に設置しているSNSボタンは、Facebookいいね!ボタン、Twitterツイートボタン、mixiチェックボタン、GREEいいね!ボタンの総計4つ。
このうち、Twitterツイートボタンとmixiチェックボタンについては、タグに若干手を加えることでHTML文法チェックの減点回避が達成できました。
Twitterのツイートボタンについてはこんな感じ↓

<a href="http://twitter.com/share?button=(ボタンの種類【none、button-1、button-2】)&count=(カウンタ数の表示方法【none:非表示、horizontal:水平方向にカウント数を表示、vertical:垂直方向にカウント数を表示】)&url=(エンコードされたURL)&text=(エンコードされたページタイトル名ORコメント)&via=(Twitterアカウント名)&lang=(言語を指定【日本語の場合は「ja」】)" class="twitter-share-button" title="このページについてツイートする" rel="nofollow">つぶやく</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
※「script」タグはページ最下部に1つだけ設置。

最初のタグと大きく異なる点は、最初のタグが一度Twitterへ移動した後、タグ内にあるURLやタイトル名などの情報を収集し、それらの情報を含んだURLを自動生成してそこへユーザーを飛ばしているのに対し、後者のタグは「始めから生成済みのURL」を指定しているところ。
結果的にはどちらも同じページに辿り着くのですが、後者のタグはHTML文法に全く違反していないため、1点の減点すらもくらうことがありません。
この手法の問題点としては、始めからURLの中に情報を含ませなければならないため、URLやコメントを指定する際にUTF-8文字コード形式のURLエンコード変換を行わなければならないことが挙げられます。
たとえばタナウツネット雑記ブログのURLを指定する際には、以下のようなURLエンコード変換を行う必要があり↓

http://www.tanautsu.net/blog/

http%3A%2F%2Fwww.tanautsu.net%2Fblog%2F

またタイトル名やコメントなどを指定する際も同様に、

タナウツネット雑記ブログ | 田中芳樹を撃つ!

%E3%82%BF%E3%83%8A%E3%82%A6%E3%83%84%E3%83%8D%E3%83%83%E3%83%88%E9%9B%91%E8%A8%98%E3%83%96%E3%83%AD%E3%82%B0%20%EF%BD%9C%20%E7%94%B0%E4%B8%AD%E8%8A%B3%E6%A8%B9%E3%82%92%E6%92%83%E3%81%A4%EF%BC%81

といった変換を行わなければなりません。
こんな変換を手作業でいちいち行おうものなら、普通だったら時間がいくらあっても足りたものではありません。
しかしタナウツの場合、ブログはCGIで、サイトはMicrosoft Accessで管理していることによる利点がここで生きてくるんですよね。
ページを生成するプログラムの中に、上記のようなURLエンコード変換処理を行うためのロジックを予め入れておけば、後はプログラムが勝手に変換処理をやってくれるわけです。
一度そういったプログラムを組み込んでしまえば、あとは作成するページが何千ページあろうと、全て同じ処理を自動でやってくれるのですから楽なものです。
ちなみにmixiチェックボタンについては以下の通り↓

<a href="http://mixi.jp/share.pl?u=(エンコードされたURL)&k=(mixi識別キー)" rel="nofollow" onclick="window.open(this.href,'share',['width=632','height=456','location=no','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(',')); return false;" onkeypress="window.open(this.href,'share',['width=632','height=456','location=no','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(',')); return false;"><img src="(画像ファイル指定)" alt="mixiチェック" width="70" height="20"></a>

mixiチェックボタンは、mixiサイトで予め個人パートナー登録を行い、識別キーを入手しなければ使えないのですが、それ以外は一番手間もかからず簡単に設置できるボタンでしたね。
URLの指定方法についてはツイートボタンの時と同じです。

というわけで、SNSボタンのうち、Twitterのツイートボタンとmixiチェックボタンについては、リンクタグを改造するという方法でHTML文法チェックの減点回避が可能になりました。
しかし、残りのSNSボタン、Facebookいいね!ボタンとGREEいいね!ボタンについては、小手先のタグ改造程度のことではHTML文法チェックの減点を回避することができません。
この2つのボタンには一体どのような問題があり、かつどんな手法で対策を施したのか?
それについては、また後日に語ってみたいと思います。

※記事内で紹介しているHTMLタグ内における「<」「>」「&」は、全て半角から全角に変換しています。


ログ検索

検索フォーム
キーワード



リンク集

RSSリーダー

  • サイト内RSS登録
    • RSS 1.0 | タナウツネット雑記ブログ
    • RSS 2.0 | タナウツネット雑記ブログ
    • RSS Atom | タナウツネット雑記ブログ
  • 各種RSSリーダー
    • Add to Google
    • My Yahoo!に追加
    • Subscribe with livedoor Reader
    • HanRSSに追加

ブログランキング

  • 人気ブログランキング
    • 人気ブログランキング
  • にほんブログ村
    • ブログランキング・にほんブログ村
  • ブログの殿堂
    • ブログランキング・ブログの殿堂