1. ホーム
  2. Blog
  3. はてブ数・Twitter ツイート数・Facebook いいね数のカウンタをMTで表示する

はてブ数・Twitter ツイート数・Facebook いいね数のカウンタをMTで表示する

川崎 有亮

川崎 有亮

技術

social-button.png川崎です。MT (MovableType) で、ブログ記事(エントリーごと)の

  ・はてなブックマーク http://b.hatena.ne.jp/ で、ブックマークされた件数
  ・Twitter http://twitter.com/ で、ツイートされた件数
  ・Facebook http://www.facebook.com/ で、「いいね」「Like」された件数

を表示するようにしてみました。(MTLブログに適用)

MT のテンプレートで、以下の HTML を追加しました。

<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" style="margin-right: 10px;"><img src="http://b.hatena.ne.jp/images/append.gif" width="16" height="12" style="margin-right: 2px;" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" border="0" /><img src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink$>" border="0" /></a>

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="mtl">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<iframe src="http://www.facebook.com/plugins/like.php?layout=button_count&show_faces=true&width=120&action=like&colorscheme=light&href=<$MTEntryPermalink$>" allowtransparency="true" style="border: medium none; overflow: hidden; width: 120px; height: 25px;" frameborder="0" scrolling="no"></iframe>

MT なので、<$MTEntryPermalink$> で自動的にエントリの URL が入ります。
http://b.hatena.ne.jp/images/append.gif は自分のサーバにコピーして下さい。
data-via="mtl" の部分は、自分の Twitter アカウントに変更して下さい。

実際には、スタイルシートで行間を微調整します。
最初、float: で横並びの配置にしてみましたが、Twitter と Facebook の実体は iframe なので、
どうしても余白が出来て、なんだか間延びしてしまうため、縦配置にしています。
 

詳しくは、以下のドキュメント・ジェネレーターを参照して下さい。

 ・自分のブログに「○○users」を表示する(はてなブックマーク)
 ・Twitter活用術 › ツイートボタン(Twitter)
 ・Social plugins - Like Button(Facebook)

 
これらの「ソーシャルプラグイン」により、従来型のウェブサイトにもソーシャル機能を組み込めます。
このカウンタ表示が、ブログから外部のソーシャルストリームへ繋がるリンクとなるわけです。
ウェブサイトやウェブアプリを作るときは、ソーシャルストリームを活用する設計 が大事ですね。(PR)

 
(2010.08.20 追記)
Facebook の「いいね!」ボタンを押したら、その人の Wall(掲示板)の RECENT ACTIVITY
には載るけど、
他の人のマイページ上の News Feed には流れて来ないんですね? 広がらない?

トップへ戻る