はてブ数、ツイート数、いいね数を表示する方法

エントリを書いていると、参考にしたリンクなどを記載しますが、参考リンク自体にどのくらいの価値があるかのスコアを示したいシーンが結構あります。よく見かけるのは、はてブ数を表示するリンクですよね。 今回はChromeのadd onであるCreate Linkを使って「被はてブ数」「被ツイート数」「被いいね！(Like)数」付きリンクを作成する方法を紹介します。

Create Link

Create Link - Chrome ウェブストア

Create LinkはGoogle ChromeのAdd onで、インストール後CreateLinkのボタンを押すと、現在見ているページの情報をクリップボードにコピーしてくれるツールです。 Google Chromeにインストール後、URLバーの脇にボタンが表示されます。

ボタンをクリックして表示される「HTML」をクリックすると、下記内容がクリップボードにコピーされます。

<a href="http://nooopes.blogspot.com/">nooopes blog</a>

コレをそのままブログなんかに貼り付けると、リンクが作成されるわけです。

nooopes blog

便利ですね。 これだけでも使い勝手としては十分ですが、今回はリンクにはてブ数やTwitterのツイート数、Facebookのいいね数を追加する方法を紹介します。

Create Linkの設定

Create Linkの設定は例のCreate Linkのボタンを押して「Configure...」を選択します。 すると別ページで設定画面が開きます。 ここの「Formats」に新たなフォーマットを追加するとCreateLinkメニューで呼び出せるようになります。

はてブ数付きリンクのフォーマット

「Formats」メニューの下の「＋」ボタンを押下すると、新しいラインが生成されるので、左側のカラムにはタイトルとして「HTML＋はてぶ」とでも入力しましょう。ここで入力した文字列がCreate Linkボタンを押した際に表示されることになります。 右側のカラムには以下を入力してください。

<a href="%url%">%htmlEscapedText%</a><a href="http://b.hatena.ne.jp/entry/%url%"><img src="http://b.hatena.ne.jp/entry/image/%url%" style="border: none;"></a>

これで設定完了です。 好きなページでCreate Linkボタンから「HTML＋はてぶ」を選んでみてください。 例えばTwitter.comでボタンを押すと、以下のようなコードがクリップボードにコピーされ、

<a href="https://twitter.com/">Twitter / ホーム</a><a href="http://b.hatena.ne.jp/entry/https://twitter.com/"><img src="http://b.hatena.ne.jp/entry/image/https://twitter.com/" style="border: none;"></a>

以下のようなリンクが作成されます。

Twitter / ホーム 

ちなみに、該当ページのはてブ数が0の場合、はてブ数は表示されません。

いいね数付きリンクのフォーマット

いいね数を追加するには以下のフォーマットをCreate Linkのメニューで作成します。

<a href="%url%">%htmlEscapedText%</a><iframe src="http://www.facebook.com/plugins/like.php?href=%url%&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;"></iframe>

これをTwitter.comで使うと、以下のようなリンクが作成されます。

  Twitter / ホーム 


ちなみに、いいねが付いていないページでリンクを生成すると、いいねボタンのみ表示されます。

ツイート数付きリンクのフォーマット

ツイート数付きリンクを作成するには以下のフォーマットをCreate Linkメニューで追加します。

<a href="%url%">%htmlEscapedText%</a><a href="%url%">%htmlEscapedText%</a><script type="text/javascript" src="http://button.topsy.com/widget/retweet-small?nick=memorva&url=%url%"> </script>

これを使うと次のようなリンクが作成されます。
Twitter / ホーム

 ちなみにツイートされていない記事はtweetボタンのみ表示されます。

まとめ

いかがでしたか？他にもいろいろなスコア方法がありますが、引用のスコアを示すことで信ぴょう性を高めたり、目を引いたり、メリットがあるので是非使ってみてください。