Blogger に はてなブックマーク の "B!" ボタン を 設置 する 方法

0 件のコメント

Blogger に はてなブックマーク の "B!" ボタン を 設置、追加する方法を記載します。 各ページ (投稿) に対する ボタン です。 ここに載せる コード は ブログ テンプレート に対してコピペ で使えるようにしてあります。 表示したい位置へ コピー & ペースト して利用してください。 作業手順手としては次の通りです。

※その他の ソーシャルボタン もまとめて追加する方法は こちら

※ソースコード は ダブルクリック すると、全選択できます。

はてなブックマーク B! ボタン の 設置手順

  1. マイブログ から [テンプレート] → [HTML の編集] を選択します。
  2. 以下から好きな表示形式を選んで、テンプレート の任意の表示したい場所へ ソースコード を コピー & ペースト します。
    テンプレート編集 をしている 以下の画像の場合、投稿記事タイトル の直後に配置するようにしています。

    シンプル表示

    このエントリーをはてなブックマークに追加
    <a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' class='hatena-bookmark-button' data-hatena-bookmark-layout='simple' data-hatena-bookmark-lang='ja' expr:data-hatena-bookmark-title='data:post.title' title='このエントリーをはてなブックマークに追加'><img src='http://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='http://b.st-hatena.com/js/bookmark_button.js' charset='utf-8' async='async'></script>
    

    シンプル カウント 表示

    このエントリーをはてなブックマークに追加
    <a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' class='hatena-bookmark-button' data-hatena-bookmark-layout='simple-balloon' data-hatena-bookmark-lang='ja' expr:data-hatena-bookmark-title='data:post.title' title='このエントリーをはてなブックマークに追加'><img src='http://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='http://b.st-hatena.com/js/bookmark_button.js' charset='utf-8' async='async'></script>
    

    標準 カウント 表示

    このエントリーをはてなブックマークに追加
    <a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' class='hatena-bookmark-button' data-hatena-bookmark-layout='standard-balloon' data-hatena-bookmark-lang='ja' expr:data-hatena-bookmark-title='data:post.title' title='このエントリーをはてなブックマークに追加'><img src='http://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='http://b.st-hatena.com/js/bookmark_button.js' charset='utf-8' async='async'></script>
    

    縦 カウント 表示

    このエントリーをはてなブックマークに追加
    <a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' class='hatena-bookmark-button' data-hatena-bookmark-layout='vertical-balloon' data-hatena-bookmark-lang='ja' expr:data-hatena-bookmark-title='data:post.title' title='このエントリーをはてなブックマークに追加'><img src='http://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='http://b.st-hatena.com/js/bookmark_button.js' charset='utf-8' async='async'></script>
    

今回、以下のサイトを参考にしました。