新はてなブックマークボタンのはまぞうブログへの設置

日本に於けるソーシャルボタンの走りと言えば はてなブックマーク ボタンで、今話題のFacebookのいいね！ボタンやGoogleの+1ボタンより以前から 多くの人に愛用されてきました。 特にIT系の方やネットを古くから利用している方に慣れ親しまれているソーシャルボタンです。 従ってこのソーシャルボタンをブログに表示しない手はありません。

しかし主に静岡県西部で地域ブログとして親しまれているブログシステム はまぞうブログでは2012年1月現在、これをブログの設定で表示する機能がありません。 利用するにはブログテンプレートに直接記述する必要があります。 本記事ではその方法を紹介したいと思います。

2010年11月新はてなブックマーク登場

はてなブックマーク、しばしば はてブ と略し称されるソーシャルブックマーク機能をブログに於いて簡単に閲覧者に利用して貰う為の はてブボタンは一昨年新しくなりました。 そのことを配信しているのが…

スポンサーリンク

はてなスタッフのはてなブックマークに関する日記である はてなブックマーク日記の2010年11月25日の記事 新「はてなブックマークボタン」をリリースしました。 になります。 新しく用意されたはてブボタンのデザインは

  1. スタンダード (B!＋ブックマーク数を表示)
  2. バーティカル (大きめのサイズでB!＋ブックマーク数を表示)
  3. シンプル B!のみ（ブックマーク数は表示されません）
の三つ、この内お好みのものを選んでブログに表示させることになります。

はてブボタン公式設置方法

はてブボタンの基本的な設置方法は公式サイト はてなブックマークボタンの作成・設置について に掲載されています。 項目1ではボタン設置サイトのサイトURLとサイト名称の入力を促されますので入力して見ます。 此処では本ブログのURL http://rank.hamazo.tv/ （※） とタイトルの はまぞうランクチェック！Blog （※） を入力して見ました。 項目2では上記した三つのデザインの内一つを選ぶようになっています。 此処ではスタンダードボタンを選択してみます。 すると項目3に設置サイトに貼り付ける為のコードが表示されています。 上の操作で表示されるコードは以下になります。

<a href="http://b.hatena.ne.jp/entry/http://rank.hamazo.tv/" class="hatena-bookmark-button" data-hatena-bookmark-title="はまぞうランクチェック！Blog" 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 type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

はてブボタンのJavaScriptファイルの扱い

上記で得られたコードに於いて緑字で表示した最後の部分で はてブボタンの機能を実現する為のプログラムである JavaScriptをはてなブックマークのサーバーから読み込むように支持しています。

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
この部分はこのコードから切り離しが出来ます。 切り離したらテンプレートのヘッダ部分に移し変えるのが良いでしょう。 何故ならばブログに於いてはトップページやアーカイブページでは 幾つもの記事が同ページに表示されるのが普通ですが それに従うとこの部分が一回読み込めば事足りるのにも関わらず 記事の分だけ繰り返し読み込まれるという無駄が発生してしまうからです。

トップページやアーカイブページのテンプレートではヘッダに JavaScript読み込み部分を書き込めば効率的になりますが、 個別ページではその必要はありませんので このコードをそのままはてブボタンを表示したい場所に書き込んでも特に非効率は発生しません。 ヘッダ部分に移動させてもまた同じです。

はてブボタン実表示部分のコード

上記に依って以下が実際にはてブボタンを表示させたい箇所の テンプレートに書き込むコードになります。

<a href="http://b.hatena.ne.jp/entry/http://rank.hamazo.tv/" class="hatena-bookmark-button" data-hatena-bookmark-title="はまぞうランクチェック！Blog" 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>

此処で赤字で記した部分、 項目1でボタン設置サイトのサイトURLとサイト名称を入力したものが反映されている部分ですね、 此れを自分のブログに合わせて編集します。 さもないと本ブログにブックマークをしてしまうことになりますから。

はてブボタンコードのURL部分の編集

先ずはどのページのアドレス即ちURLをブックマークするかの部分の編集、 詰まり以下の赤字部分の編集になりますが

href="http://b.hatena.ne.jp/entry/http://rank.hamazo.tv/"
実はこの辺りの考え方は のいいね！ボタンと+1ボタンと考え方は同じです。 はまぞうブログシステムでは本ブログ2011年5月31日の記事 Facebook Comments機能のHamaZoブログへの設置の最適化 に記したように 置換タグ なる機能が用意されています。 これを利用して同じページ中に異なるページのURLを指定出来るのでした。 実際には赤字部分は以下の様に変更すれば良いでしょう。

href="http://b.hatena.ne.jp/entry/<%BlogUrl%>e<%EntryId%%>.html"

はてブボタンコードのタイトル部分の編集

次にタイトル部分、以下の赤字の部分の編集ですが

data-hatena-bookmark-title="はまぞうランクチェック！Blog"
此処でも 置換タグ を用いて以下の様にすれば良いでしょう。
data-hatena-bookmark-title="<%EntryTitle%>"

但し実際にはこの部分は記述がなくともURLさえ記述がなされていれば問題ないようです。 実際に本ブログでもこの記述をしないでブログに設置しましたが はてブボタンを押すと確りタイトル部分を拾ってくれます。 恐らく指定したURLからタイトルを拾ってくれているのだと考えられます。

はてブボタンの最終的設置コード

以上よりはてブボタンの表示コードは以下の様になります。

<a href="http://b.hatena.ne.jp/entry/<%BlogUrl%>e<%EntryId%%>.html" class="hatena-bookmark-button" 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>

此れをテンプレートの実際にはてブボタンを表示させたい箇所の書き込めば ブログにはてブボタンが表示される筈です。 このボタンを設置することに依ってはてなブックマークをする際の敷居が下がりますので 閲覧者がはてブユーザーの場合には便宜を図ることになりますし、 若しかしたら少しははてブが増えるかも知れませんね。

※ 現在では HamaZoランクチェック！Blog は本ブログ（ Acenumber Technical Issues ）に統一しました。

2件のコメント

  1. Facebookいいね！ボタンの新しくなった設置方法はまぞうブログ版

    幾つものソーシャルメディアがこれだけ世の中に普及し、それぞれがそれなりのシェアを有するとブログに設置する連携ボタンも幾種類にもなります。ブログシステムで、本ブログでははまぞうブログですが、連携ボタンをすべて用意してくれていればいいのですが、時にはブログと

  2. Twitterボタンの表示位置をデザイン的に調整してみた

    ブログにソーシャルボタンを表示するのは当たり前になりました。勿論本ブログにもソーシャルボタンを備え付けています。備え付けているソーシャルボタン本ブログに備え付けたるソーシャルボタンは以下。Twitter ツイートボタンFacebook いいねボタンGoogle+ Plus One ボタン

コメントは受け付けていません。