「TweetMeme」でブログの記事にReTweetしてもらう

7/1追記：
半月前くらいから、日本語のブログタイトルが文字化けしてしまう現象が解決できないため、ボタンを撤去しました。
TweetmemeのAPIが原因かと思われます。

CREAMUさんの記事を参考に、
「ブログ記事にReTweetしてもらう」ボタンを付けました。

retweet

TwitterのつぶやきでリンクされたURLを収集するサイト「Tweetmeme」が提供しているボタンを利用しています。

緑のボタンをクリックすると、ReTweetのフォーマットが自動入力された訪問者のtwitterページにジャンプします。
「@ブログ主のID」が含まれているので、ReTweetしてもらえば、ブログ主にもReplyが届きます。

WordPress なら記事中に自動表示されるプラグインもありますが、一覧ページではうまく動作しなかったり、表示位置を自分で決めるように設定するとパーマリンクがおかしくなってしまうのとで、結局「はてなブックマーク」もセットにする形で、テーマにコードを直接書き込む方法をとりました。

各種ブログサービス対応の設置方法を乗せておきます。追記以下をどうぞ。
※もちろん、Twitterアカウントを持っていることが前提です

記事ループ内のどこかに、以下のコードを貼りつけます。

<div class="tweetmeme_button">
<script type="text/javascript">
//<![CDATA[
tweetmeme_url = '[記事のURL]';tweetmeme_source = '[TwitterID]';tweetmeme_style = 'compact';
//]]>
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

[TwitterID]を、ReplyしてほしいIDに書き換え（私だとwebbingstudio）、
[記事のURL]を、ブログによって以下のように書き換えます。
（もし、独自タグに間違いがあれば教えてください）

WordPress: <?php echo get_permalink(); ?>
MovableType: <$mt:EntryPermalink$>
FC2ブログ: <%topentry_link>
SeeSaaブログ: <% article.page_url %>
忍者ブログ: <!–$entry_link–>
ライブドアブログ: <$ArticlePermalink$>

これで保存すれば緑の小さなボタンが表示されますが、インラインフレームが使われているので、囲んでいるdivを取っても上下に改行ができてしまいます。

ボタンだけがポツネンと表示されるのは嫌だ！という方は、divに指定しているクラス「tweetmeme_button」を利用して、floatするなり、ネガティブマージンやpositionで移動するなりしてCSSで調整してください。

ちなみに、私はこんな風にはてブアイコンとセットにして

<div class="social">

<div class="tweetmeme_button">
<script type="text/javascript">
//<![CDATA[
tweetmeme_url = '<?php echo get_permalink(); ?>';tweetmeme_source = 'webbingstudio';tweetmeme_style = 'compact';//]]>
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

<div class="hatebu">
<a href="http://b.hatena.ne.jp/append?<?php echo get_permalink(); ?>" title="この記事をはてなブックマークに追加"><img src="http://b.hatena.ne.jp/images/append.gif" alt="この記事をはてなブックマークに追加" width="16" height="12" /></a>
<a href="http://b.hatena.ne.jp/entry/<?php echo get_permalink(); ?>" title="この記事のはてなブックマークページ"><img src="http://b.hatena.ne.jp/entry/image/<?php echo get_permalink(); ?>" alt="" /></a>
</div>

<!-- /.social --></div>

floatで一列にまとめてます。
（後続する要素で、floatを解除してくださいね）

/* social
=================================================== */

.post .social {
margin: -2.3em 0 2em;
}

.single .post .social {
margin: -3em 0 3em;
}

.post .social .tweetmeme_button {
float: left;
display: inline;
width: 75px;
}

.post .social .hatebu {
display: inline;
}

こうやってReTweetされると、「自分のブログを見てもらってる！」ということがわかって嬉しいし、Twitterの他のユーザーにも記事を読んでもらえる機会が増えると思います。

残念ながら「TweetMeme」自体は日本語化されていないのですが、ReTweetしてもらう分には問題ないみたいなので、皆さんもどぞ。

Blog