適当プログラマー

ほらね?頑張れば作れるんだよ。私だってやれば出来る子なんだよ。

XHTMLでソーシャルボタンをつける

昨日、深夜までソーシャルボタンをつけるために戦ってた。きっと出来た。私のようにXHTMLで作られたサイトにソーシャルボタンをつけるために戦う人のための記事。そこそこ知識がある人向けです。

本当は私の戦いの記録をネチネチと書き綴りたいけど、ネチネチした男は嫌われるので結論だけ書きます。objectタグを使い、objectで呼んだ表示する別ページでソーシャルボタンをつけて、その部分を表示する、という方法をとりました。別ページはhtml4.01なりhtml5なりで作成すれば良いと思う。

まず、私はTwitterとはてなブックマークとFacebookのソーシャルボタンをつけました。これらのソーシャルボタンを生成するサイトを確認して欲しいのですが、これらは「ブックマークするページのアドレス」と「ブックマークするページのタイトル」を指定できます。指定してタグを生成し、そのタグを確認してみてください。タグの中に、指定した「アドレス」と「タイトル」が書かれている箇所があります。つまり、ここを各ページによって動的に変更すれば良いのです。

まず、objectタグの呼び出し元のページのアドレスとタイトルを動的に取得しなければなりません。サーバーサイドプログラムでサイトを生成している人はそれを使えばいいのですが、私はサーバーサイドプログラムでサイトを生成していないので、クライアントサイド、つまりjavascriptで取得しました。javascriptではアドレスは document.location で。タイトルは document.title で取得できます。

次に、objectタグで、「サイトアドレス」と「サイトタイトル」の情報を渡しつつ、ソーシャルボタンを表示するための別ページを呼び出します。情報を渡す方法ですが、GETパラメータを渡しつつページを呼び出すことで可能です。 http://www.example.com/abc.xhtml?title=haihai&url=http〜 みたいな感じですね。ただし、GETで渡す値はURLエンコードすることを忘れないでください。

私の場合はこれもjavascriptでやりました。以下に、こんな感じのコード書いたよ、って例を書きます。

document.getElementById('social').innerHTML = '<object data="/social-button.php?title=' + encodeURIComponent(document.title) + '&url=' + encodeURIComponent(document.location) +'" type="text/html" width="500" height="360">ソーシャルボタン</object>';

上は、id=socialのタグの中にobjectタグを挿入する例です。javascriptはbodyの終了タグの直前にでも入れるといいさ。

で、上の例ではsocial-button.phpというページでPHPプログラムでGETで情報を取得して、その情報を元にソーシャルボタンを作成しています。PHPを使う場合も、objectタグのtype属性は"text/html"で構いません。作成方法は、ソーシャルボタンのタグを生成した際のサイトアドレスとサイトタイトルをそれぞれの情報に入れ替えるだけです。情報を受け取った時にURLデコードするのを忘れないでください。PHPだとrawurldecode($_GET["url"])、rawurldecode($_GET["title"])みたいな感じですね。ただし、FacebookだけはURLエンコードされたままのアドレスを使う気がする……。多分。

「呼び出し先はPHPじゃなくてhtmlとjavascriptで作れない?」って思うかもしれないけど、そこは確かめてないです。私も最初ちょっとだけ挑戦しましたが、PHPの知識があったので「最初に軽くhtmlとjsで試して、無理だったらPHPで作ろう」という気持ちで、軽くやって無理でした。でも、javascriptでもGET情報を取得できるようなので、本気出せば出来るのかも?

で、「なんであんたのサイト、ソーシャルボタンの周りに巨大な余白があるの?」って話だけど、私今までソーシャルボタンを押したこと無かったのね。初めてTwitter、はてなブックマーク、いいねボタンを押してみたのさ。そしたら、「Twitter」と「いいねボタン」は別ウィンドウが開くんだけど、はてなブックマークだけjsで制御してるっぽい吹き出しが表示されるの。別ウィンドウじゃないの。objectタグで呼び出した表示領域の中で表示されるの。つまり、表示領域が狭いと、はてなブックマークの吹き出しが途中で切れちゃったりするのさ。だから、仕方なく表示領域を広く取ってる。どんまい。

っていうか、もしかしたらソーシャルボタン、すでにXHTMLに対応したりしてる?私、XSLTを使ってソーシャルボタンを表示しようとしたんだけど、うまく行かなかったんだよね。だからobjectタグを使う方法にたどり着いた。だれか他にXSLTを使っててソーシャルボタンがうまく表示できない、って人がいれば参考にしてください。

あ、そういえば、きちんと動作確認してない。だってアカウント持ってない。でも、ほら、ブックマークしてる人の数とか表示されてるから、多分うまく動いてるよ、たぶん……。じゃ、そういうことで。シュワッチ。

このエントリーをはてなブックマークに追加