アプリにFacebookアカウントをAPI連携するための設定方法

App2uとFacebookをAPI連携設定すると、Facebookの投稿をアプリでタイムライン表示させることも可能です。

さらに、Facebookの投稿と連動しアプリユーザーに通知が届くようになります。
ここでは、API連携に必要な手順を解説します。

【STEP 1】開発者アカウントの取得

MEMO

すでにFacebook開発者アカウントの利用設定がされている場合は、【STEP 2】へ進んでください。

(1)PCのブラウザで Facebook にアクセスしてログインします。
(2)ログインした状態でhttps://developers.facebook.com/ にアクセスします。
(3)右上の「利用を開始する」をクリックしてデベロッパーアカウントの利用を開始します。

「利用を開始する」をクリック

(4)ようこそ画面が表示されますので「次へ」をクリックします。

(5)SMS認証のための携帯電話番号を入力します。

(6)認証コードがとどいたらを入力して「次へ」をクリック

画像に alt 属性が指定されていません。ファイル名: FB4.jpg

(7)メールアドレスを認証し「メールアドレスを認証」をクリックします。

(8)役割の選択では「開発者」を選択して、「登録完了」をクリックします。

「開発者」を選択

登録が完了した旨のメッセージが表示されますので、これで登録作業は完了です。

【STEP 2】Facebookアプリの作成

(1)https://developers.facebook.com/ にアクセスします。
(2)右上の「マイアプリ」をクリックします。

「マイアプリ」をクリック

(3)アプリ画面が表示されたら「アプリ作成」ボタンをクリックします。

「アプリを作成」をクリック

(4)必要な機能の選択では「その他」を選択して「次へ」をクリックしてください。

「その他」を選択して「次へ」

(5)アプリタイプの選択では「ビジネス」を選択して「次へ」をクリックしてください。

(7)アプリ名を入力し、「アプリを作成」をクリックします。

完了すると、ダッシュボード画面に移動します。

【STEP 3】Facebookアプリの設定

(1)https://developers.facebook.com/ にアクセスします。
(2)ダッシュボードの「ビジネス向けFacebook ログイン」「設定」ボタンをクリックします。

(3)「Facebookログインに切り替える」をクリックします。

(4)ダイアログが表示されたら「その他」を選択して「Facebookログインに切り替える」をクリックします。

「その他」を選択

(5)左上のアプリ名の横にある▼をクリックして、ドロップダウンリストを開きます。
(6)「テストアプリを作成」をクリックするとダイアログが表示されますので、テストアプリ名を入力して「テストアプリを作成」をクリックします。

(7)左上のアプリ名がテストアプリ名になっていることを確認します。
(8)ダッシュボードの「InstagramグラフAPI」「設定」をクリックして、テストアプリに機能を追加します。

(9)ダッシュボードに戻り、「Facebookログイン」の「設定」をクリックしてテストアプリに機能を追加します。

(10)左メニューの「Facebookログイン」にあるサブメニューの「設定」をクリックします。

(11)設定画面の「Javascript SDKでログイン」の項目を「はい」に切り替えます。
(12)設定画面の「Javascript SDKに許可されたドメイン」の項目にApp2U管理画面のドメイン(https://app2u.jp/)を入力します。

【STEP 3】Facebookテストアプリにアカウントを連携

(1)左のメニューの「アプリの設定」「ベーシック」を選択します。
(2)設定画面に表示されている「アプリID」「App Secret」(※「表示」をクリックすると値が表示されます)の値をコピーします。

(3)App2Uの管理画面にログインします。
(4)「設定」タブをクリックし、「基本情報」「アプリ情報」に移動します。

(5)右下の「アプリID」「アプリ秘密キー」の欄に、先ほどコピーした「アプリID」「App Secret」の値をペーストして「保存」します。

「アプリ秘密キー」の欄には「App Secret」をペースト

(4)App2U管理画面の「設定」「SNS」「Facabook」に移動し「タイムライン表示」を選択します。

(5)「Facebookでログイン」ボタンをクリックすると、ログイン画面がポップアップで表示されます。
(6)ログイン情報を入力して「ログイン」をクリックします。

(7)ポップアップに「……(ユーザー名)でログイン」ボタンが表示されるのでクリックして続行します。
(8)連携に成功すると、「データの保存に成功しました」メッセージが表示され、「登録済みのアカウント一覧」に連携アカウントが表示されるようになります。

今後、Facebookに新たに投稿した場合、アプリにFacebookの投稿がタイムライン表示されるようになります。