Twitterとブログを連動させる方法いろいろ

こんばんは。Twitterを本格的に使い始めて、自分のブログと連動させる方法を色々と試してみたので、その方法をまとめてみました。Movable Typeを念頭においていますが、基本的にはブログツールを問わず、使えるものなのが中心なので参考にしてみてください。（追記:1 09/10/05 @forestkさんにクリップコメントをいただき、項目を追加しました。Thx!!）（追記:2 10/05/16 複数の項目を追加しました。）

目次

閲覧者に今みている記事をTwitterに投稿してもらうリンクを設置する

Easy Retweet Button

Easy Retweet Button
http://ejohn.org/blog/retweet/

上記のページから、retweet.jsをダウンロードします（1段落目のlittle scriptという文言からリンクを張られてるファイルがそれです）。そして適宜サーバにアップロードして、head要素内に

<script src="[設置パス]retweet.js"></script>

以上の記述を加え、ブログ記事・テンプレート内の任意の場所に

<a class="retweeet self"></a>

と記述すればOKです。様々なオプションを設定することも可能です。表示される数はつぶやかれた回数ではなく、リンククリックの回数です。

TwitThis

ブログ記事・テンプレートの任意の位置に以下のソースを挿入します。

<script type="text/javascript" src="http://ajax.twitthis.com/chuug.twitthis.scripts/twitthis.js"></script>
<script type="text/javascript">
document.write('<a href="javascript:;" onclick="TwitThis.pop();"><img src="http://ajax.twitthis.com/chuug.twitthis.resources/twitthis_grey_72x22.gif" alt="TwitThis" style="border:none;" /></a>');
</script>

img要素の参照している画像を変更して利用することも許されています。また、img要素を用いず任意のテキスト（例えば「このエントリーをTwitterに投稿する」など）も可能です。

oAuth認証を用いています。

Tools to use TwitThis
http://www.twitthis.com/tools

Creazy.netの@yagarさんの提供しているjavascript

<a href="javascript:var%20tid='あなたのTwitterアカウント名',d=document,w=window,l=location,e=encodeURIComponent,t=(d.selection)?d.selection.createRange().text:(w.getSelection)?w.getSelection():(d.getSelection)?d.getSelection():'',f='http://twitter.com/home/?status='+e(t)+'+RT+%40'+e(tid)+':+%22'+e(d.title)+'%22+'+e(l.href);if(!w.open(f,'retweet'))l.href=f;void(0);">ReTweet</a>

以上の記述をブログ記事・テンプレートの任意の位置に記述すれば、TwitterのHomeが別タブ（ウインドウ）で開き

RT @{あなたのTwitterアカウント名}: "{ページタイトル}" {URL}

がフォームに入力された状態になります。

見ているページをTwitterに投稿するBookmarkletとブログ用ボタン [C!]
http://creazy.net/2009/06/retweet_bookmarklet_and_blogparts.html

bit.ly（URL短縮サービス）に対応したバージョンも用意されています。

【bit.ly対応版】見ているページをReTweetするブログ用ボタン [C!]
http://creazy.net/2009/06/retweet_with_bitly_from_blog.html

BSDあれこれの@macminiosxさん作のプラグイン

BSDあれこれの@macminiosxさん作のMovable Typeプラグインです

プラグインをインストールして、bit.ly（URL短縮サービス)のアカウントを取得。そしてbit.lyのAPI Keyを取得して、それらをプラグインの設定画面で入力します。

そして、ブログ記事・テンプレートの任意の場所に

<a href="[設置パス]/retweetmaker.cgi/<mt:EntryID>" target="_blank" title="この記事をretweetする">ReTweet This!</a>

以上の記述を追加すればOKです。

ReTweet 0.3 バージョンアップMovable type用プラグイン - BSDあれこれ
http://www.macminiosx.com/2009/08/retweet_03_movable_type.html

記事のパーマリンクを含むTwitter上の投稿一覧を、個別記事ページに表示させる

twitterer anywhere

twitterer anywhere
http://twitterer.moongift.jp/

上記のサイトからtwitterer_anywhere.ja.jsをダウンロードして、サーバに適宜アップロードします。そしてhead要素内に

<script src="[設置パス]twitterer_anywhere_ja.js" type="text/javascript"></script>

と記述し、ブログ記事・テンプレートの任意の場所に

<div id="twitterer_anywhere"></div>

との記述を追加します。

@penguinanaさんのtwitter検索のAPIを利用しています。

tweetme

tweetme - Project Hosting on Google Code
http://code.google.com/p/tweetme/

上記のサイトから、tweet-me.jsをダウンロードして、サーバに適宜アップロードします。そしてhead要素内に

<script type= "text/javascript">/*<![CDATA[*/
// var tweet_me_limit = 10;
// var tweet_me_style = true;
// var tweet_me_url; 
/*]]>*/</script>
<script src="[設置パス]tweet-me.js" type="text/javascript" charset="utf-8"></script>

と記述し、ブログ記事・テンプレートの任意の場所に

<div id="tweet_me_here"></div>

との記述を追加します。

Twitter本家のTwitter SearchのAPIを利用しています。

Twitter Trackbacks Widget

jqueryを利用した、ウィジェットです。記事のパーマリンクを含んだTwitter上のつぶやきを、表示することができます。

Twitter Trackbacks Widget - A jQuery Plugin
http://www.moretechtips.net/2009/11/twitter-trackbacks-widget-jquery-plugin.html

リンク先では3種のデモが用意されています。[demo1] [demo2] [demo3]。

TopsyのAPIを利用しています。

ブログの記事がTwitterで言及された数を表示する

Twib

erogeekとして知られる@yusukebeさんのWebサービス、TwibのAPIを利用して、記事の被言及数をページに表示することができます。

<img src="http://image.twib.jp/counter/WebページのURL" />

以上の記述を、ブログ記事・テンプレートの任意の場所に追加すればOKです。

Movable TypeではWebページのURLの箇所をMTEntryPermarinkタグに変更すればOKですね。

Twib - Twib API
http://twib.jp/api

Tweetcount Widget

ネット上の様々なつぶやきを収集する検索エンジンを提供するBackTypeが提供しているWidgetがTweetcount Widgetです。

様々なパラメーターを設定することも出来ますが、ブログ記事・テンプレートの任意の場所に、

<script type="text/javascript" src="http://widgets.backtype.com/tweetcount.js"></script>

と記述するだけで、Twitterでその記事がつぶやかれた回数が表示できます。

短縮URLにはbt.ioを利用しています。

Tweetcount Widget -- BackType
http://www.backtype.com/widgets/tweetcount

WordPress向けにはプラグインも提供されています。

Tweetcount Plugin for WordPress -- BackType
http://www.backtype.com/plugins/tweetcount

Topsy Retweet Button for Web Sites

Webを「stream of conversations」と捉え、従来と違った形の検索システムを志向しているTopsyが提供しているのがTopsy Retweet Buttonです。

head要素内に、以下の記述を加えます。

<script type="text/javascript" src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script>

そして、ブログ記事・テンプレート内の任意の場所に、

<div class="topsy_widget_data"><!--
    {
        "url": "WebページのURL",
        "title": "WebページのTitle",
        "nick": "TwitterのUsername"
    }
--></div>

最低限、以上のように名前と値の各ペアを、カンマで区切って指定してやればOKです。短縮URLにはbit.lyを利用しています。

Topsy Retweet Button
http://labs.topsy.com/button/retweet-button/

WordPress向けにはプラグインも提供されています。オプションとして、言及Tweetをコメント、もしくはトラックバックとして表示できる機能がついています。

WordPress ? Topsy Retweet Button ≪ WordPress Plugins
http://wordpress.org/extend/plugins/topsy/

Twitterの自分の発言を表示させる

Action Streams

Movable Type 4.25から標準で同梱されるようになったAction Streamsプラグインを利用すればTwitterの自分の発言一覧をMovable Typeで表示させることができます。

詳しくは@dakinyさんの以下のページを参考にしてください。

【Movable Type 4.25公開】Action Streamをブログに追加して楽しもう: 世界中の１％の人々へ
http://www.dakiny.com/archives/mt42/movable_type_425action_stream/