PHP｜インスタとサイトを連動する

2023年2月1日 15:31

こんにちは。フリーランスのウェブやさんです。自サイトにインスタグラムを埋め込みました。ひと手間加えて、画像、キャプション、ハッシュタグそれぞれに、オリジナルのスタイルシートを適用しています。インスタデータを取得するための手順と、取得データのカスタマイズメモを紹介します。

開発に必要なもの　／　今回使用したもの

Facebook開発者アカウント　／　（非公開）
Instagramアカウント　／　web83sukiru
連動対象のウェブサイト　／　https://sukiru.jp/
コマンドラインツール　／　Mac：ターミナル

手順１：Meta for Developer でアプリを登録する

［アプリを作成］を選択

アプリタイプ「なし」を選択し、［アプリ名］を追加　／　アプリ名：sukiru

ダッシュボードに遷移するので、［設定］＞［ベーシック］より必要項目を設定し、下部より［プラットフォームを追加］

［プラットフォームを選択］で［Website］を選択し、連動対象のURLを設定　／　https://sukiru.jp/

手順２：Instagram Basic Display を設定する

［ダッシュボード］＞［Instagram Basic Display］＞［設定］＞［Create　New App］

必要項目を設定

手順３：Instagramテスターを追加（招待）する

手順２画面下部［ユーザートークンジェネレーター］＞［Add Instagram Testers］

［Instagramテスターを追加］に対象アカウントを入力し招待　／　web83sukiru

手順４：Instagramテスターの招待を承認する

手順３で招待したInstagramアカウントにサインイン。
（プロフィールアイコン）＞［プロフィールを編集］＞［アプリとウェブサイト］＞［テスターの招待］より招待を承認。

手順５：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*******#_

手順６：認証トークンを取得する

ターミナルで次の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} は、手順５の画面より確認。
{code} に手順５で取得した認証コードを用いる。

例えば、

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*******

成功すると、１時間有効な短期InstagramユーザーアクセストークンとInstagramテストユーザーのIDを含む、JSONエンコードされたオブジェクトがAPIから返される。

{
  "access_token": "IGQVJ...",
  "user_id": 17841405793187218
}

手順７：長期ユーザーアクセストークンを取得する

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}"

成功すると６０日有効な長期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}"

手順８：ユーザー（Instagramテスター）のメディアを取得する

$instaFields = 'caption,id,media_url,timestamp,permalink,thumbnail_url';
$instaToken = {long-lived-access-token}; /* 手順７で取得した長期トークン */

$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（動画のみ有効）

手順９：返り値をカスタマイズする

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　（連動先）

今後はテストユーザーを増やすことで、複数ユーザーのメディアを集約するサイトを構築する予定です。

この記事が気に入ったらサポートをしてみませんか？