ブログに関連する Twitterの呟きを表示する『超おむすび』

スプリクトを作られたコルトでＧＯさんの許可がでましたので、こちらのエントリーでスプリクトを公開します。この JavaScriptをブログ記事に設置する事で、そのエントリーに関連したTwitterの呟きをコメントのように表示させることが出来るようになります。

上の画像の用に、TwitterにてＲＴされたエントリー関連のコメントがピックアップされ、あたかもコメントのようにエントリーのお好きな場所に呟きを表示する事が出来ます。上の例は多少カスタマイズしていますので実際の表示とはちがいますが、スタイルシートなどで整形して下さい。

【 JavaScript :twitterer_anywhere.zip】

ダウンロードしたＺＩＰを解凍後、twitterer_anywhere.ja.jsをの以下の部分を変更します。

反転している部分をご自身の Twitter に設定している名前に書き替えます。

上の「名前」に設定してあるものです。
ユーザー名ではありません。

次にスプリクトの先頭を見ると次の記述があります。


//---Spam list-----------------------------------------------
var antispam = false;   //スパム対策を有効にするならtrue。無効にするならfalseを指定。
var spamlist = ["userA", "userB"];              //スパムリストはカンマ区切りで名前を記述してください。
//-----------------------------------------------------------

２行目でスパム対策を有効にするか？を設定し、有効なら誰をスパムにするか？の設定です。

最初はスパムも無いでしょうから設定の必要はないと思います。
暫く運用して、あまりにもエントリーと関係ない呟きがＲＴされてくる場合、先方のお名前を３行目に登録します。（＠マークより後ろの名前です）

ここまで書き替えたら twitterer_anywhere.ja.js をサーバーのフォルダにアップロードします。

次にブログのテンプレートの <head> ～ </head>の間に次のリンクを書き込みます。

※ちなみに『超おむすび』の場合はインデックスやアーカイブの表示の時にスプリクトを読み込む時間節約のため、エントリーを開いたときにJavaScriptを読み込むようにしていますのでヘッダではなくエントリー全文が表示されたとき読み込まれる部分に設置しています。

そして呟きを表示したい部分に下の記述を書き込んでおきます。

あとはエントリーを保存し、TwitterでそのエントリーのＵＲＬを含めた呟きをして下さい。

短縮ＵＲＬでもＯＫです。エントリーをリロードすると早ければ一瞬で下のように表示されます。

数字の部分をクリックすると、呟きのみ表示されます。

名前をクリックすると呟いた方のTwitterページを開き［ hours ago］をクリックすると、呟いたページが単独で表示されます。オリジナルスプリクトではリンクをクリックした時、同じページに開かれますので別ウィンドで開きたい場合は <a > リンクに target=\"_blank\" を追加します。

基本、これだけでブログがTwitterとリンクしたように楽しくなりますのでお試し下さい。

ここからは細かい部分のご説明です。


div#twitterer-anywhere-box div.tweet_box_left {
        width: 58px;
        float: left;
}
div#twitterer-anywhere-box div.tweet_box_right {
        width: 429px;
        line-height: 1.2em;
        float: right;
}
div#twitterer-anywhere-box div.clearfloat {
        clear: both;
}
div#twitterer-anywhere-box div.clearfloat span {
        margin-left: 6px;
        margin-right: 6px;
}

上がコルトでＧＯさんが作って下さったスタイルシートです。
細かい部分はご自身で微調整して下さい。

その他、MovableTypeの場合はエントリーではなくインデックスページに表示されてしまうとエントリーに関係のない呟きも表示されてしまいますので、次のように囲んでおきます。

またMovableTypeの場合ですと、エントリーごとに呟きを表示するか？しないか？をカスタムフィールドを使う事で可能だと思います。

Qapla'

追記： 2009/12/28

・呟きが１０件以上有った場合の対応版。

エントリーに「関連するかもしれない呟き」が１０コ以上付いた場合、古い順から表示されなくなりますが、コルトでＧＯさんが手を入れて下さり全ての呟きを別サイトで観覧出来るようになりました。

オリジナル twitterer_anywhere_ja.js　　　　}
　　　　　　　　　html += "</ul>";
　　　　　　　　　html += "</div>";
　　　　}
}
var wrap = document.createElement("div");
wrap.innerHTML = html;

変更(追加）部分
}
html += "</ul>";
if (json.response.total >= 10) {
html += "<p class=\"more\"><a class=\"twitterer_anywhere_go\" href=\"http://topsy.com/tb/"+escapeHTML(twitterer_anywhere_url)+"\">more...</a></p>";
}
html += "</div>";
}

青字で書かれた間に赤字の部分を追加するだけです。

Comment [2]

［No:001111］コルトでGO さん BlogMaster 2009年12月25日 01:09 | 【返信】

うわぁ。適当に作ったソースを公開されちゃうととっても恥ずかしい...
ライブラリ提供元のMOONGIFTさん、参考にさせていただいたColdSleepさんに感謝です☆
誰かエライ人にソース改修希望です。。

>先方のお名前を３行目に登録します。（＠マークより後ろの名前です）
すみません。。スパムの判定は"ユーザー名"ではなく、"名前"で行っています。

［No:001112］ Ran さん BlogMaster 2009年12月28日 03:29 | 【返信】
【 Comment No.1111 コルトでGO 】さんのコメントへの返信　
コルトでＧＯさん、有難うございました。

どうも１０コ以上の呟きが有る場合は、ココでは表示せず「つぶやき」のカウント先のＷＥＢで見られる仕組みのようですね。

Twitterとブログ、両方やられている方には絶対楽しいワザだと実感です(#^.^#)。