WEB制作

2017-01-19(Thu)

Atsuko

Instagram APIを使ってWEBページにインスタグラムの画像を表示する

こんにちは、先日甥っ子&娘とマインクラフトをやって、破壊の限りを尽くされたカトです。

337909

今日はInstagram APIを使ってWEBページにインスタグラムの画像を表示する方法を紹介します。

まずはAPIを使うためにInstagram Developerに登録します。

APIの機能をフルで使うには審査に通らないといけないので、今回は審査に通らなくても使用できるSandBoxモードでやります。
SandBoxモードでは最新20件までのデータを取得できます。

今回必要な情報

  • CLIENT ID
  • ACCESS_TOKEN
  • REDIRECT URL

ACCESS_TOKENを取得します。

ブラウザで以下にアクセス

https://instagram.com/oauth/authorize/?client_id=【CLIENT ID】&redirect_uri=【REDIRECT URL】&response_type=token

何やら画面が表示されたら【Authorize】をクリック

ブラウザのURLボックスに【ACCESS_TOKEN】が表示されます。
actoken

※エラーが表示される場合、以下のチェックを外してください。
actoken2

あとはAPIを呼び出して表示するだけです。

呼び出すアドレスは以下です。

https://api.instagram.com/v1/users/self/media/recent/?access_token=【ACCESS_TOKEN】

PHPで表示する場合のコード

	define("INSTAGRAM_ACCESS_TOKEN", "【ACCESS_TOKEN】");
	$result = json_decode(@file_get_contents('https://api.instagram.com/v1/users/self/media/recent/?access_token='.INSTAGRAM_ACCESS_TOKEN));
	$instadata = $result->data;

	foreach ($instadata as $value) {
		echo '<img src="'.$value->images->thumbnail->url.'" />';
	}

画像のサイズは3種類、【thumbnail】【low_resolution】【standard_resolution】が用意されています。

試しに私のインスタグラムを表示してみました。

以上、興味があればやってみてください! ではまたノシ


このブログを書いた人

Atsuko

実はJavascriptとか会社入るまでやったことなかったことは内緒です。
酉年生まれのせいか、話を聞いても三歩あるけば忘れます。

最近書いた記事

関連する記事