bloggerに「はてなスター」と「はてなブックマーク」を埋めてみました

他のブログをみて、いいなぁと思ったのでこのブログにも入れてみました。

個人のブログにはてなのサービスを仕込む事によるメリット

• アクセスカウンタの一種として、被ブックマーク数やスターの数により、記事がどれくらい注目されている/露出しているかの判断材料となる(ブログオーナー視点)
• はてなのユーザにとって、はてなブックマークへの追加が楽になる
• はてなブックマークに飛ぶ事によって、関連情報が集約されるので探しやすい
• 記事を読む前に被ブックマーク数やはてなスターの数を見る事により、記事の質が事前にわかる(検索エンジン経由で来た人にとっては重要かもね)
  
• なんとなくカコイイ
• ブログオーナーのモチベーションアップ?
• んー、昔流行ったトップページにアクセスカウンタを仕込んで、アクセス数を見せて|見ているのと、基本的には意味が同じなのかな。

個人のブログにはてなのサービスを仕込む事によるデメリット

• 既に設置されている「何か」とJavaScriptのコードが衝突するかもね(自分でいじってなければ大丈夫だとは思うけど)
• 表示がちょっと遅くなるよね。すべてのコンテンツを表示「しきる」のが遅くなるって意味だけど。
• いろいろごちゃごちゃ付いていて見づらいと思う人は居るはず。(ブログ側の配置センスにもよる)。
• いろいろごちゃごちゃ付いていて怖い(下手に触ると壊れるとか)思う人も少なからず居るはず。
• 要はホントのPC初心者には優しくないと思う。はてなサービスに対応して嬉しいのは中・上級者(特にIT系エンジニア)であって、初心者には逆効果だよね。(普及率がずば抜ければ状況も変わるんだろうけど)
• あと、オーナーが書きたい事以外のコンテンツを増やす事って、いいことなのかな?という疑問もあるなぁ。広告があちこちにあるようなサイトはイメージ悪いよね。

コーポレートサイトにはてなのサービスを仕込む事によるメリット

• 上記と同じ
• 比較的先進的+社会貢献性の高い企業であるはてなのサービスを使う事によるイメージアップ
• はてな信者が多いITエンジニア層へのアピール(イメージアップ)
• いろいろなものが着いていて、ちょっとコンテンツが知的に見える?

あーまー、適当に書く分にはこんなもんかな。

設置作業

bloggerにはてなスターやはてなブックマークを仕込むだけなら、実はすごく簡単。はてなの公式コンテンツにチュートリアルがあるから。(blogger側の進化によりちょっと内容が変わってきているので、新Blogger対応版タグを下記にまとめました)

そうだなぁ、自分はプログラマだから余裕だけど、JavaScriptがわからなくても、はてな側で生成されたコードをぺたっと張って、あとはちょちょいと表示するタグを埋めるだけだから、HTML+CSSをちょっとかじっていれば可能だと思う。たぶん、デザイナーでもできるレベル。

上記メリットを享受できるようなサイトであれば、仕事で使うのもありかなぁと思った。

参考

はてなスターをブログに設置するには※新Blogger対応コード

はてなブックマークカウンターを自分のサイトに貼り付ける 　※ウェブサイト全体の被ブックマーク数を表示

自分のブログに被ブックマーク数を表示する 　※特定エントリーの被ブックマーク数を表示

あなたのブログに「このエントリーを含むはてなブックマーク」ボタンを表示させる

※上記は「高機能版」「低機能版」という関係ではなく、使い分けの関係にある

注意

上記リンクにあるチュートリアルは、旧Blogger向けに書かれたものなので、新Blogger(現デフォルト)では正しく動作しません。以下の通りに試してみてください。

ウェブサイト全体の被ブックマーク数

1. はてなブックマークカウンターを自分のサイトに貼り付けるを読んで、設置する(ブログによって変わる部分は無いです)

特定エントリーの被ブックマーク数

1. 特定エントリーの被ブックマーク数を表示したいところに以下のコードを埋める。

<a expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url'>

<img expr:src='&quot;http://b.hatena.ne.jp/entry/image/&quot; + data:post.url' />

</a>

このエントリーを含むはてなブックマークボタン

1. このリンク先を自分のPCに保存
2. Bloggerに保存した画像をアップロードするため、仮の投稿を作って画像をアップロードし、公開する
3. 公開された記事の画像から、そのURLを得る(管理画面から得た画像のURLとはパスが違うので注意。管理画面からのURLではうまく表示されません)
4. 必要ないなら、仮の投稿を削除または下書きに戻す。(公開しないようにする)
5. 「このエントリーを含むはてなブックマークボタン」を表示したいところに、以下のコードを埋める。自分的には</h3>直前で良いかと。

<a expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url'>

<img alt='このエントリーを含むはてなブックマーク' height='12' src='上記3で取得した画像のURLをここに書く' style='border: none;' title='このエントリーを含むはてなブックマーク' width='16'/>

</a>

※要は、「expr:なにがし」とすると、Bloggerが勝手に内容(data:post.urlなど)を展開してくれるみたい。JavaScriptのコードとして評価してるのかな?(未確認)※あと、ちゃんとスラッシュを使ってタグを閉じてなかったら怒られる