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

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

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

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

＜a href="http://twitter.com/share" class="twitter-share-button" data-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` が指定されています。

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

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

＜a href="http://twitter.com/share?button=（ボタンの種類【none、button-1、button-2】）＆amp;count=（カウンタ数の表示方法【none：非表示、horizontal：水平方向にカウント数を表示、vertical：垂直方向にカウント数を表示】）＆amp;url=（エンコードされたＵＲＬ）＆amp;text=（エンコードされたページタイトル名ORコメント）＆amp;via=（Twitterアカウント名）＆amp;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」タグはページ最下部に１つだけ設置。

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

https://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

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

＜a href="http://mixi.jp/share.pl?u=（エンコードされたＵＲＬ）＆amp;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サイトで予め個人パートナー登録を行い、識別キーを入手しなければ使えないのですが、それ以外は一番手間もかからず簡単に設置できるボタンでしたね。
ＵＲＬの指定方法についてはツイートボタンの時と同じです。

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

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