Web制作

Instagram APIを使って自分の投稿をウェブサイトで表示する

Instagram APIをフルに使うにはInstagramの審査に通って承認されなければならない。
未承認の場合は自分のデータしか取得できない。
ハッシュタグ等で他人のデータを取得する等、自分以外のデータを取得したい場合は承認が必要。
審査がかなり厳しいらしい。

Sandbox Mode

未承認の場合は、Sandbox ModeでAPIを利用することができる。
自分のデータだけ取得したいならこれでじゅうぶん。

記事執筆時点で、Sandbox Modeで取得できる情報は以下の通り。

・自分のプロフィール画像
・ユーザーネーム
最新20件の投稿の、
・画像(3つのサイズ、URL)
・キャプション
・タグ
・タグ付けしたユーザー
・いいね数
・コメント数
・位置情報(lat,lng,地点名)
・投稿URL
・使用フィルター

それでは本題の Instagram APIを使って自分の投稿をウェブサイトで表示する方法。

アプリ登録

Instagramにログインした状態で
https://www.instagram.com/developer/ にアクセスし、
Resigter Your Application をクリック

Register a New Client をクリック

Security タブをクリックし、
Disable implicit OAuth: をチェックを外す。
外したら Details タブをクリック。

必要な項目を埋め、Register をクリック。

Application Name アプリ名 ※必須
Description 説明 ※必須
Company Name 会社名
Website URL ウェブサイトのURL ※必須
Valid redirect URIs ウェブサイトのURLと同じ ※必須
Privacy Policy URL プライバシポリシーのURL
Contact email 連絡先メールアドレス

登録完了。

アクセストークンの取得


https://api.instagram.com/oauth/authorize/?client_id=ここにCLIENT-IDをいれる&redirect_uri=ここにREDIRECT-URIをいれる&response_type=token

アプリ登録完了後に表示されたCLIENT IDと、
Valid redirect URIsで入力したものを上記に入れて、
ブラウザからアクセスする。

Autorize をクリック。


「Valid redirect URIs」/#access_token=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

リダイレクト後のアドレスバーを確認する。
access_token=のあとの文字列がアクセストークン。


https://api.instagram.com/v1/users/self/media/recent?access_token=アクセストークン

上記で自分のアカウントのデータをJSON形式で取得できる。

画像をページに表示させる

jsで画像を表示させても良いが、アクセストークンが丸見えになるため、phpで処理する。


<?php 
$token = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
$instagram_data = 'https://api.instagram.com/v1/users/self/media/recent?access_token='.$token;
$objects = json_decode(file_get_contents($instagram_data));
if( $objects ): ?>
	<ul>
	<?php foreach ( $objects->data as $object ):
		$img_thumb = $object->images->thumbnail->url;
		$img_low   = $object->images->low_resolution->url;
		$img_std   = $object->images->standard_resolution->url;
		$caption   = $object->caption->text;
		$like      = $object->likes->count;
		$comment   = $object->comments->count;
		$url       = $object->link;
	?>
		<li>
			<a href="<?php echo $url; ?>">
				<div class="img"><img src="<?php echo $img_std; ?>" alt=""></div>
				<div class="areaTxt">
					<p><?php echo $caption; ?></p>
				</div>
				<div class="areaCount">
					<p>いいね:<?php echo $like; ?></p>
					<p>コメント:<?php echo $comment; ?></p>
				</div>
			</a>
		</li>
	<?php endforeach; ?>
	</ul>
<?php endif; ?>

欲しいデータだけ抜き出して変数に格納する。
あとはCSSやjsでイイカンジに。