ど素人から毛を生やす。<延>

Instagramで投稿した画像をAPIを使って取得・表示するまで

Web > PHP 2016年5月11日(最終更新:4年前)

2016年5月11日に作成されたページです。
情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。

どもです。

Instagramとウェブサイトの同期、というのは今どき結構需要があったりします。
単にInstagramに投稿した写真を並べるだけであれば、公式APIの必要は無い、そうなのですが、
こういった見た目にしたいとか、こういう情報が欲しいとか、やり始めれば必ずカスタマイズしたくなるものです。

ので、APIを利用した取得と表示の仕方をば。

アクセストークンを取得する

APIを利用するには、「アクセストークン」というものが必要になります。
これの取得の仕方ですが、

h280511

Instagramにログインすると、フッターのメニューに「API」へのリンクがあるのでこちらをクリック。
するとAPI開発画面に移れます。
が、
全部英語です。ご注意。

取り敢えず、目立つところにあるこちらのボタンをクリック。
Register Your Application

プロフィール等の登録画面に移ります。
適当に入力して利用規約に同意。これで開発者として登録されました。

開発者登録が終わると、先ほどの画面に戻されます。
このとき、もういちど先のボタンをクリックすると、「Manage Clients」というページに行けます。
「Register a New Client」のボタンをクリックすると、またも色々登録する画面が。

h280511_3
こちらは、アプリ単体の初期設定です。
これを登録することで、漸くアクセストークンが使用できるようになります。

Application Name アプリの名前(管理画面上の表示なので何でもおk)
Description 概要(管理画面上の表示なので何でもおk)
Website URL 使用するサイトURL
Valid redirect URIs リダイレクトURL(基本的にサイトURLと同じで良い)

項目は色々ありますが、取り敢えず上記必須項目とbot回避の認証が入力されていればおk。

登録が完了したら、「Client ID」と「Client Secret」なるものを取得できます。
これの「Client ID」と、先ほど設定した「Valid redirect URIs」が、アクセストークンを取得するために必須のアイテムです。

新規タブを開き、以下のURLの【】を取得したデータに置き換えます(括弧含む)。

https://instagram.com/oauth/authorize/?client_id=【Client ID】&redirect_uri=【Valid redirect URIs】&response_type=token

エラーが発生しなければ、下のような画面が出ます。

h280511_4

ここは何も考えずに「Authorize」をクリック。
余計なことをすると後のエラーの元です。詳しくは後述のエラーコード400を参照。

http://××××××××/#access_token=【アクセストークン】

リダイレクト先のURLに飛び、URL表示がこのようになっています。
このアクセストークンを取得。これでやっとデータの取得が行えます。

データを取得する

アクセストークンの確認

https://api.instagram.com/v1/users/search?q=【ユーザーアカウント名】&access_token=【アクセストークン】

こちらを新規タブに入力し、エラーが発生せずデータが取得できたらおk。

ユーザーのデータを取得する

今回は自身の投稿したデータを取得するのが目的なので、データ取得のため自身のIDを取得します。

$user_api_url = 'https://api.instagram.com/v1/users/search?q=' . $user_account . '&access_token=' . INSTAGRAM_ACCESS_TOKEN;
$user_data = json_decode(@file_get_contents($user_api_url));
foreach ($user_data->data as $user_data) {
	if ($user_account == $user_data->username) {
		$user_id = $user_data->id;
	}
}

$user_dataが取得できない場合、
ページにアクセス制限がかかっていたり、PHPの設定が原因の場合があります(エラー対処参照)。

また、このユーザーアカウント名検索はlike検索らしく、
複数のアカウントデータを引っ張ってきてしまう可能性があるので、
ユーザー名を正確に照合し、該当の配列のみ取得します。

ユーザーデータが取得できたら、今度こそユーザーデータに基づき投稿画像を取得します。

$photos_api_url = 'https://api.instagram.com/v1/users/'.$user_id.'/media/recent?access_token=' . INSTAGRAM_ACCESS_TOKEN . "&count=取得件数";
$photos_data = json_decode(@file_get_contents($photos_api_url));
foreach ($photos_data->data as $photo) {
	//投稿単体
}

これで漸くデータ取得が完了です。

データを表示する

「echo $photo->表示したいデータ」で、画像URL・テキストなどを表示させることができます。
代表的なものは以下。

$photo->images->standard_resolution->url 画像URL
$photo->link 投稿ページURL
$photo->caption->text キャプションテキスト

表示例はこんな感じ。

<li>
	<a href="<?= $photo->link ?>" class="link">
		<span class="image"><img src="<?= $photo->images->standard_resolution->url ?>"></span>
		<span class="title"><?= $photo->caption->text ?></span>
	</a>
</li>

$photos_api_urlの内容をURLに入力すると、取得できる配列の内容を見ることができますので、
他に欲しい情報がありましたら参照してみてください。

まとめ

<?php
/* 可変箇所 ****************************************************************************************/
//アクセストークン 
define("INSTAGRAM_ACCESS_TOKEN", "××××××××××××××××××"); 

// ユーザアカウント名 
$user_account = '×××××××'; 

// 取得件数
$count = ××;
/**************************************************************************************** 可変箇所 */
$photos = array();

// ユーザアカウント名からユーザデータを取得する。 
$user_api_url = 'https://api.instagram.com/v1/users/search?q=' . $user_account . '&access_token=' . INSTAGRAM_ACCESS_TOKEN; $user_data = json_decode(@file_get_contents($user_api_url)); 
// 取得したデータの中から正しいデータを選出 
foreach ($user_data->data as $user_data) {
	if ($user_account == $user_data->username) {
		$user_id = $user_data->id;
	}
}

// 特定ユーザの投稿データ最新××件を取得する
$photos_api_url = 'https://api.instagram.com/v1/users/'.$user_id.'/media/recent?access_token=' . INSTAGRAM_ACCESS_TOKEN . "&count=".$count;
$photos_data = json_decode(@file_get_contents($photos_api_url));

foreach ($photos_data->data as $photo) {
?>

<li>
	<a href="<?= $photo->link ?>" class="link">
		<span class="image"><img src="<?= $photo->images->standard_resolution->url ?>"></span>
		<span class="title"><?= $photo->caption->text ?></span>
	</a>
</li>

<?php } ?>

参考サイト:LIG.inc[Instagram APIを取得してWebサイトと連携し、投稿写真を自動に掲載する方法]

エラー対処

“code”: 403

OAuthForbiddenException”, “error_message”: “You are not a sandbox user of this client

Instagramのアプリ編集画面>Securityにある2つのチェックボックスのチェックを外す。
デフォルトだと、上にチェックが入っているが、この状態でもできるかもしれない。

“code”: 400

This request requires scope=public_content, but this access token is not authorized with this scope. The user must re-authorize your application with scope=public_content to be granted this permissions.

アクセストークン取得ページ(「Authorize」を押す画面)を正しく通していない。
該当のページを通さないとアクセストークンは取得できないが、正常に通せていなくてもアクセストークンの取得ができてしまう。この場合、アクセストークンが正常に働かずにエラーになる。
具体的にはページ翻訳アプリを使用したなど、ページが保有する値を変更してしまう可能性のある動作。これらを行わず、ページを早々に抜けるのが安全。

file_get_contentsでデータを取得できない

PHPの設定が原因の可能性がある。
調べた限りphp.iniの設定にて、
「allow_url_fopen=On」に変更する、
「extension=php_openssl.dll」を追加するなどがあったが、僕の遭遇したケースではどちらもクリアしていた。
原因はわからず終いだったが、複数PHPを積んでいるサーバーであったのでPHPのバージョン変更をしたところ解決。
(参考サイト:helog[file_get_contentsでhttpsから始まる情報を取得できない]

この記事は役に立ちましたか?
  • (`・ω・´) 役に立った (1)
  • _(:3」∠)_ 面白かった (2)
  • (・∀・) 参考になった (2)