Bloggerに「Topsy」と「はてブ」ボタンを設置する方法

あちこちのブログで、[B!]とか[3user]とか、[8Tweet]とかボタンが設置されているのが、前々から気になってはいたのです。何か面白そうだしカッコイイな〜ってww

ところが、このブログはBloggerというサービスを使っているわけですが、天下のGoogle様が運営しているはずなのに、何でかヘルプが英語だったり、不思議なこと満載なサービスでして、どうも良く分からないことが多い。つまり初心者には意外に敷居の高いサービスです。何でコレ最初に選択したかな私は･･･orz

しかし、何とか付けてみたい！という一念で色々調べて、ポチポチとコードを書いてみたら無事できちゃったので、備忘録兼、同じBloggerユーザーのお役に立てればということで設置方法を書きます。 

※テンプレートのバックアップは念のため取っておきましょう！

■「はてなBookmark」の設置方法

はてなのサイトにも設定方法は書いてあるんですが、どうやら情報が古いようです。ということで、下記の方法で記述したら上手く行きました。

まず、ブラウザでBloggerダッシュボードにアクセスして、[設定]→[レイアウトタブ]→[HTMLの編集]を選択。さらに重要ポイントとして、[ウィジットのテンプレートを展開]にチェックを入れます。
次に展開された文字列の中から、↓下記の文字列を探します！

そして、このすぐ後ろに下記の文字列を入力します。

以上で、[B!]マークと、[○user]というのが無事表示できるはずです。
[テンプレートを保存]ボタンを押す前に、[プレビュー]で確認しておきましょう。何か問題が有れば、エラーメッセージが表示されます。保存前だったら、[編集内容をクリア]で編集したことをなかったことにできますので、必ず[プレビュー]はしましょう。

■Topsyボタンの設置方法

Topsyのボタンは2種類あって、ちっちゃい[small]と大きい[big]があります。配色も色々あるみたいですので、その辺は研究してみてください。僕には良く分かりませんでした(^^;)
 
ココでもキーになる文字列は

コイツです。
で、はてブの時と同様、このすぐ後ろに、
○大きいボタンなら、

○小さいボタンなら、 

Twitter-Usernemeの部分は、ご自分のものに書き直して下さいね！
いや〜ホントに一苦労でしたが、まぁ何とか設置できました。こういうのって、どういう勉強したらすんなりできるようになるんでしょうね？プログラマーさんとかSEさんとか、ホント尊敬します！