簡単にtweetボタンとtweets数を設置する方法

あなたのブログやニュースサイトに「この記事についてTwitterでつぶやく」といったtweetボタンを簡単に設置する方法を紹介します。具体的にはページのタイトルとその短縮URLを投稿するためのTwitterページに飛ぶリンクボタンです。また、Twibを使ったその記事がTwitter上でどれだけつぶやかれたかのtweet数を表示する仕方も同時に解説していきます。

tweetボタン

javascriptが必要なくテンプレートタグを変更するだけで対応するのでお気軽です。例としてfc2ブログとlivedoor Blogをあげますので参考にしてください。

fc2ブログの場合

「テンプレートの設定＞修正」から「HTMLの編集」を以下のように編集します。(「default」テンプレートの場合)

 ...
<!--deny_comment-->コメント(-)<!--/deny_comment-->
</li>
...

を

 ...
<!--deny_comment-->コメント(-)<!--/deny_comment-->
</li>
<li><a href="http://twib.jp/share?url="
target="_blank" rel="nofollow">
<img src="http://twib.jp/static/images/t.png" alt="このエントリーをつぶやく" />
</a></li>
<li><a href="">http://twib.jp/url/">
<img src="http://image.twib.jp/counter/"
alt="Twib - <%topentry_title>" title="Twib - <%topentry_title>" />
</a></li>
...

のように記述して保存してください。

livedoor Blogの場合

「管理ページトップ＞カスタマイズ/管理」より「デザインのカスタマイズ」を選択。「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」のテンプレートをそれぞれ以下のように編集します。

 ...
 <li class="article-tool-box"><$ArticleToolBox$></li>
 </ul>
...

を

 ...
<li class="article-tool-box"><$ArticleToolBox$>
<a href="http://twib.jp/share?url= URIESCAPE$>"
target="_blank" rel="nofollow">
<img src="http://twib.jp/static/images/t.png" alt="このエントリーをつぶやく" border="0"/>
<a href="">http://twib.jp/url/">
<img src="http://image.twib.jp/counter/"
alt="Twib - <$ArticleTitle ESCAPE$>"
title="Twib - <$ArticleTitle ESCAPE$>" border="0" />
</a>
</li>
...

その他のブログでも同じようなことは可能です。詳しくは、Twib - Twib API をご覧ください。 Enjoy!