Bloggerの記事フッター部に「はてなブックマークボタン」を設置

今回は、『Bloggerの記事フッター部に「はてなブックマークボタン」を設置』方法についてご紹介します。

Bloggerの記事フッター部にはデフォルト（標準）では、「Google＋」、「ツイッター」、「Facebook」の3つのソーシャルブックマークボタンがついています。

ただ残念ながら「はてなブックマークボタン」はついておりません。
はてなブックマークは使用している方も多いため、役に立つ記事があればブックーマークしてくれる可能性が上がります。

ですが、せっかくの機会でもはてなブックマークボタンがなければブックマークしてもらえません。

そこで訪問者の方にブックマークしてもらえるよう記事フッター部にはてなブックマークボタンを設置する方法を手順を踏んでご説明します。

１．テンプレート編集

Bloggerにログイン後、[テンプレート]　→　[HTMLの編集]　→　[続行]　→　[ウィジェットのテンプレートを展開]にチェックし、HTMLの編集画面に進みます。

※ソースを変更する場合何らかのミスでテンプレートが崩れる場合があります。作業前にHTMLソースをTerapadやメモ帳にコピーしてバックアップしておきましょう。

ソースの中から記事ブッター部である<div class='post-footer'> を見つけます。

さらに下に移動して、コメント件数表示部分post-comment-linkを目印として見つけ出し、下記画像の位置に対象ソースを埋め込みます。




［対象ソース］
<span class='hatena-bookmark'>
  <a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard-balloon' 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><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
</span>

埋め込んだら[テンプレートを保存]します。

はてなブックマークボタンの詳細については下記リンクもご参考にして下さい。

参考リンク　⇒　はてなブックマークボタンの作成・設置について
以上で作業終了です。

最後にBloggerブログに戻りはてなブックマークボタンが反映されているか確認しましょう。

下記画面のようになっていればOKです！




今回は結構簡単ですよね。
是非活用して下さいね(^-^)

スポンサードリンク