2008年5月14日水曜日

Bloggerでソーシャルブックマーク登録ボタンを利用

Bloggerのロゴソーシャルブックマークサービスにブログの記事を登録してもらう際に使えるボタンを、Bloggerで利用してみようと考え、挑戦してみました。今回は、「はてなブックマーク」(はてブ)や「ニフティクリップ」といった著名なソーシャルブックマークサイトの登録ボタンが1つにまとめられている「Addcrips」の無料ツールを使います。ソーシャルブックマーク登録ボタンだけでなく、RSSリーダーへの追加ボタンも付いている優れものです。


Bloggerのテンプレートを編集することになるので、ご注意ください。テンプレートを編集する前に、保存しておくことをお勧めします。

ステップとしては2つあり、Addcripsのサイトでボタンのソースコードを取得するのが1つ目、そのコードをBloggerのテンプレートに挿入する作業が2つ目です。

(1)Addcripsのサイトにアクセスして説明を読んでから、「addclipsボタンをつくる」ボタンをクリックします

・Addcrips
http://www.addclips.org/

(2)「ボタンの種類」を選んだあと、「サイトの種類」で「ブログ」を選択し、表示された「使用しているブログ」で「Blogger」を選びます。

(3)「ボタンの動きとカラー」と「統計情報の使用」でも好みの項目を選んでから、「addclipsボタンをつるく」ボタンをクリックします。

(4)Blogger専用のソースコードが作成されるので、このソースコードをコピーし、windowsのメモ帳などに貼り付けておいてください。Bloggerのテンプレートに挿入する位置についても、注意書きがありますので読んでおきます。

(5)Bloggerにログインし、管理画面でレイアウト -> HTMLの編集と進みます。テンプレートを編集するので、事前にテンプレートのコピーを保存しておくことをお勧めします。

(6)「ウィジットのテンプレートを展開」チェックボックスにチェックを入れた上で、addcripsのソースコードを作成した際の注意書きに従い、HTMLコードの中から挿入位置を探します。

(7)注意書きに示されているのは、ボタンのソースコードを挿入できる範囲です。挿入する位置により、ボタンが表示される位置が変わります。このブログでは、記事タイトルの下に表示していますが、挿入位置は<div class='post-header-line-1'/>タグの直前です。

(8)ソースコードを挿入したら、「テンプレートを保存」ボタンをクリックし、完了です。