Movabletypeでエントリーに対してのコメントをFriendFeedからも受付け・表示させるようにしました。jQuery 、FriendFeed APIを利用して、jsonデータを受取って実装するようにしています。今回はスキームとコードについての紹介です。FriendFeedからコメントを受付できるようにすることで、リアルタイムにレスポンスを返すことができるのをはじめ、コメントをくれるユーザーとのつながりも強く、増やす可能性を広げることができるかと思います。
TwitterよりFriendFeed メインでライフストリーミングしています。自分の中ではかなりFriendFeed の機能に惚れこんで使いこなしています（つもり・・・）。
さて、MovabletypeにFriendFeedからもエントリーに対してのコメントを受付・表示するようにしました（jQueryとFriendFeed APIを利用して）。今回はそのスキームとコードについて紹介します（コードには自信がないのですが）。Movabletypeにかぎらず、Wordpressはじめ他のブログサービスでもコードを変えることで実装できるかと思います。
基本的にはFriendFeed にアカウントを作り、アカウント設定で自ブログのフィードを読み込ませる（流す）必要があります。そうした上で自ブログにFriendFeedからもコメントを受付、表示することができるようになります。
FriendFeed側にコメント受付窓口を設けることで、ブログと自分との距離感を短くする＝読者との距離を縮めることができるのかと思います。他に自分の都合のいいスキームで読者とやり取りができるといった点でしょうか。リアルタイムにレスポンスできる、読者とつながる可能性が広がるといった点、エントリーに対しての内容を読者と一緒に掘り下げることや、広げていけれる（自分でもコメントできるので気軽に追記できる）点など、いくつかのメリットを取り上げることができると思います。
スキーム
FriendFeed API を利用します。ベーシック認証なしでseachデータをjsonで拾ってくることができます。それを利用し、返ってきたjsonデータをjQueryで読み込み、表示させるといった具合になります。実際のコメント受付はFriendFeedでの該当フィードへのリンクを表示させ、そちらから受付けることになります。
FriendFeed APIを使って自エントリのアドレスで検索
まずは、エントリのアドレス（URL）を検索かけます。例）前回のエントリで。
これだけでもjsonでデータが返ってくるのですが、もしブックマークなどからフィードを流している方が複数みえた場合、、複数マッチデータが返ってきます。実際にエントリーに対してのコメントは一つに絞りこみたいです。そこで自分のFriendFeedのフィードからのみ検索をかけるようにします。
クエリーに"from:自分のFriendFeedのアカウント名+"を追加することで絞り込むことができます。
これで自分のFriendFeedに同じURLのフィードを流さない限り、FriendFeedで該当するエントリのフィードは一つとなり、そこでコメントを受付けることができるようになります。
もし、複数のフィードを流すように設定していて、該当URLのフィードが二つ以上あるなら、"-service:Twitter or delicious or はてな" などをクエリーに追加して、該当フィードを一つに絞り込むことができると思います。（試していません）
参照 : Read methods FriendFeed API Documentation
jQueryでjsonを処理
以下のコードで返ってきたjsonデータを処理します。任意の場所にFriendFeedで受付けたコメントを表示させ、FriendFeedへの該当フィードへのリンク表示（Leave comment on friendfeed)。エントリーメタ情報部分に受付コメント数の表示もさせるようにしています。
username部分はFriendFeedでのユーザーネーム（表示される名前）に書き換えてください。
Movabletype用のurlです。適宜変更してください。
Movabletypeの方は以下のコードをモジュールにして、アーカイブテンプレートブログ記事のフッター辺りにインクルードさせるようにしてください。
$(document).ready(function(){
var ff_u_name = 'username';
var ff_uri = 'http://friendfeed-api.com/v2/search?q=from:'+ff_u_name+'+<$mt:EntryPermalink$>&callback=?';
var list = '<h4>Comments for this entry on FriendFeed</h4>';
var no_title='<h4>No Comments for this entry on FriendFeed</h4>';
list += '<ul class="item_list">';
$.getJSON(ff_uri, function(data){
var en = data.entries;
if(!en.length){ $("div.friendfeed_comm").empty().html(no_title); return false; }
for (i=0; i<en.length; i++) {
var co = en[i].comments;
if(!co){ $("div.friendfeed_comm").empty().html(no_title); return false; }
for (d=0; d<co.length; d++){
list += '<li class="item_body">'+co[d].body+'</li>';
list += '<li class="item_meta">'+co[d].date+' <span class="meta_name">'+co[d].from.name+'</span></li>';
}
$("span.ff_com_count").html('<a href="'+en[i].url+'">コメント on FriendFeed ('+co.length+')</a>');
list += '</ul><p class="leave_txt"><a href="'+en[i].url+'">Leave comment on friendfeed</a></p>';
}
$("div.friendfeed_comm").empty().html(list);
});
return false;
});
FriendFeedコメント表示HTMLコード
本ブログでは以下のような感じでエントリー本文下にFriendFeedでのコメントを表示させるようにしました。
<div class="friendfeed_comm"></div>
FriendFeedでのコメントを表示させたい部分に上記のHTMLコード追加します。
FriendFeedコメント数表示HTMLコード
本ブログでは以下のような感じでエントリーメタ部分にFriendFeedでのコメント数を表示させるようにしました。
<span class="ff_com_count"></span>
FriendFeedでのコメント数を表示させたい部分に上記のHTMLコード追加します。
CSS
FriendFeedデフォルトで利用できるウィジットに似たような設定にしています。適宜変更してください。
span.ff_comm_count a{
color: #437EC7; }
div.friendfeed_comm {
background: transparent url('http://friendfeed.com/static/images/widget-logo.png?v=da25') no-repeat scroll right 0;
margin: 5px 0 10px;
border: 1px solid #437EC7;
font-size: 13px;
line-height: 17px;
text-align: left;
overflow: hidden; }
div.friendfeed_comm h4{
margin: 30px 0 10px 20px;
color: #437EC7;
font-size: 16px; }
div.friendfeed_comm ul{
list-style-image: none;
list-style-position: none;
list-style-type: none;
margin: 0 20px;
padding: 0; }
div.friendfeed_comm li.item_meta{
color: #888888;
margin-bottom: 8px; }
div.friendfeed_comm span.meta_name {
color: #7777CC; }
div.friendfeed_comm p.leave_txt a{
color: #7777CC;
margin-left: 20px;
font-size:15px; }
以上です。コードについてのおかしい部分、わからない点などありましたら、本エントリー本文下に表示されるFriendFeed上にコメントいただけると嬉しいです。ちょっとは早くお答えできるかと思います。
参考
Wordpressユーザーの方はプラグインがありますね。 FriendFeed Comments WordPress Plugin - Development on a Shoestring
Movabletypeでもプラグインがあります。タスクで定時で再構築する必要があるようなので、今回のスキームの方がよりリアルタイムに簡単にFriendFeedからコメントを受付、表示できるかと思います。Import FriendFeed Comments (MT Hacks)
コメントする