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

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

1、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です。様々なオプションを設定することも可能です。

2、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

3、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

4、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上の投稿一覧を、個別記事ページに表示させる

1、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を利用しています。

2、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で言及された数を表示する

1、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

2、Tweetcount Widget

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

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

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

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

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

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

1、Action Streams

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

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

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

Leave Your Words




Trackback一覧

リヴァース: 再生 Twitter[Don't Touch Me Box]

約半年、沈黙を続けていましたが、再開しました。 ども、お久しぶりです。 ブログの記事よりもデザインが日々変化しているDTMのライターぼうずです。 ...

2010-02-11 (Thu) 7:07 PM

Trackback URL