Blogger に はてなブックマーク の "B!" ボタン を 設置、追加する方法を記載します。 各ページ （投稿） に対する ボタン です。 ここに載せる コード は ブログ テンプレート に対してコピペ で使えるようにしてあります。 表示したい位置へ コピー & ペースト して利用してください。 作業手順手としては次の通りです。
※その他の ソーシャルボタン もまとめて追加する方法は こちら。
※ソースコード は ダブルクリック すると、全選択できます。
はてなブックマーク B! ボタン の 設置手順
- マイブログ から [テンプレート] → [HTML の編集] を選択します。
- 以下から好きな表示形式を選んで、テンプレート の任意の表示したい場所へ ソースコード を コピー & ペースト します。
テンプレート編集 をしている 以下の画像の場合、投稿記事タイトル の直後に配置するようにしています。
シンプル表示
<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>
今回、以下のサイトを参考にしました。
- はてなブックマーク - はてなブックマークボタンの作成・設置について
- はてなブックマークボタンの作成・設置について
- はてなブックマーク ヘルプ - 自分のブログに「↑B」「B!」アイコンを表示する
- Blogger記事に「はてなブックマーク」ボタンを設置する方法
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！