ソーシャルブックマークボタン等を設置されたURLにリンクする方法


サイトの方にソーシャルブックマークボタンを設置しようとアレコレ試しています。
FacebookやGoogle+などのボタンは設置されたページのURLに対してリンクするので何も考えずに設置できるのですが、はてなブックマークなど一部のものは設置コードでリンクするURLを設定してしまうので、どのページに貼っても特定のURLにしかリンクできないという事が起こります。
ブログなどならば記事毎のURLとして使える変数があったりするのですが、通常のhtmlで書かれたWEBサイトだとそういう便利なものもありません。
1ページ毎にリンク先を書き換えるというのは非常に手間ですので、リンク先をボタンに設置されたURLに書き換える簡単なJavascriptコードを以下に例示します。
今回ははてなブックマーク用のコードですが、他の場合でも応用が利くかと思います。

<script type="text/javascript" language="javascript">
document.write("<a href=\""+document.URL+"\" class=\"hatena-bookmark-button\" data-hatena-bookmark-title=\""+document.title+"\" data-hatena-bookmark-layout=\"standard\" title=\"このエントリーをはてなブックマークに追加\"><img src=\"http://b.st-hatena.com/images/entry-button/button-only.gif\" alt=\"このエントリーをはてなブックマークに追加\" width=\"20\" height=\"20\" style=\"border: none;\" /></a>");</script>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

難しいことは何もなく、単に設置コードをJavascriptで書き出し、URLを指定するところをdocument.URL、タイトルをdocument.titleで指定することで、そのページのURLとタイトルを取得しているだけです。
非常に簡単なものですが、こういったやり方は結構役に立つ場面がありますので、Javascriptに余り詳しくなくても覚えておくと便利かも知れません。

スポンサードリンク