はてなブックマークボタンを設置

オンライン上にブックマークを残すサービス「はてなブックマーク」のブックマークボタンを設置しました（「B!」ってやつ）

ボタンを押すと、以下のポップアップが表示されて、ブログ記事のURLを簡単にブックマークできます。

ブックマークボタンの設置手順を以下にご紹介します。（Bloggerの設置サンプルもあります）

HTMLソースの生成

1. 「使いやすくなりました！はてなブックマークボタン」へアクセスします。
2. URL、タイトルを入力します。ここはダミーで適当に入力しておきます。
3. ボタンのタイプを選択します。カウンタ付きを導入している人が多い気がします。
4. 生成されたコードをコピーします。
5. ダミーとしておいたURLやタイトルを本物に入れ替えながらサイトに挿入します。（Bloggerの場合は以下を参照）

Bloggerへの設置

生成したソースコードをBloggerへ導入した例をご紹介します。
（以下、「HTML編集」＋「ウィジェットテンプレートを展開」で行います）

ツイートボタン用のJavaScriptファイルロードを</head>タグ直前あたりに埋め込みます

<script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>

<div class='post-header-line-1'>の下あたりに以下を埋め込みます

<a class='hatena-bookmark-button' data-hatena-bookmark-layout='simple' expr:data-hatena-bookmark-title='data:post.title' expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a>

ソース生成時にカウンタも含めた場合は、「〜〜layout='simple'」のsimpleが「standard」や「vertical」になりますが、その他は変わりませんので、この例をそのまま流用できると思います。

はてなブックマーク連携を検討している方は、ぜひ参考にしてみてください。

関連記事

• Evernoteにブログ記事をクリップするボタンを設置
• Twitterのツイートボタンを設置
• Facebook いいねボタンを設置