読者です 読者をやめる 読者になる 読者になる

ゆーすけべー日記

はてなBlogってどーなの!?

簡単に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=<%topentry_enc_link>"
target="_blank" rel="nofollow">
<img src="http://twib.jp/static/images/t.png" alt="このエントリーをつぶやく" />
</a></li>
<li><a href="">http://twib.jp/url/<%topentry_link>">
<img src="http://image.twib.jp/counter/<%topentry_link>"
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=<$ArticlePermalink URIESCAPE$>"
target="_blank" rel="nofollow">
<img src="http://twib.jp/static/images/t.png" alt="このエントリーをつぶやく" border="0"/>
<a href="">http://twib.jp/url/<$ArticlePermalink$>">
<img src="http://image.twib.jp/counter/<$ArticlePermalink$>"
alt="Twib - <$ArticleTitle ESCAPE$>"
title="Twib - <$ArticleTitle ESCAPE$>" border="0" />
</a>
</li>
...

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