• 追加された行はこの色です。
  • 削除された行はこの色です。
#title(はてなブックマークボタンを表示する)

#contents

-[[「様々なシェア、ブックマークボタン（Google+1、twitter、facebook、はてななど）を表示する」に戻る>../]]

*はてなブックマークボタンを表示する [#e1bfa834]

#ref(../hatena1.png)
#ref(../hatena4.png)

**基本的なコード [#v2323131]

はてなブックマークボタンは、「[[使いやすくなりました! はてなブックマークボタン>http://b.hatena.ne.jp/guide/bbutton]]」でコードを取得できます。
はてなブックマークボタンは、「[[はてなブックマークボタンの作成・設置について - はてなブックマーク>http://b.hatena.ne.jp/guide/bbutton]]」でコードを取得できます。

基本的なコード（スタンダードボタン）は、以下のようになります。
基本的なコード（小さなボタン）は、以下のようになります。

#prescroll(wrap=true){{
<a href="http://b.hatena.ne.jp/entry/" 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><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<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>
}}

URLを「http://dobon.net/」、タイトルを「DOBON.NET」タイプをバーティカル（大きめのサイズ）にした時のコードは、以下のようになります。なおURLに「#」が含まれる場合は、エンコードして「%23」にする必要があるようです。
大きなボタン（「B!」の右に「ブックマーク」）で、URLを「http://dobon.net/」、タイトルを「DOBON.NET」、ブックマーク数を上（バーティカル）に表示、表示言語を日本語にした時のコードは、以下のようになります。

#prescroll(wrap=true){{
<a href="http://b.hatena.ne.jp/entry/http://dobon.net/" class="hatena-bookmark-button" data-hatena-bookmark-title="DOBON.NET" data-hatena-bookmark-layout="vertical" 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>
<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>
}}

はてなブックマークボタンは、JavaScriptを無効にしているとボタンのみが表示され、ブックマーク数は表示されません。下で紹介している旧ボタンならば、JavaScriptが無効の時でも表示できます。
URLを「https://dobon.net/」にすると、以下のようになります。

**行動情報を取得しないはてなブックマークボタン [#j64c7170]

上記のはてなブックマークボタンは、マイクロアドがユーザーに合った広告を表示するためにユーザーの行動情報を取得しているそうです。詳しくは、「[[はてなブックマークボタンを表示する>http://b.hatena.ne.jp/help/bbutton#audience-data]]」にあります。

ユーザーの行動情報を取得しないボタンのコードは、「[[はてなブックマークボタンの作成・設置について>http://b.hatena.ne.jp/guide/bbutton?al=0#bbutton-generator]]」で取得できます。

行動情報を取得しないボタンの基本的なコードは、以下のようなものです。

#prescroll(wrap=true){{
<a href="http://b.hatena.ne.jp/entry/" 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><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button_wo_al.js" charset="utf-8" async="async"></script>
<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>
}}

普通のコードとの違いは、JavaScriptのsrcが「http://b.st-hatena.com/js/bookmark_button.js」ではなく、「http://b.st-hatena.com/js/bookmark_button_wo_al.js」になっていることです。それ以外の違いはないようです。
**行動情報を取得しないはてなブックマークボタン [#j64c7170]

それにしても、この行動情報の取得は2011年9月1日から始まったようですが、突然このようなことを行うというのは問題があるような気がします。はてなへのユーザーの信頼が低下してしまうのではないかと心配です。なお情報を取得されたくないユーザーは、「http://send.microad.jp/w3c/」で無効化にすることもできるようです。
以前のはてなブックマークボタンは、マイクロアドがユーザーに合った広告を表示するためにユーザーの行動情報を取得していました。しかし現在ではこの機能は停止されたということです。詳しくは、「[[はてなブックマークボタンを表示する>http://b.hatena.ne.jp/help/bbutton#audience-data]]」や「[[はてなブックマークボタンが取得した行動情報の第三者への送信を停止しました>http://hatena.g.hatena.ne.jp/hatenabookmark/20120313/1331629463]]」にあります。

**旧はてなブックマークボタンを表示する [#j5ee0032]

#ref(../hatena2.png)

旧はてなブックマークボタン（「このエントリーをはてなブックマークに追加」アイコンと「このエントリーを含むはてなブックマーク」アイコン）の設置方法は、「[[自分のブログに「↑B」「B!」アイコンを表示する>http://b.hatena.ne.jp/help/button]]」で説明されています。

また、被ブックマーク数を表示する方法は、「[[被ブックマーク数を表示する>http://b.hatena.ne.jp/help/count]]」で説明されています。

これらの方法ならば、JavaScriptを使用しなくても表示できます。

例えば「http://dobon.net/」のブックマークボタンと被ブックマーク数を表示するには、次のようなコードを書きます。

#prescroll(wrap=true){{
<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で表示する [#bd5debaa]

旧ブックマークボタンではページのURLを埋め込まなければなりませんが、それができない時のために、JavaScriptで現在のページのブックマークボタンを表示する例を示します。

#prescroll(wrap=true){{
<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>
}}

**はてなブックマークカウンター [#t49a7b98]

#ref(../hatena3.png)

はてなブックマークカウンターは、サイト全体の被ブックマーク数をカウンタ表示します。設置方法は、「[[はてなブックマークカウンター>http://b.hatena.ne.jp/help/bcounter]]」に説明があります。

例えば、「http://dobon.net/」のサイト全体の被ブックマーク数を表示するには次のようなコードを書きます。

#prescroll(wrap=true){{
<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にする [#f87f472b]

旧ブックマークボタンを使用するのが1つの方法です。

新ブックマークボタンの場合は、「[[新しいはてなブックマークボタンを(X)HTML validにする方法: 小粋空間>http://www.koikikukan.com/archives/2010/11/26-015555.php]]」によると、HTML5以外ではvalidではないそうです。解決法は、「data-hatena-bookmark-」属性と「async="async"」属性を削除するということです。

「[[新はてなブックマークボタンをFC2ブログに設置する : web memo.Ver.2>http://128bit.blog41.fc2.com/blog-entry-251.html]]」によると、「async="async"」の代わりに「defer="defer"」が使えるそうです。

この方法ではオプションの指定ができませんので、スタイルの指定や、タイトルの指定ができません。

この方法によるコードの例は、以下のようなものです。ここではブックマークするURLを「http://dobon.net/」としていますが、現在のURLでよければ省略してください。

#prescroll(wrap=true){{
<a href="http://b.hatena.ne.jp/entry/http://dobon.net/" class="hatena-bookmark-button" 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_wo_al.js" charset="utf-8" defer="defer"></script>
<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で付ける例は、以下のようなものです。

#prescroll(wrap=true){{
<a id="hatena_button" href="http://b.hatena.ne.jp/entry/http://dobon.net/" class="hatena-bookmark-button" 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_wo_al.js" charset="utf-8" defer="defer"></script>
<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");
hb.setAttribute("data-hatena-bookmark-layout","vertical-balloon");
hb.setAttribute("data-hatena-bookmark-lang","ja");
})();
</script>
}}

**コメント [#bc085a91]

#comment

//これより下は編集しないでください
#pageinfo([[:Category/インターネット]],2011-08-31 (水) 03:53:34,DOBON!,2011-09-05 (月) 01:27:55,DOBON!)
#pageinfo([[:Category/インターネット]],2011-08-31 (水) 03:53:34,DOBON!,2017-01-27 (金) 01:59:18,DOBON!)
▲ ▼
[ トップ ]   [ 新規 | 子ページ作成 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]