Facebookのウォールの内容をページに表示するJavaScriptで、titleが空欄になる。

JavaScript（jQuery）を使うとFacebookのウォールに投稿された内容（フィードなど）を自分のサイトに表示したりすることができます。

（参考記事：Facebook Syndication Error）
※方法については「facebook getJSON」などでググってみるといろいろ見つかります。

一応書いたスクリプトを載せるとこんな感じ。

$.getJSON(
'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
{
q:'http://www.facebook.com/feeds/page.php?id=NNNNNNNNNNNNNNNN&format=rss20',
v:'1.0',
num:10
},
function (data) {
$.each(data.responseData.feed.entries, function(i, item){
$('#info').append(item.title);
}
);

※「 NNNNNNNNNNNNNNNN 」は固有のID番号
※append(item.title);では単純にタイトル部分が文字として入りますが、必要に応じてHTMLタグで修飾します。


ところが上記で、titleが空欄になってしまう投稿があると言う現象が発覚。

原因を調べてみると、どうやら写真をシェアした時に、titleが元々空欄になってしまうようです。
Facebookから取得したJSONの生データをみてみると、該当の投稿は「」となっており、titleに何も文字が入っていません。
※本来ならCDATAの後の[ ]の中に文字が入る。
item.title.lengthで文字数を調べると、0と出ます。1文字も入っていない正真正銘のカラ状態ですね。

これでは表示されないのは当たり前です。
仕方ないので力わざで解決。方法は下記の通りです。

●titleの中身が空欄（文字数が0）なら、その項目は飛ばす。
●上記のスクリプトでは10件を表示しているが、飛ばす数が多くなると、表示数が少なくなってしまう。
　それを避けるため、titleが空欄かどうかを調べる対象を多めに設定する。

具体的にはこんな感じです。


var nDispNum = 10;//表示させる件数
var nGetNum = 30;//titleが空欄かどうかを調べる最大件数
var htmls_array = new Array();//調べた後に一時的に内容を格納する配列

$.getJSON(
'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
{
q:'http://www.facebook.com/feeds/page.php?id=NNNNNNNNNNNNNNNN&format=rss20',
v:'1.0',
num:nGetNum
},
function (data) {
$.each(data.responseData.feed.entries, function(i, item){
  if(item.title.length != 0){//文字数が0でなければ、配列htmls_arrayに格納
htmls_array.push(item.title);
}
});
  for(var j=0; j  $('#info').append(htmls_array[j]);//配列htmls_arrayに格納された情報のうち、最初の10件を表示
}
}
);

まぁちょっと多めにチェックを回すので無駄な感じがあるのと、写真をシェアしただけの投稿は表示されないというのが欠点ですね。
でも、空欄になってしまうと言う不具合を起こすよりはいいのかなと。