みんな大好きインスタグラム。
今日はInstagramの投稿をウェブサイトに表示させる方法を紹介します。
前半部分では［Instagram Graph API］を使って、Instagramの投稿を表示させるのに必要な「アクセストークン」と「InstagramビジネスアカウントID」の取得方法を。
後半部分ではPHPでJSONデータを取得、表示させるためのコードを紹介していきます。
Instagramのアカウントを取得し、プロアカウントに切り替える
［Instagram Graph API］は、通常の個人アカウントでは利用できません。
プロアカウントへの切り替えが必要です。
なお、これまで「ビジネスプロフィール」という名称で提供されていたサービスは「プロアカウント」に変更になりました。
しかも、PCからではなく、モバイルアプリ経由でないとこれができません。
Instagramのモバイルアプリを使って、下記の手順でプロアカウントに切り替えます。
［設定］→［アカウント］→［プロアカウントに切り替える］
切り替え時にFacebookページへリンクするか尋ねられます。
［Instagram Graph API］はFacebook管理者ツールで設定を行いますが、同時に、Facebookページとの連携も必須になります。
Facebookページを作成する
もしまだFacebookページをお持ちでない場合は、この段階で作成が必要です。
FacebookページとInstagramアカウントを連携
Facebookページの設定画面から、Instagramとの連携を行います。
［Facebook for Developers］でFacebookアプリを作成する
Facebookの管理者ツール『Facebook for Developers』でFacebookアプリを作成します。
前述の「アクセストークン」と「InstagramビジネスアカウントID」は、ここで取得することになります。
Facebookアプリを作成
［マイアプリ］→［新しいアプリを追加］
必要事項を入力していきます。
アプリを作成すると、ダッシュボードにアクセスできます。
アプリ作成後のダッシュボードです。
グラフAPIエクスプローラを使う
上部メニューの［ツール］→［グラフAPIエクスプローラ］を選択します。
- 「Facebookアプリ」の項目で先ほど作成したアプリを選択。
- 「ユーザーまたはページ」の項目で『ユーサートークン』を選択。
- 「アクセスを許可」の項目で『public_profile』が表示されていることを確認。
- 「許可を追加」で『business_management』『pages_show_list』『pages_manage_posts』『instagram_basic』を選択。
各項目の詳しい説明はリファレンスを参照してください。
その後、『Generate Access Token』をクリックしてアクセストークンを発行します。
これで有効期限1時間のアクセストークンを取得できます。
アクセストークンの有効期限を2ヶ月に延長する
［アクセストークンデバッガー］のページに移動して、上記で取得した『有効期限1時間のアクセストークン』を入力します。
アクセストークンデバッガー：https://developers.facebook.com/tools/debug/accesstoken
『アクセストークンを延長』ボタンを押して、『有効期限を2ヶ月に延長したアクセストークン』を発行します。
この『有効期限を2ヶ月に延長したアクセストークン』はコピーしておきましょう。
アクセストークンの有効期限を無制限に延長する
再び［グラフAPIエクスプローラ］のページに戻ります。
そして、下記の３ステップの手順を実行します。
- 『アクセストークン』の項目に先程コピーした『有効期限を2ヶ月に延長したアクセストークン』を入力。
- 上部のバーに『me/accounts』と入力。
- 『送信』をクリック。
すると中央のボックスにコードが出力され、『"access_token":"XXXXXXXX",』と、有効期限が無制限のアクセストークンを取得できます。
『有効期限が無制限のアクセストークン』は大切な情報ですので、必ずコピーしておきましょう。
InstagramビジネスアカウントIDを取得
もう一度［グラフAPIエクスプローラ］のページに戻り、上部のバーに『me?fields=accounts{instagram_business_account}』と入力し、『送信』ボタンをクリックしてください。
すると、先ほどと同じように中央のボックスにコードが出力されます。
JSON形式で出力された情報の中に『instagram_business_account』というコードがあります。
これが『InstagramビジネスアカウントID』です。
ここまでの作業で、「アクセストークン」と「InstagramビジネスアカウントID」が取得できましたね。
続いて後半では、これら２つの情報を使って、PHPでインスタグラムの投稿を取得、ウェブページに表示させる方法を詳しく解説していきます。
ウェブサイトでお困りのときはオンズにお任せください！
