はてなブックマークボタンで日本語のラベルが選べるようになり、SSL接続のページにも対応しました

はてなブックマークボタンは、はてなブックマークが提供するソーシャルボタンです。このボタンを利用すると、ユーザーはあなたのサイトを離れることなく、簡単にページをブックマークできます。

本日は、多くのサイトでご利用いただいている、はてなブックマークボタンの改善をおこないましたのでお知らせいたします。

日本語のラベルも選べるようになりました

はてなブックマークボタンのガイドページで、これまで提供してきた英語のラベルに加えて、他のソーシャルボタンと並べたときに違和感の少ない、日本語のラベルが選べるようになりました。

http://b.hatena.ne.jp/guide/bbutton

設置オプションが多様になりました

これまでは、ラベル付きのはてなブックマークボタンについてはブックマーク数の表示があるものしか選べませんでしたが、他のソーシャルボタンのように「ラベル付きでかつブックマーク数の表示なし」のタイプも選べるようになりました。

SSL接続が有効なページでの設置に正式に対応しました

はてなブックマークボタンは、本日からSSL接続が有効なページ (URLが https:// から始まるページ) での設置に正式に対応しました。これにともない、これから新たにはてなブックマークボタンのガイドページのコードを利用して設置されるはてなブックマークボタンについては、SSL接続が有効なページであっても、ブラウザのセキュリティ警告メッセージが表示されなくなりました。

より多くのシーンでご利用いただきやすくなったはてなブックマークボタンを、どうぞご利用下さい。

参考：すでに設置されているブックマークボタンで利用する手順

すでに設置済みのはてなブックマークボタンは、いままでと変わらずご利用いただけます。上記の改善をはてなブックマークから自動的に反映するということはいたしません。

もし、すでにはてなブックマークボタンを設置済みのサイトで上記の改善をご利用いただきたい場合は、はてなブックマークボタンのガイドページから新たに設置コードを取得していただくか、設置済みのコードに対して以下の変更をおこなって下さい。

なお、SSL接続が有効でないページにおいて「SSL接続が有効なページで利用する場合」のコードをご利用いただいても問題なく、また、セキュリティ上、こちらのコードの利用を推奨いたします。

日本語のラベルを利用する場合

設置済みのコードのa要素に data-hatena-bookmark-lang="ja" という属性を追加して下さい。

<a href="http://b.hatena.ne.jp/entry/(設置ページのURL)"
    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>

ラベル付きでかつブックマーク数の表示なしのタイプを利用する場合

設置済みのコードのa要素の data-hatena-bookmark-layout 属性を、standard-noballoon に変更して下さい。

<a href="http://b.hatena.ne.jp/entry/(設置ページのURL)"
    class="hatena-bookmark-button"
    data-hatena-bookmark-title="(設置ページのタイトル)"
    data-hatena-bookmark-layout="standard-noballoon"
    title="このエントリーをはてなブックマークに追加">
  <img src="http://b.hatena.ne.jp/images/entry-button/button-only.gif"
      alt="このエントリーをはてなブックマークに追加"
      width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript"
    src="http://b.st-hatena.ne.com/js/bookmark_button.js"
    charset="utf-8"
    async="async">
</script>

SSL接続が有効なページで利用する場合

設置済みのコードのimg要素とscript要素のsrc属性を、それぞれ以下のように変更して下さい。

<a href="http://b.hatena.ne.jp/entry/(設置ページのURL)"
    class="hatena-bookmark-button"
    data-hatena-bookmark-title="(設置ページのタイトル)"
    data-hatena-bookmark-layout="standard-balloon"
    title="このエントリーをはてなブックマークに追加">
  <img src="https://b.st-hatena.com/images/entry-button/button-only.gif"
      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>

はてなブックマーク開発ブログ

機能変更、お知らせなど