members

members

【Facebookページ運用】はじめてのFacebook API&Facebook JS SDK ~コメント表示導入篇~

Tweet

株式会社メンバーズ アカウントサービス第5事業部 木村 壮介(@kimura_online

はじめまして。アカウントサービス第5事業部でサービス開発を担当する木村です。

最近、国内でもFacebookユーザが増え、技術系のブログ等を見ていてもAPIやSDKについての紹介記事が増えてきたように思います。そんな中、実際にFacebookのJavaScript SDKを用いて、Facebook上のノートに対するコメントを、自サイトのコラムに表示し、そこから投稿できるサンプルスクリプトを作成する機会がありました。

その時の感想等をコードの一部と絡めつつ、徒然と書き記したいと思います。拙文ですがご容赦ください。

今回のJS SDKを用いたサンプルアプリケーションでは

  1. Facebookログイン
  2. Facebookノートに紐づくコメントの表示
  3. Facebookノートに紐づくコメントへの投稿

という機能が必要でした。

今回のエントリーでは、この中の「コメントの表示」に関するサンプルコードをご紹介させていただきたいと思います。

FacebookのJS SDKには今回初めて触れたのですが、コードを書くにあたって、(個人的に)最初の壁がFacebookデベロッパーページの英語の文章でした(汗

さらにリンクが各文中に散りばめられているので、欲しい情報になかなか辿りつけないっ!
というところで、同僚からFacebookテストコンソールを教えてもらいました。

このテストコンソールは、JavaScript SDKを利用するに当たって非常に便利です。

サンプルコードも同ページ内のリンクから閲覧できます。

JS Test Console

このサンプルを適宜書き換えるだけでも、多くの機能を実装することができると思います。

コメント情報を取得する場合は、ラッパーとして機能する「FB.api」を使用します。

サンプル

var reqURL = [ノートID] + '/comments';
var reqParam = { };
FB.api(reqURL, 'get', reqParam, function(response) {
  if (!response || response.error) {
    alert("[Error]" + response.error.message);
  } else {
    for (var i = response.data.length; i >= 0; i--) {
      if (response.data[i]) {
        document.write('https://graph.facebook.com/' + response.data[i].from.id + '/picture');
        document.write(response.data[i].from.name);
        document.write(response.data[i].message);
        document.write("n");
      }
    }
  }
});

※未検証のコードです。ご利用にあたってはご注意ください。

上記は、コメントに書き込んだユーザの画像、名前、コメントを取得し、表示しています。
公開権限範囲の設定によっては、ログイン状態が閲覧の条件になる事もあります。

初めてFacebook APIに触りましたが、SDKの容易さと相まって、柔軟性が高く、スピーディーに導入でき、取得できる情報も広くて、可能性を感じると共に、私自身もとても面白いと思いました。

次回は「Facebookログイン篇」をお届けしたいと思います。どうぞお楽しみに!

カテゴリ: SNS, Facebook
2010年11月22日