概要
WEBサイトにInstagramの投稿を表示するための手順。所要時間30分。
- Facebook
- Facebookページを作成する
- Facebookページの設定からInstagramをリンクする
- Instagramアカウントに「Instagramビジネスツールの追加」と「リンクの確認」をする
- FACEBOOK for Developers
- アプリを作成する
- アプリにInstagramグラフAPIを追加する
- アプリIDとシークレットの確認する
- ユーザーアクセストークンの取得をする
- PHPのサンプルプログラム
** NOTE **
FacebookアカウントとInstagramアカウントは作成済みの前提
Facebookページを作成する
Facebookページの設定からInstagramをリンクする
Instagramアカウントに「Instagramビジネスツールの追加」と「リンクの確認」をする
FACEBOOK for Developers
アプリを作成する
アプリにInstagramグラフAPIを追加する
アプリIDとシークレットの確認をする
ユーザーアクセストークンの取得をする
PHPのサンプルプログラム
処理概要
アプリIDとシークレットとユーザートークンの3つを使用します。
- 1.APPIDとAPPシークレットと既存のユーザートークンを使用して新しいユーザートークンを取得
- 2.ユーザートークンを使用してフェイスブックIDを取得
- 3.ユーザートークンとフェスブックIDを使用してページ一覧とページアクセストークンの取得
- 4.フェイスブックの各ページ毎に処理を行う
- 4-1.ユーザートークンとページアクセスIDを使用してページにリンクしたインスタグラムビジネスアカウントIDとインスタグラムアクセストークンを取得
- 4-2.インスタグラムビジネスアカウントIDとインスタグラムアクセストークンを使用してインスタグラムの投稿データを取得
- 4-3.インスタグラムの投稿データを表示
実行結果
サンプルプログラム
トークンやインスタグラムの投稿内容はキャッシュするようにしてください。APIの上限に簡単に達してしまいます。
このサンプルは簡単に書いたスクリプトなのでエラー処理などは全くありません。
1~4-2までは全てトークンの取得のための処理なので、キャッシュさせてローカルに保存し、1周間に1度更新すれば十分だと思います。
4-3も投稿内容なので、キャッシュさせてローカルに保存し、1時間に1度更新すればいいと思います。
<?php
class config {
/**
* アプリID
*/
const GRAPH_API_APP_ID = '***************';
/**
* シークレット
*/
const GRAPH_API_APP_SERET = '********************************';
}
/**
* ユーザートークン
*/
$user_token = '*****************************************************************************************************************************************************************************************';
// 前回取得したユーザートークンを取得
if (is_file(dirname(__FILE__).'/user_token')) {
$user_token = file_get_contents(dirname(__FILE__).'/user_token');
}
$curl_options = [
CURLOPT_RETURNTRANSFER => true,
CURLOPT_TIMEOUT => 3,
];
echo '<h2>1.APPIDとAPPシークレットとユーザートークンを使用して新しいユーザートークンを取得</h2>';
$url = [];
$url[] = 'https://graph.facebook.com/v11.0/oauth/access_token';
$params = [];
$params[] = 'grant_type=fb_exchange_token';
$params[] = 'client_id='.config::GRAPH_API_APP_ID;
$params[] = 'client_secret='.config::GRAPH_API_APP_SERET;
$params[] = 'fb_exchange_token='.$user_token;
$url[] = '?'.implode('&', $params);
$url = implode('', $url);
$ch = curl_init($url);
curl_setopt_array($ch, $curl_options);
$res = curl_exec($ch);
$res = json_decode($res);
// echo('<div>'.nl2br(str_replace(" ", " ", htmlspecialchars('('.__LINE__.')'."\n".'$res => '.print_r($res, true)))).'</div>');
// ユーザートークンを更新する
file_put_contents(dirname(__FILE__).'/user_token', $res->access_token);
$user_token = $res->access_token;
echo '<h2>2.ユーザートークンを使用してフェイスブックIDを取得</h2>';
$url = 'https://graph.facebook.com/v11.0/me?access_token='.$user_token;
$ch = curl_init($url);
curl_setopt_array($ch, $curl_options);
$res = curl_exec($ch);
$res = json_decode($res);
// echo('<div>'.nl2br(str_replace(" ", " ", htmlspecialchars('('.__LINE__.')'."\n".'$res => '.print_r($res, true)))).'</div>');
$facebook_id = $res->id;
echo '<h2>3.ユーザートークンとフェスブックIDを使用してページ一覧とページアクセストークンの取得</h2>';
$url = 'https://graph.facebook.com/v11.0/'.$facebook_id.'/accounts?fields=id,name,access_token&access_token='.$user_token;
$ch = curl_init($url);
curl_setopt_array($ch, $curl_options);
$res = curl_exec($ch);
$res = json_decode($res);
// echo('<div>'.nl2br(str_replace(" ", " ", htmlspecialchars('('.__LINE__.')'."\n".'$res => '.print_r($res, true)))).'</div>');
echo '<h2>4.フェイスブックの各ページ毎に処理を行う</h2>';
foreach ($res->data as $page) {
echo '<h3>4-1.ユーザートークンとページアクセスIDを使用してページにリンクしたインスタグラムビジネスアカウントIDとインスタグラムアクセストークンを取得</h3>';
$url = 'https://graph.facebook.com/v11.0/'.$page->id.'/?fields=access_token,instagram_business_account&access_token='.$user_token;
$ch = curl_init($url);
curl_setopt_array($ch, $curl_options);
$res = curl_exec($ch);
$res = json_decode($res);
// ここでビジネスinstagram_business_accountが無い場合は
// 1.インスタグラムがビジネスアカウントになっていない可能性があるので
// フェイスブックのページ管理から該当ページの管理画面のInstagramより
// 「Instagramビジネスツールの追加」をする
// 2.ページがInstagramアカウントとリンクしていない可能性があるので
// フェイスブックのページ管理から該当ページの管理画面のInstagramより
// 「リンクを確認」をする
// echo('<div>'.nl2br(str_replace(" ", " ", htmlspecialchars('('.__LINE__.')'."\n".'$res => '.print_r($res, true)))).'</div>');
$instagram_business_account_id = $res->instagram_business_account->id;
$instagram_access_token = $res->access_token;
echo '<h3>4-2.インスタグラムビジネスアカウントIDとインスタグラムアクセストークンを使用してインスタグラムの投稿データを取得</h3>';
$params = [];
$params[] = 'access_token='.$instagram_access_token;
$params[] = 'fields=name,media.limit(10){caption,media_url,thumbnail_url,permalink}';
$url = 'https://graph.facebook.com/v11.0/'.$instagram_business_account_id.'/?'.implode('&', $params);
$ch = curl_init($url);
curl_setopt_array($ch, $curl_options);
$res = curl_exec($ch);
$res = json_decode($res);
// echo('<div>'.nl2br(str_replace(" ", " ", htmlspecialchars('('.__LINE__.')'."\n".'$res => '.print_r($res, true)))).'</div>');
echo '<h3>4-3.インスタグラムの投稿データを表示</h3>';
foreach ($res->media->data as $post) {
echo "<h4>CAPTION: {$post->caption}</h4>";
echo "<a href=\"{$post->permalink}\">";
echo "<img src=\"{$post->media_url}\" alt=\"{$post->caption}\" style=\"max-height:100px;max-width:100px;\"/>";
echo "</a>";
}
}