Facebook連携設定方法

パレットCMSにFacebook連携設定を行う方法

本マニュアルでは、パレットCMSのsnsモジュールを導入する際に設定が必要な、Facebookの無期限Token取得方法を解説します。

Tokenを取得する前に、記事の連携を行うFacebookアカウントをご用意ください。
※アカウントが未取得の方はまずはこちらからアカウント作成を行ってください。
※現在Facebook連携はFacebook社の事情により、デベロッパー環境のみ提供されています。
　本環境のタイムラインへの投稿はできません。環境が変わり次第、本マニュアルも更新いたします。

1. 新しいアプリの追加

それではお持ちのFacebookアカウントにログインし、以下のURLをクリックし、「Facebook for Developers」サイトにアクセスしてください。

初めてアクセスする方は手順1、過去にアクセスのある方は手順2から操作を行ってください。

手順1
ページ右上の「スタートガイド」をクリックします。

そのまま「次へ」で進み、アカウントの認証を実行してください。認証が完了すれば、基本データを設定します。
※本手順では「開発者」を選択しています。

基本データの設定が完了したら、そのまま、「最初のアプリを作成」をクリックします。

新しいアプリIDを作成ダイアログが表示されるので、アプリの表示名を入力し、「アプリIDを作成してください」ボタンで完了します。

全ての設定が完了すると、そのままマイアプリページに遷移し、設定が完了します。

メニューの設定 > ベーシック から、「アプリID」と「app secret」が取得できます。パレットCMSのSNS設定のFacebook設定で使用するので、メモ帳などに書き留めておくと良いでしょう。

手順2
ページ右上の「マイアプリ」をクリックします。

全てのアプリページから、アプリがない場合、「新しいアプリを追加」からアプリを追加してください。

2. アプリにプラットフォームを追加する

アプリ登録が完了したら次に、全てのアプリページのアプリアイコンをクリックし、アプリのダッシュボードに移ります。

ダッシュボードのサイドメニューの「設定」から「ベーシック」を選択し、ページ最下部の「＋プラットフォームを追加」ボタンをクリックします。

「プラットフォームを選択」では[ウェブサイト]を選択し、出現したウェブサイトエリアに「サイトURL」を入力し、保存します。

ウェブサイトの設定が完了したら、最後にページ上部の必要事項を設定していきます。

プラットフォームの設定は以上となります。

3. ページの作成

トークンを取得する前に、Facebookアカウントにてページを作成する必要があります。Facebookアカウントに戻り、ヘッダーメニューの「作成」をクリックします。

「ビジネスまたはブランド」の「スタート」をクリックします。「ページを作成」画面で「ページ名」と「Category」を入力し次へをクリックします。

プロフィールを設定して、ページ作成を完了します。

4. トークンの取得

取得できるトークンは「短期トークン」と「無期限トークン」の2種類があります。取得の流れとしては先に「短期トークン」を取得し、そのトークンを使って「無期限トークン」を生成します。

短期トークンの取得

先ほどの作業の続きで、マイアプリのダッシュボードページを開いたままで、以下のURLにアクセスします。

グラフAPIエクスプローラー画面に遷移したら、アクセストークンの「Facebookアプリ」に先ほど作成したアプリが選択されている事を確認してください。

次に「ユーザーまたはページ」の「トークンを取得」をクリックし、「ページアクセストークンを取得」を選択します。

アカウントへのログインを促されるのでそのままログインし、ページの設定で先ほど作成したページを選択して次へをクリックします。

〇〇に許可するアクセスの設定で「はい」と設定されている事を確認し完了します。

「ユーザーまたはページ」の「ユーザートークン」をクリックし、「ページアクセストークン」から先ほど設定したページ名（アプリの表示名）を選択します。

アプリ名を選択した後、その下の「許可を追加」をクリックし、以下にチェックを入れます。

最終的にアクセス許可が以下3つとなっていることを確認してください。

上記設定が完了したら、「Generate Access Token」ボタンクリックでトークンを発行し、そのままFacebookにログインします。

ログインが完了したら、発行されたアクセストークンをメモ帳などに控えておきます。

以下のURLにアクセスし、先ほど発行したアクセストークンをデバッグします。

アクセストークンをペーストし、デバッグをクリックすることで、アクセストークン情報が確認できます。有効期限が（約1時間以内）と表示されている事を確認してください。

次にページ下部の「アクセストークンを延長」をクリックします。 期限が延長されたアクセストークンが発行されます。

そのまま「デバッグ」をクリックし、アクセストークン情報ページに遷移します。

有効期限が延長されている事を確認してください。次に延長されたアクセストークンを使って、無期限のアクセストークンを発行します。

無期限トークンの取得

先にマイアプリから取得した「アプリID」と「app secret」を準備します。次に先ほど延長したアクセストークンを使って以下のURLの場所を書き換えます。

https://graph.facebook.com/oauth/access_token?grant_type=fb_exchange_token&client_id=AAAA&client_secret=BBBB&fb_exchange_token=CCC

↓

https://graph.facebook.com/oauth/access_token?grant_type=fb_exchange_token&client_id=「マイアプリ記載のアプリID」&client_secret=「マイアプリ記載のapp secret」&fb_exchange_token=「延長されたアクセストークン」

書き換え後のURLをコピーし、ブラウザーアドレス項目にペーストし、「Enter」でアクセスします。

新たにアクセストークンが発行されるので、表示のトークンをコピーします。

次に以下のURLにアクセスし、無期限のアクセストークンを発行します。

アクセストークン項目に先ほどブラウザで発行されたトークンを貼り付け、「ユーザーまたはページ」項目にページアクセストークンのアプリに切り替えます。

そのまま「Generate Access Token」ボタンをクリックし、トークンを発行します。次にエクスプローラーのアドレスが「me/accounts」となっていることを確認し、「送信」をクリックします。
※「me/accounts」となっていない場合、選択もしくは手動で入力してください。

以下の画像の赤枠の「”access_token”」をコピーします。

※ダブルクォーテーション「”」は含めずにコピーしてください。

以上発行されたアクセストークンが無期限トークンとして発行されているかデバッグで確認します。

以下のURLにアクセスします。

「デバッグするアクセストークンを入力してください」と記載の項目に先ほどコピーしたアクセストークンをペーストし、デバッグボタンをクリックします。

「1時間以内」のアクセストークンであることを確認し、表下部にある「アクセストークンを延長」ボタンをクリックします。

「この長期アクセストークンは期限切れになりません」と表記されている事を確認し、デバッグボタンをクリックします。

有効期限が「受け取らない」となっていたら成功です。上部に発行されているアクセストークンをコピーし、メモ帳などに書き留めておきましょう。

5. マイアプリをライブにする

現状マイアプリは「開発中」となっています。以下のURLにアクセスし、ページ右上の「マイアプリ」をクリックします。

ここのステータスが「開発中」の場合、Facebookに記事を投稿しても、外部から閲覧ができません。 ステータスを「ライブ」にするためには、プライバシーポリシーのURLとカテゴリを設定する必要があります。

実際に運用するWebサイトで用意されているプライバシーポリシーのURLを以下の場所に設定し、該当のカテゴリを選択後「変更を保存」をクリックします。

開発中のチェックを切り替えると「ライブモードに切り替えますか？」ダイアログが出現するので、そのまま「モード切り替え」をクリックし、ライブモードに切り替えましょう。

モードが「ライブ」となっていれば成功です。

6. パレットCMSにFacebook設定を行う

最後にパレットCMS側で連携設定を行います。パレットCMSにログインし、システム設定の「SNS設定」画面を開きます。

Facebook設定の以下3つ項目を設定します。

設定後、アイテムシートのレコード詳細の「SNS投稿」から、Facebookに投稿されるか確認してください。

以上、Facebookの無期限トークン取得とID、シークレットキーの取得方法の解説となります。