Blogger記事に「はてなブックマーク」ボタンを設置する方法

Bloggerカスタマイズが楽しくなってきたArdor(@ArdorOnline)です。
今回は、はてなブックマークボタンを各記事に設置する方法をご紹介します。
Bloggerにも簡単に設置できるだろうと考えていたのですが、
ちょっとカスタマイズする必要がありました。
難しくないので設置したい方は、参考にしてみてください。

はてなブックマークボタンを設置する手順は、次の通りです。

1. はてなブックマークボタン作成ページへ行く
2. ボタンを配置するページの情報を入力
3. ボタンタイプを選択
4. プレビューを確認。コードをコピーする
5. Blogger用にカスタマイズ
6. Bloggerテンプレートに貼り付けて完了

はてなブックマークボタン作成ページへ行く

はてなブックマークボタンの作成には、公式ページへ行くのが一番良いです。

• はてなブックマークボタンの作成・設置について

公式ページでコードを取得するのが目的です。

ボタンを配置するページの情報を入力

設置したいブログのURLとタイトルを入力します。

ここで入力した値は、カスタマイズしてしまうので何でもOKです。
後々の編集を楽にしたい方は、以下の値を入力しましょう。
URL：data:post.canonicalUrl
タイトル：data:post.title

ボタンタイプを選択

ボタンタイプは、好みのものを選択してください。
私は、「バーティカル」を選択しました。

プレビューを確認。コードをコピーする

選択できたら、作成されたコードをコピーしてください。

Blogger用にカスタマイズ

作成されたコードを整理すると、次のようになっています。
赤字で表示されている部分は、これからBlogger用にカスタマイズします。

■取得したコード

<a
 href="http://b.hatena.ne.jp/entry/http://blog.asterlist.com/"
 class="hatena-bookmark-button"
 data-hatena-bookmark-title="Asterlist"
 data-hatena-bookmark-layout="vertical-balloon"
 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>

Blogger用にカスタマイズする箇所は、2箇所です。
カスタマイズは、次の通りです。

■URLをBlogger用にカスタマイズ

変更前：

 href="http://b.hatena.ne.jp/entry/http://blog.asterlist.com/"

変更後：

 expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl'

■登録するタイトルをBlogger用にカスタマイズ

変更前：

 data-hatena-bookmark-title="Asterlist"

変更後：

 expr:data-hatena-bookmark-title='data:post.title'

■Blogger用コード

Blogger用コードは、次のようになります。

<a
 expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl'
 class="hatena-bookmark-button"
 expr:data-hatena-bookmark-title='data:post.title'
 data-hatena-bookmark-layout="vertical-balloon"
 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>

Bloggerテンプレートに貼り付けて完了

Blogger用コードまで作成できたら、あとはコードを貼り付けるだけです。
任意の位置にコードを貼り付けて、はてなブックマークボタンを設置してください。

このブログでは、「data:post.body」の直下に記述して設置してあります。

貼り付け方は、
「テンプレート」→「HTMLの編集」
→「ウィジェットのテンプレートを展開」にチェックを入れて表示する。

設置したい箇所にコードを貼り付ける。
※バックアップを必ずとってから実施してください。

よくわからなかった方へ

説明がうまくできていなくてすみません。
コピーして貼り付ければOKのBloggerコードを用意しました。
ご自由にコピーして持っていってください。

<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl' class="hatena-bookmark-button" expr:data-hatena-bookmark-title='data:post.title' data-hatena-bookmark-layout="vertical-balloon" 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>

はてなブックマーク形状

はてなブックマークの形状をまとめておきます。
形状は、「data-hatena-bookmark-layout="XXX"」の
XXX指定で変更できます。
今後、公式サイトで変更されるかもしれません。

指定値	形状
simple
simple-balloon
standard-balloon
vertical-balloon
standard
vertical

最後に

いかがでしたでしょうか？
はてなブックマークボタンを設置できましたか？
設置できた方は、是非ブックマークしてください！

この記事で設置できれば幸いです。
最後まで読んで頂きありがとうございます。

• 
• ツイート

RSSリーダーで購読する

公式アカウントで更新情報をチェック！

@asterlistさんをフォロー

筆者のつぶやきはこちら

@ArdorOnlineさんをフォロー