はてなブックマークボタン

コードの取得方法

はてなブックマークボタンの設置に必要なコードは、はてなブックマークボタンの作成・設置についてで取得できます。

コードの解説

<a href="http://b.hatena.ne.jp/entry/ページのアドレス"
  class="hatena-bookmark-button"
  data-hatena-bookmark-title="ページのタイトル"
  data-hatena-bookmark-layout="standard-balloon" <!-- 表示形式 -->
  data-hatena-bookmark-lang="ja"                 <!-- 表示言語 -->
  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>

ページのアドレスは、プロトコルを除いたURLで指定します。またクエリではないため、指定時にエンコードはしません。

class-hatena-bookmark- <img>※1 表示イメージ
layout lang
standard-balloon ja button-only.gif このエントリーをはてなブックマークに追加
standard-noballoon ja button-only.gif このエントリーをはてなブックマークに追加
vertical-balloon ja button-only.gif このエントリーをはてなブックマークに追加
simple-balloon ja button-only.gif このエントリーをはてなブックマークに追加
simple ja button-only.gif このエントリーをはてなブックマークに追加
standard-noballoon なし button-only.gif このエントリーをはてなブックマークに追加
なし なし button-only.gif このエントリーをはてなブックマークに追加
なし なし なし

※1 layout="simple"またはスクリプトが無効のとき以外、指定のimg要素は使用されません。

ブックマークのアイコン
ファイル名 画像
button-only.gif
button-only@2x.png

「行動情報の取得」問題

はてなブックマークボタンを設置したページを閲覧したユーザーの情報が、第三者であるマイクロアドに送信されていたことがあります。この問題は情報を第三者へ渡していたことではなく、そのような仕様変更が利用者に通知なく行われていたことにあります。