タイトル通り、fb.wallで余計なアクティビティログを拾ってしまうときの対処法です。いつものくだらないブログだと思って開いた方には申し訳ないんですけど、メモしとかないと忘れてしまうので…。
前も書きましたが職場のホームページ任されてるんです。そろそろ改装したいなーと思ってホームページ眺めてたら、facebook表示してる部分がどうもおかしいんですよねー。随分前からcssが反映されてなかったみたい(てへぺろ
それで今回fb.wallを導入しました。
【参考１】jQueryでFacebookをもっと便利に、fb.wallを詳しーく解説
【参考２】それでも、Facebook「Like Box」をカスタマイズしたかった。
前回cssでどうにかしたのも参考２のトラインデントさんの記事を参考にした覚えがあります。
ちなみに私、本職はただの事務員なんで身バレ防止のため実物スクショした見本とかないです。
とにかく、fb.wallの使い方は上記参考リンクを見てください。とても詳しいしわかりやすいです。
私が詰まったのは、配布元でも起こっている下の画像では赤丸で囲ったような部分です。
仕事柄情報発信が重要なのにこんなのがあるのは困る。
これは、アクティビティログを全て拾っているから起こっている現象のようでした。コメント返信や、ページとしていいねを押したりすると空欄が出てます。
素直にいいね押しました、とかコメントしました、と個別に出ていないのならこっちのもの。
どうにかしてやる！と燃えて対処法を模索しました。ただのお茶汲み事務員なのに。
その方法がこちら。jquery.neosmart.fb.wall.jsの88行目から始まる表示されるものの設定を変えます。
元のがこちら。
|
1 2 3 4 5 6 7 8 9 10 11 |
// Box ----------------------------------------------------------------------------------------------------------------------------------- output += (k==0) ? '<div class="fb-wall-box fb-wall-box-first">' : '<div class="fb-wall-box">'; output += '<a href="http://www.facebook.com/profile.php?id='+data[k].from.id+'" target="_blank">'; output += '<img class="fb-wall-avatar" src="'+getAvatarURL(data[k].from.id)+'" />'; output += '</a>'; output += '<div class="fb-wall-data">'; output += '<span class="fb-wall-message">'; output += '<a href="http://www.facebook.com/profile.php?id='+data[k].from.id+'" class="fb-wall-message-from" target="_blank">'+data[k].from.name+'</a> '; if(exists(data[k].message)) output += modText(data[k].message); output += '</span>'; |
97行目にif文がありますよね。「メッセージがある場合、メッセージを出力」になってるんで、「メッセージがある場合、boxを出力」に変えればいいと思ったので、このif文で全部囲ってみました。
|
1 2 3 4 5 6 7 8 |
// Box ----------------------------------------------------------------------------------------------------------------------------------- if(exists(data[k].message)){ output += (k==0) ? '<div class="fb-wall-box fb-wall-box-first">' : '<div class="fb-wall-box">'; output += '<a href="http://www.facebook.com/profile.php?id='+data[k].from.id+'" target="_blank">'; output += '<img class="fb-wall-avatar" src="'+getAvatarURL(data[k].from.id)+'" />'; . . . |
boxの最後でif文を閉じてしまうと時間だけ表示されてしまうので、このif文を閉じるのはmediaの最後の行です。
BoxがCommentsの後に閉じられているので、if文はCommentsの後に閉じます。
|
1 2 3 |
output += '</div>'; output += '</div>'; } |
ただ、表示しているページの方に記述する設定のmaxの数字を多めに設定していた方がよさそうです。
まあ、jqueryはもちろん、jsもほとんど理解してないので半ば賭けでしたがこれで無事表示できました。
しかしながら、できたー！と一息ついたあと参考１の記事が2011年末のものだと気づきまして。不安になって配布元のダウンロードリンクの横にあるコメントを読むと、開発終了とのことです。後継はneosmart STREAMというらしい。
私の苦労は一体…。でも、今は無事に表示されてるからまた不具合が起こるまで放っておこう…。
私はただのお茶汲み事務員…。webデザイナーじゃないんだ…プログラマーでもないんだ…。