ブログ|静的志向

言語言語切替
日本語 English
サイト内検索

札幌在住のTakaによる静的htmlで作成したブログです。

素早く表示されるブログを作ることを目的として書いています。

はてなブックマークボタンをjavascriptで書き換える方法のメモ

WordPressなら簡単にできるはてなブックマークボタンの中身の書き換えですが、静的htmlではPHPが使えないためけっこう苦労します。今回は静的htmlではてなブックマークボタン内部を書き換えてみたので、その方法をメモを兼ねて公開しておきます。

はてなブックマークのソースコードはメンドくさい

はてなブックマーク

↑当サイト(静的志向)もSNSでシェアできるようにボタンを設定しています。

TwitterやLINEのボタンはコードをそのまま貼り付ければ完成するので楽ちんなのですが、Facebookとはてなブックマークはソースコードが長ったらしいので、少々やっかいです。

例えばはてなブックマークのシェアボタンは以下のコードとなっています↓

<a href="http://b.hatena.ne.jp/entry/http://kentampontam.com/" class="hatena-bookmark-button" data-hatena-bookmark-title="静的志向" data-hatena-bookmark-layout="standard-noballoon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加" id="hatebuButton"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>

aタグ内の「href」が該当ページのURLでなく、b.hatena.ne.jpとなっているし、titleタグとは別にdata-hatena-bookmark-titleがあったりと、とにかく面倒な構造です。

もしブログやサイトをWordPressで管理しているのならURLとタイトルを取得するコードに書き換えて済みますが、PHPが使えないとそうもいきません。

javascriptで書き換えようにも「cssの命名規則を自分なりに統一する」で言及したように、javascriptではハイフンが使えません。つまりdata-hatena-bookmark-titleなどのようにハイフンが伴うタグは、document.getElementByIdを使って特定タグ内のhrefなどを制御できないのです。

もっと大きい視点ですべてを書き換えれば問題なし

はてなブックマークボタンはaタグで囲まれています。このaタグの中を書き換えようとすれば難しくなりますが、aタグそのものを別のタグで囲ってしまえば意外と簡単にurlなどの書き換えができるようになります。

具体的には以下のように<li></li>でaタグを囲うのです。

※私はSNSボタンをulタグで並べているので、個々のSNSをliで囲っています。もちろんliでなくdivやspanでもOKです。

<li><a 中略 /a></li>

このときliタグの中をinnerHTML丸ごと書き換えられるように、liにidタグを付加させておきます。

<li id="hatenaBookmarkArea"><a 中略 /a></li>

あとはjavascriptのinnerHTMLを使って、liタグの中をすべて変更します。

<script type="text/javascript">
var hatenaBookmarkArea = document.getElementById('hatenaBookmarkArea');
var url = location.href;
var entryUrl = "http://b.hatena.ne.jp/entry/";
combineUrl = entryUrl + url;
var ttl = document.title;

hatenaBookmarkArea.innerHTML = "<a href='" + combineUrl + "' class='hatena-bookmark-button' data-hatena-bookmark-title='" + ttl + "' data-hatena-bookmark-layout='standard-noballoon' data-hatena-bookmark-lang='ja' title='このエントリーをはてなブックマークに追加'><img src='https://b.st-hatena.com/images/entry-button/button-only@2x.png' alt='このエントリーをはてなブックマークに追加' width='20' height='20' style='border: none;' /></a>"; });
</script>

やっていることは

  1. document.getElementByIdで指定したliタグを取得
  2. location.hrefで現在ページのURLを取得
  3. 変数entryUrlとurlを合体させて、はてなブックマークのaタグ内のhrefを用意
  4. document.titleで現在ページのタイトルを取得
  5. innerHTMLで中身をすべて書き換える

これではてなブックマークボタンのurlとタイトルを含め、無理やり全部書き換えることができます。

なおjavascriptを外部ファイル化する場合は、scriptを$(function(){と});で囲ってください。

あとがき

苦戦しまくったけど、これではてなブックマークボタンも気兼ねなく設置できるようになりました。同じ方法でFacebookのシェアボタンの書き換えも可能です。

↓鋭意制作中↓

ダイエットエラミカ

私自身の実践と経験に基づくリバウンドしないダイエットについて詳しく解説しています。

筋肉量31.4kg

BMI21.9 筋肉型スリム

元の用紙はこちら

↑このように私自身の体組成結果をすべて公開しています。現時点で2年以上のデータ、体脂肪率1桁の結果は21ヶ月連続で達成中です。

詳しくは「ダイエットエラミカ」よりご覧ください。

Sponsor Link

シェアしてくれると嬉しいです