2014年11月8日土曜日

Blogger.com (blogspot) に はてなブックマークボタン を追加する

How to attach the HATENA-Bookmark button on Blogger.com
はてなブックマークから当ブログへの訪問が増えてきたのではてなブックマークボタン(以下はてブボタン)をつけてみました。

はてブボタンのヘルプはこちら
http://b.hatena.ne.jp/help/entry/bbutton

はてブボタンは投稿したブログごとにタイトルとURLを記載する必要があります。
毎回手入力するのは負担だしミスしたら意味がないのでBlogger.comのテンプレート機能を使ってはてブボタンをつけてみました。

テンプレートを使うメリットは?

テンプレートを正しく使うと過去に投稿したブログも含めてすべてのブログに反映されます。
はてブボタンが不要になったらテンプレートから削除すればすべてのブログから消すことが出来ます。
URLやタイトルは変数のように扱えるので投稿するごとに設定する必要がありません。
はてブボタンのHTMLソースが仕様変更されてもテンプレートを変更するだけですべてのブログに反映されます。

設定方法

左の[テンプレート]をクリックして、[HTMLの編集]画面に入ります。

次の通りHTMLの3カ所を変更します。

<data:post.body />
という行が2カ所あるはずなので、その直下または直前に次のHTMLを追記します。


</body>
という行の直前に次のHTMLを追記します。


最後に[テンプレートを保存]ボタンをクリックしておしまいです。

テンプレート変更後は必ずPCとスマートフォンでチェック

テンプレート変更により不具合がないかチェックする必要があります。
Blogger.comはPC用とモバイル端末用とで表示内容が自動で変わります。
PCとスマートフォンでチェックしましょう。
※PCでもURLの最後に ?m=1 と付ければモバイル用の表示に変わるようです。
今のところこの方法ではモバイル用ページに はてブボタン は表示されないようです。

結果

特にページビューは増えてません。


関連ブログ

[インターネット] ブログのURLを自分のドメイン名に変更する
[インターネット] Googleストリートビューにプライバシー情報が公開されてしまったら
[セキュリティ] bitly.com にスパムサイトと誤認されたら
[セキュリティ] Twitterに「スパム、または安全でない」と誤認されたら

以上、参考になれば幸いです。

2 件のコメント:

  1. 素晴らしい記事、教えてくれてありがとう!戻って私のブログに来てすることを忘れないでください。インドネシアブロガーの挨拶:)

    返信削除
    返信
    1. これは素晴らしいです、おめでとう成功挨拶を継続しました

      削除