jQueryでFacebookをもっと便利に、fb.wallを詳しーく解説

fbwallの使い方解説

私の地元は、東北から移った知人も後悔するほど寒い地域です。
宮崎県なのに...

「fb.wall」は、ブログにFacebookのウォールを貼付けることができる数少ないjQueryプラグインです。Facebook公式プラグインとは違い、CSSが適応できるので、自由なデザインが可能になります。

少しつまずいたので調べてみました。

サンプル(このブログのFacebookページ)

※このサンプルでは管理者以外のコメント、投稿などは表示されない設定にしています。

基本設定

まずはざっと流れをみてから、アクセストークンの作り方とカスタマイズ方法をご紹介します。

1.「fb.wall 1.2.7」をダウンロードする。

newsmart:http://www.neosmart.de/social-media/facebook-wall

注:このサイトはサーバーダウンなどで表示されないときがあります。

2.入力

Facebookページまたは、個人ページのFacebook IDを入力します。

https://www.facebook.com/profile.php?id=xxxxxxxxxxxxxxx
のx部分です。IDを変更済みの方は、変更した文字列でもOKです。
Facebook IDとアプリIDは別物なので注意してください。

Facebook IDは個人アカウントやFacebookページを作成したときに生成されます。一方のアプリIDの取得は後述する操作が必要です。

表示確認

Facebook IDにつづき、Access Tokenを入力(ここでは確認なのでそのままでも可能)、白文字の「Connect and create access token」を押し、「REFRESH」をクリック後、jQueryコードが表示されます。

表示したいサイトに、jQueryとプラグイン&CSS、生成されたjQueryコードを貼付けます。


<link rel="stylesheet" type="text/css" href="jquery.neosmart.fb.wall.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.neosmart.fb.wall.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
    $('#wall').fbWall({
        id:'Facebookページまたは個人ページのID',
        accessToken:'配布サイトで生成されたコード',
        showGuestEntries:false, // 自分以外の人を表示するかどうか
        showComments:true, // コメントを表示するか
        max:5, // 表示数
        timeConversion:24 // 時間の表記、12の場合はamとpmが表示される
    });
});
</script>

表示したい位置に指定したidのdivタグを置くと表示されます。


<div id="wall"></div>

アクセストークンの取得方法

Facebookの開発者登録をしていることが条件になります。
簡単に無料で登録できるので、こちらからググって調べてみてください。

開発者登録が済んでいる方は、表示したいブログやWebサイトの登録(アプリ作成)をします。

Developerアプリページから「新しいアプリケーションを作成」をクリックして、App Display Name(表示したいサイトのタイトル)を入力、チェックをつけて続行。

画像認証を突破後、App IDとApp Secretが表示されます。

そして、Access Token Tool にアクセスするとUser Token および App Tokenが表示されます。許可が必要と書いている場合はクリックしておいてください。

*App Tokenを使用すると期限切れはないようです。しかし、一部内容が表示されません。
一方、User Tokenを使用するとすべて表示されますが、期限が途切れないようにする仕組みが別途必要になります。
1分間に600以上のアクセスが想定される方は、取得データをPHPでサーバーに保存する上位版ver1.2.8(有料)が必要になります。

カスタマイズ編

この2つのファイルをいじります。

  • jquery.neosmart.fb.wall.css
  • jquery.neosmart.fb.wall.js

日付/時間の表記を変えたい

jquery.neosmart.fb.wall.jsの217行目のam,pmを午前、午後などに変更します。そのままでもかまいません。


ampm = (hour<12) ? 'am' : 'pm';

jquery.neosmart.fb.wall.jsの221から223行目


     return day+'.'+month+'.'+date.getFullYear()+' at '+hour+':'+minute+' '+ampm;
}
return day+'.'+month+'.'+date.getFullYear()+' '+o.translateAt+' '+hour+':'+minute;

これを以下のように書き換えます。


    return date.getFullYear()+'年'+month+'月'+day+'日 '+ampm+' '+hour+'時'+minute+'分';
}
return date.getFullYear()+'年'+month+'月'+day+'日 '+hour+'時'+minute+'分';

オプションを追加する。


<script type="text/javascript">
jQuery(document).ready(function($){
    $('#news').fbWall({
        id:'Facebookページまたは個人ページのID',
        accessToken:'アクセストークン',
        showGuestEntries:false, // 自分以外の人を表示するかどうか
        showComments:true, // コメントを表示するか
        max:5, // 表示数
        timeConversion:24, // 時間の表記、12の場合はamとpmが表示される
        // アバターを設定する場合は画像のパスを入力する
        avatarAlternative:'images/avatar.jpg', // 自分のアバター画像を指定
        useAvatarAlternative:false, // true:指定した自分のアバターを使用,false:自動設定
        avatarExternal:'images/exavatar.jpg', // 他人のアバター画像を指定
        useAvatarExternal:false, // true:指定した他人のアバターを使用,false:自動設定
        translateLikeThis:'がいいね!といっております。', // 2人以上が、いいねを押している時
        translateLikesThis:'さんがいいね!といっております。', // 1人だけが、いいねを押している時
        translateAt:'時刻', // 日付と時刻の間の at を置き換える
        translateErrorNoData:'エラーっす', // エラーのときの表示
        translatePeople:'人' // 5 people の people部分を換える
    });
});
</script>

私がいじってみて必要性を感じたのはこんなところです。いらない項目はcss側のdisplay:none;で消しちゃいましょう。

追記:投稿した画像が表示されない(´・ω・`)

どういうわけか一番最初にある画像以降は表示されませんでした。http://〜をhttps://s-〜に置換してあげると大丈夫なようです。


if(exists(data[k].picture)){
    if(exists(data[k].link)) output += '<a href="'+data[k].link+'" target="_blank" class="fb-wall-media-link">';
    output += '<img class="fb-wall-picture" src="'+data[k].picture+'" />';
    if(exists(data[k].link)) output += '</a>';
}

jquery.neosmart.fb.wall.js 103行目あたりにこのようなコードがあります。imgタグ出力部分のdata[k].pictureの後ろに.replace(/http:///,'https://s-')をくっつけてください。


if(exists(data[k].picture)){
    if(exists(data[k].link)) output += '<a href="'+data[k].link+'" target="_blank" class="fb-wall-media-link">';
    output += '<img class="fb-wall-picture" src="'+data[k].picture.replace(/http:///,'https://s-')+'" />';
    if(exists(data[k].link)) output += '</a>';
}

それでも表示されないときは一度ブラウザを再起動してみてください。

追記:本文が長いので抜粋したい

ある文字数以上は「...」で終わるようにします。


if(exists(data[k].description)){
  thisDesc = modText(data[k].description);
  if(thisDesc.length>299)thisDesc=thisDesc.substr(0,thisDesc.lastIndexOf(' '))+' ...';
  output += '<span class="fb-wall-description">'+thisDesc+'</span>';
}

抜粋する文字数を2カ所置き換えます。
299 -> 99
thisDesc.lastIndexOf(' ') -> 99


if(exists(data[k].description)){
  thisDesc = modText(data[k].description);
  if(thisDesc.length>99)thisDesc=thisDesc.substr(0,99)+' ...';
  output += '<span class="fb-wall-description">'+thisDesc+'</span>';
}

これで100文字以上は、先頭から100文字抜粋して表示されます。