JavaScript SDK - 例

JavaScript用Facebook SDKの読み込みと初期化の方法についてはクイックスタートを、また実装のカスタマイズについては高度な設定ガイドをお読みください。次に、以下のSDKの使用例を試してみましょう。

• シェアダイアログをトリガー
• Facebookログイン

シェアダイアログをトリガー

シェアダイアログは、ページを利用している人が自分のタイムラインにリンクを投稿したり、Open Graphストーリーを作成したりできます。JavaScript SDKを使用して表示されるダイアログは、モバイル用ウェブやデスクトップ用ウェブなど、読み込み状況に応じて自動的にフォーマットされます。

ここでは、FB.ui()SDKのメソッドを使用して基本的なシェアダイアログを呼び出す方法をご紹介します。基本設定コードのFB.init()を呼び出した後にこのスニペットを追加してください。

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/'
}, function(response){});
    

これで、ページを再読み込みすると、ページの上にシェアダイアログが表示されるようになります。ストーリーの投稿またはキャンセルによりダイアログが閉じられると、レスポンス機能が起動します。

使用可能なパラメーターの一覧と、レスポンスオブジェクトの構造を確認する場合は、FB.uiリファレンスドキュメント をお読みください。

Facebookログイン

Facebookログイン により、ユーザーはFacebookのIDでアプリに登録またはサインインできるようになります。

JS SDKを使用してFacebookログインを実装する方法について完全なガイドを用意していますが、今は基本的なサンプルコードを使って動作の方法を確認しましょう。元のFB.initコールの後に以下を挿入してください。

FB.login(function(response) {
    if (response.authResponse) {
     console.log('Welcome!  Fetching your information.... ');
     FB.api('/me', function(response) {
       console.log('Good to see you, ' + response.name + '.');
     });
    } else {
     console.log('User cancelled login or did not fully authorize.');
    }
});
    

ここでの詳細な動作について知るには、ログインガイドお読みください。ただし、まだ許可を与えていない場合は、ページを再度読み込んだときに、アプリのログインダイアログが表示されます。