はてなブックマークボタンの設置方法

HTML5以外のページに「はてなブックマーク」のボタンを設置すると、W3Cエラーとなってしまいます。私はXHTMLでも、この文法違反を簡単な方法で回避して、普通のホームページの全てのページにPHPを使って設置してみました。

はてなブックマークとは

はてなブックマークはウェブ上に作成するブックマーク、すなわち お気に入り楽天 リンクで、それを公開したり、共有したりすることができるソーシャルブックマークサービスです。

自分のウェブページがこのブックマークに登録される件数が増えると、ページの人気が高いということで、検索で上位に表示される可能性があります。簡単にブックマークできるように、公開したウェブページに、はてなブックマークのボタンを設置しておくと便利です。

はてなブックマークのボタンの作成と設置

自分のホームページやブログに、はてなブックマークのボタンを設置する場合は、はてなブックマーク作成のページでブックマークボタンのスクリプトを作成します。

W3Cエラーを回避する為、取得したボタンのスクリプトを変更する

はてなブックマークで取得したボタンのスクリプトの例は次のようになります。

このスクリプトをそのままXHTML1やHTML4のファイルに貼りつけると、次の箇所でW3Cエラーとなります。これは、貼り付けたコードのa要素に含まれるdata-hatena-bookmark-title属性と、data-hatena-bookmark-layout属性と、script要素のasync属性とが、HTML5以外では不明な属性になるからです。

この為、上記のスクリプトから次のスクリプト部分を削除します。

data-hatena-bookmark-title="タイトルの例"

data-hatena-bookmark-layout="standard-balloon"

async="async"

この3つのスクリプトは削除しても特に問題は起こしません。a要素のタイトルは記述しなくても、そのページのタイトルが勝手に使われます。a要素のレイアウト部分を削除すると標準のボタンが使われます。script要素のasync属性は非同期でスクリプトを読む為のものです。

SNSの非同期読み込みはページスピードに影響

script要素のasync属性を削除すると、スクリプトの読み込みが非同期で行われず、ページの読み込みスピードが遅くなります。これを重視する場合は、script要素のasync属性を削除してはいけません。

個々のPHPページに合うようにURL部を変更する

普通のホームページをPHPで記述している場合は、個々のPHPページに合うようにURL部を変更する必要があります。取得したスクリプトのリンクアドレス部の

href="http://b.hatena.ne.jp/entry/http://example.jp/"

を次のように、サーバー名(ドメイン名example.jp)とそれ以降のアドレスをPHPで記述してやります。

href="http://b.hatena.ne.jp/entry/http://.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']"

$_SERVER['REQUEST_URI']部分はURL部の後半(/***/example.php等)を表しています。

パラメータ付きURLの場合は別ページと判断される問題

パラメータ付きURL(?*付き)の場合は、内容が同じでもURLアドレスが違うので、別ページと判断される問題が起こります。つまり、パラメータ無しのページでは、はてなブックマークでブックマークされていても、同じページのパラメータ付きの場合では、ブックマークが無くなってしまったりします。

そこで、この部分を変更し正規表現を使って、次のように「?」以降のパラメータを取り除いたものをURLとして使います。

<?php $rq_uri = preg_replace('/\?.*/', '', $_SERVER['REQUEST_URI']); ?>

この記述はフェイスブックの「いいね」と「コメント」を付けた時に既にヘッドタグ内で使っていますので、別に記述する必要はありません。従って最終的に、はてなブックマークボタンは次のようなスクリプトになりました。

設置した結果

普通のホームページでも、PHPを使えば、個々のページに、はてなブックマークのボタンを簡単に設置できました。また、HTML4やXHTML1でもW3Cのエラーなく設置できました。後は、検索で上位に表示されるようになれば言うことはないのですが。