PHP|インスタとサイトを連動する
こんにちは。フリーランスのウェブやさんです。自サイトにインスタグラムを埋め込みました。ひと手間加えて、画像、キャプション、ハッシュタグそれぞれに、オリジナルのスタイルシートを適用しています。インスタデータを取得するための手順と、取得データのカスタマイズメモを紹介します。
開発に必要なもの / 今回使用したもの
Facebook開発者アカウント / (非公開)
Instagramアカウント / web83sukiru
連動対象のウェブサイト / https://sukiru.jp/
コマンドラインツール / Mac:ターミナル
手順1:Meta for Developer でアプリを登録する
[アプリを作成]を選択
アプリタイプ「なし」を選択し、[アプリ名]を追加 / アプリ名:sukiru
ダッシュボードに遷移するので、[設定]>[ベーシック]より必要項目を設定し、下部より[プラットフォームを追加]
[プラットフォームを選択]で[Website]を選択し、連動対象のURLを設定 / https://sukiru.jp/
手順2:Instagram Basic Display を設定する
[ダッシュボード]>[Instagram Basic Display]>[設定]>[Create New App]
必要項目を設定
手順3:Instagramテスター を追加(招待)する
手順2画面下部[ユーザートークンジェネレーター]>[Add Instagram Testers]
[Instagramテスターを追加]に対象アカウントを入力し招待 / web83sukiru
手順4:Instagramテスター の招待を承認する
手順3で招待したInstagramアカウントにサインイン。
(プロフィールアイコン)>[プロフィールを編集]>[アプリとウェブサイト]>[テスターの招待]より招待を承認。
手順5:Instagramテスター を認証する
以下のURLをブラウザで開く:{app-id}と{redirect-uri}は、InstagramアプリのID([アプリダッシュボード]>[製品]>[Instagram Basic Display]>[Basic Display]>[InstagramアプリID]と[有効なOAuthリダイレクトURL]にそれぞれ置き換える。
https://api.instagram.com/oauth/authorize
?client_id={app-id}
&redirect_uri={redirect-uri}
&scope=user_profile,user_media
&response_type=code
例えば
https://api.instagram.com/oauth/authorize
?client_id=***************
&redirect_uri=https://sukiru.jp/
&scope=user_profile,user_media
&response_type=code
認証ウィンドウが表示されるので承認する。
承認されると、認証コードが付加されてリダイレクトする。認証コードは、?code={認証コード}#_
例えば、以下の場合の認証コードは、AQBBVRqImmC*******
https://sukiru.jp/
?code=AQBBVRqImmC*******#_
手順6:認証トークンを取得する
ターミナルで次のPOSTリクエストをAPIに送信する。
curl -X POST \
https://api.instagram.com/oauth/access_token \
-F client_id={app-id} \
-F client_secret={app-secret} \
-F grant_type=authorization_code \
-F redirect_uri={redirect-uri} \
-F code={code}
{app-id} {app-secret} {redirect-uri} は、手順5の画面より確認。
{code} に手順5で取得した認証コードを用いる。
例えば、
curl -X POST \
https://api.instagram.com/oauth/access_token \
-F client_id=*************** \
-F client_secret=*************** \
-F grant_type=authorization_code \
-F redirect_uri=https://sukiru.jp/ \
-F code=AQBBVRqImmC*******
成功すると、1時間有効な短期InstagramユーザーアクセストークンとInstagramテストユーザーのIDを含む、JSONエンコードされたオブジェクトがAPIから返される。
{
"access_token": "IGQVJ...",
"user_id": 17841405793187218
}
手順7:長期ユーザーアクセストークンを取得する
curl -i -X GET "https://graph.instagram.com/access_token
?grant_type=ig_exchange_token
&client_secret={instagram-app-secret}
&access_token={short-lived-access-token}"
成功すると60日有効な長期Instagramユーザーアクセストークンが返される。
例えば、
{
"access_token":"{long-lived-user-access-token}",
"token_type": "bearer",
"expires_in": 5183944 // Number of seconds until token expires
}
長期アクセストークンは有効期間内に更新可能。
curl -i -X GET "https://graph.instagram.com/refresh_access_token
?grant_type=ig_refresh_token
&access_token={long-lived-access-token}"
手順8:ユーザー(Instagramテスター )のメディアを取得する
$instaFields = 'caption,id,media_url,timestamp,permalink,thumbnail_url';
$instaToken = {long-lived-access-token}; /* 手順7で取得した長期トークン */
$instaRequestUrl = "https://graph.instagram.com/me/media?fields={$instaFields}&access_token={$instaToken}";
$instaObj = json_decode(file_get_contents($instaRequestUrl, false));
返り値
caption:メディアのキャプションテキスト
id:メディアのID
media_url:メディアのURL
timestamp:メディアの公開日付
permalink:メディアの永続URL
thumbnail_url:メディアのサムネイル画像のURL(動画のみ有効)
手順9:返り値をカスタマイズする
foreach ($insta->instaObj->data as $val) {
$media_url = $val->media_url;
if (!is_null($val->thumbnail_url)) {
$media_url = $val->thumbnail_url;
}
$url = strtok($media_url, '?');
$ext = pathinfo($url, PATHINFO_EXTENSION);
$file_name = $val->id . '.' . $ext;
$insta->saveImgByCopy('insta', $file_name, $media_url);
preg_match_all('/#[^\s#]+/', $val->caption, $tags);
}
media_url(または thumbnail_url)より、メディアを自サーバーにコピーしています。
caption よりハッシュタグを抜き出しています。タグを区別して、CSSを適用するためです。
結果
以下に実現できました。
https://www.instagram.com/web83sukiru/ (インスタ)
https://sukiru.jp/#insta (連動先)
今後はテストユーザーを増やすことで、複数ユーザーのメディアを集約するサイトを構築する予定です。
この記事が気に入ったらサポートをしてみませんか?