はてなブックマークボタンを表示する †
基本的なコード †
はてなブックマークボタンは、「はてなブックマークボタンの作成・設置について - はてなブックマーク」でコードを取得できます。
基本的なコード（小さなボタン）は、以下のようになります。
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple-balloon" 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 type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
|
大きなボタン（「B!」の右に「ブックマーク」）で、URLを「http://dobon.net/」、タイトルを「DOBON.NET」、ブックマーク数を上（バーティカル）に表示、表示言語を日本語にした時のコードは、以下のようになります。
<a href="http://b.hatena.ne.jp/entry/dobon.net/" class="hatena-bookmark-button" data-hatena-bookmark-title="DOBON.NET" data-hatena-bookmark-layout="vertical-balloon" 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 type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
|
URLを「https://dobon.net/」にすると、以下のようになります。
<a href="http://b.hatena.ne.jp/entry/s/dobon.net/" class="hatena-bookmark-button" data-hatena-bookmark-title="DOBON.NET" data-hatena-bookmark-layout="vertical-balloon" 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 type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
|
行動情報を取得しないはてなブックマークボタン †
以前のはてなブックマークボタンは、マイクロアドがユーザーに合った広告を表示するためにユーザーの行動情報を取得していました。しかし現在ではこの機能は停止されたということです。詳しくは、「はてなブックマークボタンを表示する」や「はてなブックマークボタンが取得した行動情報の第三者への送信を停止しました」にあります。
旧はてなブックマークボタンを表示する †
旧はてなブックマークボタン（「このエントリーをはてなブックマークに追加」アイコンと「このエントリーを含むはてなブックマーク」アイコン）の設置方法は、「自分のブログに「↑B」「B!」アイコンを表示する」で説明されています。
また、被ブックマーク数を表示する方法は、「被ブックマーク数を表示する」で説明されています。
これらの方法ならば、JavaScriptを使用しなくても表示できます。
例えば「http://dobon.net/」のブックマークボタンと被ブックマーク数を表示するには、次のようなコードを書きます。
<a href="http://b.hatena.ne.jp/entry/add/http://dobon.net/"><img src="http://b.hatena.ne.jp/images/append.gif" width="16" height="12" style="border: none;" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" /></a>
<a href="http://b.hatena.ne.jp/entry/http://dobon.net/"><img src="http://b.hatena.ne.jp/entry/image/http://dobon.net/" style="border: none;" alt="はてなブックマーク - DOBON.NET" title="はてなブックマーク - DOBON.NET" /></a>
|
なお被ブックマーク数の画像には3種類の大きさがあります。上記のようなURLが「http://b.hatena.ne.jp/entry/image/エントリーのURL」の画像は高さが13pxですが、高さが15pxの大きい画像のURLは「http://b.hatena.ne.jp/entry/image/large/エントリーのURL」で、高さが11pxの小さい画像のURLは「「http://b.hatena.ne.jp/entry/image/small/エントリーのURL」です。
旧ブックマークボタンをJavaScriptで表示する †
旧ブックマークボタンではページのURLを埋め込まなければなりませんが、それができない時のために、JavaScriptで現在のページのブックマークボタンを表示する例を示します。
<div id="hatena_button"></div>
<script type="text/javascript">
(function(){
var currentUrl = location.href.replace(/#/, '%23');
var appImg = document.createElement("img");
appImg.setAttribute("src","http://b.hatena.ne.jp/images/append.gif");
appImg.setAttribute("width","16");
appImg.setAttribute("height","12");
appImg.setAttribute("style","border: none;");
appImg.setAttribute("alt","このエントリーをはてなブックマークに追加");
appImg.setAttribute("title","このエントリーをはてなブックマークに追加");
var appA = document.createElement("a");
appA.setAttribute("href","http://b.hatena.ne.jp/entry/add/" + currentUrl);
appA.setAttribute("target","_blank");
appA.appendChild(appImg);
var cntImg = document.createElement("img");
cntImg.setAttribute("src","http://b.hatena.ne.jp/entry/image/" + currentUrl);
cntImg.setAttribute("style","border: none;");
cntImg.setAttribute("alt","はてなブックマーク");
cntImg.setAttribute("title","はてなブックマーク");
var cntA = document.createElement("a");
cntA.setAttribute("href","http://b.hatena.ne.jp/entry/" + currentUrl);
cntA.setAttribute("target","_blank");
cntA.appendChild(cntImg);
var div = document.getElementById("hatena_button");
div.appendChild(appA);
div.appendChild(cntA);
})();
</script>
|
はてなブックマークカウンター †
はてなブックマークカウンターは、サイト全体の被ブックマーク数をカウンタ表示します。設置方法は、「はてなブックマークカウンター」に説明があります。
例えば、「http://dobon.net/」のサイト全体の被ブックマーク数を表示するには次のようなコードを書きます。
<a href="http://b.hatena.ne.jp/entrylist?url=http://dobon.net/"><img src="http://b.hatena.ne.jp/bc/http://dobon.net/" style="border: none;" alt="DOBON.NETのはてなブックマーク数" title="DOBON.NETのはてなブックマーク数"></a>
|
(X)HTML validにする †
旧ブックマークボタンを使用するのが1つの方法です。
新ブックマークボタンの場合は、「新しいはてなブックマークボタンを(X)HTML validにする方法: 小粋空間」によると、HTML5以外ではvalidではないそうです。解決法は、「data-hatena-bookmark-」属性と「async="async"」属性を削除するということです。
「新はてなブックマークボタンをFC2ブログに設置する : web memo.Ver.2」によると、「async="async"」の代わりに「defer="defer"」が使えるそうです。
この方法ではオプションの指定ができませんので、スタイルの指定や、タイトルの指定ができません。
この方法によるコードの例は、以下のようなものです。ここではブックマークするURLを「http://dobon.net/」としていますが、現在のURLでよければ省略してください。
<a href="http://b.hatena.ne.jp/entry/dobon.net/" class="hatena-bookmark-button" 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 type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="defer"></script>
|
「data-hatena-bookmark-」属性をJavaScriptで付ける例は、以下のようなものです。
<a id="hatena_button" href="http://b.hatena.ne.jp/entry/dobon.net/" class="hatena-bookmark-button" 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 type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="defer"></script>
<script type="text/javascript">
(function(){
var hb = document.getElementById("hatena_button");
hb.setAttribute("data-hatena-bookmark-title","DOBON.NET");
hb.setAttribute("data-hatena-bookmark-layout","vertical-balloon");
hb.setAttribute("data-hatena-bookmark-lang","ja");
})();
</script>
|
コメント †
