Blogger に はてなブックマーク の "B!" ボタン を 設置、追加する方法を記載します。 各ページ (投稿) に対する ボタン です。 ここに載せる コード は ブログ テンプレート に対してコピペ で使えるようにしてあります。 表示したい位置へ コピー & ペースト して利用してください。 作業手順手としては次の通りです。
※その他の ソーシャルボタン もまとめて追加する方法は こちら。
※ソースコード は ダブルクリック すると、全選択できます。
はてなブックマーク B! ボタン の 設置手順
- マイブログ から [テンプレート] → [HTML の編集] を選択します。
- 以下から好きな表示形式を選んで、テンプレート の任意の表示したい場所へ ソースコード を コピー & ペースト します。
テンプレート編集 をしている 以下の画像の場合、投稿記事タイトル の直後に配置するようにしています。
シンプル表示
12<
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
>
シンプル カウント 表示
12<
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
>
標準 カウント 表示
12<
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
>
縦 カウント 表示
12<
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 の フォロー」 お願いします!!