リンク紹介する時にツイート数も一緒に表示する方法

記事のリンクを貼る時には、ShareHtmlを利用しています。はてなブックマーク数も表示されていますが、一緒にツイート数も表示したいと思いました。そこで利用したサービスが、「TweetBuzz」です。

参考にさせていただいた記事は、以下の記事です。
「ツイートする」ボタンと「Tweet数」表示サービスまとめ+(FC2)ブログへの設置方法 : Web Memo.SE

スポンサーリンク

TweetBuzzによるツイート数の取得方法

具体的にどのように出来るのかを示します。

記事のリンクを貼る時には、普通のサラリーマンのiPhone日記を運営されている@hiro45jpさん作成のShareHtmlを利用させてもらっています。いつも便利に利用させていただいています。ありがとうございます。

さて、このShareHtmlで作成したリンクは以下のようになります。

Twitterの検索演算子(パラメータ)一覧

これにツイート数のアイコンをつけたものが以下になります。
Twitterの検索演算子(パラメータ)一覧

以下のリンクをくっつけると、Twitterのアイコン部分になります。

<a href="http://tweetbuzz.jp/redirect?url=[記事のURL]"><img src="http://tools.tweetbuzz.jp/imgcount?url=[記事のURL]" style="border: none;" /></a>

具体的には、

<a href="http://tweetbuzz.jp/redirect?url=https://hibikanblog.net/blog-entry-621.html"><img src="http://tools.tweetbuzz.jp/imgcount?url=https://hibikanblog.net/blog-entry-621.html" style="border: none;" /></a>

とすることで、が表示されるようになります。

当ブログのPCビューでは、サイドバーに先月の人気記事を紹介しています。今までは記事名+はてなブックマーク数でしたが、これにツイート数を加えてみました。今あるリンクに、個別にhtmlタグを追加しました。
Skitched 20130901 213513
▲こんな感じ。

ShareHtmlでもTweet数を表示できるようにしてみました。ブックマークレット生成前のカスタム書式は以下のようにしました。記事のURLの予約語を${posturl}にすれば出来るはずです。

<a style="color:#0070C5;" href="${posturl}" target="_blank">${posttitle}</a><a href="http://b.hatena.ne.jp/entry/${posturl}" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/${posturl}" alt="" /></a>${postselect}${memo}<a href="http://tweetbuzz.jp/redirect?url=${posturl}"><img src="http://tools.tweetbuzz.jp/imgcount?url=${posturl}" style="border: none;" /></a>

以上のShareHtmlで生成できたリンクが以下になります。

Twitterの検索演算子(パラメータ)一覧

見栄えを加えたい時にはTweet数を表示してみてもいいかもしれません。

ブログ運営
スポンサーリンク
日々の観察ブログ

コメント