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

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

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

どもです。

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="<?php echo $photo->link; ?>" class="link">
		<span class="image"><img src="<?php echo $photo->images->standard_resolution->url; ?>"></span>
		<span class="title"><?php echo $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="<?php echo $photo->link; ?>" class="link">
		<span class="image"><img src="<?php echo $photo->images->standard_resolution->url; ?>"></span>
		<span class="title"><?php echo $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から始まる情報を取得できない]

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