CoComina– Web design and Programing –

Instagram Developersでアプリ登録

まずはこれですね。Instagram Developersでアプリを作成します。

「Register Your Application」をクリックします。

• Application Name：このアプリケーションの名前
• Description：このアプリケーションの説明
• Conmpany Name：会社名
• Website URL：URLを入力
• Valid redirect URIs：トークンなどを取得するときに使用するURL有効なURLを入力しておきましょう
• Contact email：連絡用メールアドレス
• Type the words above：キャプチャに表示されている英数字を入力

上記を入力したら「Register」をクリックして次に進みます。

下記の画像のようにClient IDなどが表示されていればアプリの登録が完了です。次に進みましょう。

User IDを取得する

アプリケーションの登録が終わったら次にユーザーIDを取得します。

https://smashballoon.com/instagram-feed/find-instagram-user-id/ のサイトに行きInstagramのユーザー名を入力します。

すると下記画像のようにユーザーIDを表示してくれます。便利ですね！

ユーザーIDは後ほどWebサイトに表示する時に必要になりますので控えておきましょう。

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

今度はアクセストークンを取得します。

アクセストークンの取得方法はとてもシンプルです。下記URLの必要な箇所を変更し、アクセスするだけでトークンを返してくれます。

https://instagram.com/oauth/authorize/?client_id=[Client ID]&redirect_uri=[REDIRECT-URL]&response_type=token

• [Client ID]：アプリケーション登録後に表示されたクライアントIDに置き換え
• [REDIRECT-URL]：アプリケーション登録時に「Valid redirect URIs」に設定したURL

次の画面が表示されたら「Authorize」クリック

うまくトークンが取得できると下記のようにURLが返ってきますので、
#access_token後の英数字をメモしておきましょう。

http://example.com/#access_token=3166329560.69469a6.f646b26cfa9f4b41bab1f270523a0352

※エラーが出た場合は「Security」→「Disable implicit OAuth:」のチェックを外して再度トライしてください。（取得後は再度チェックを入れてください）

Webサイトに表示する

Instagram APIからデータを取得し、JSON形式になっいるのでオブジェクトに変換して出力します。

<?php
	/* User ID, Token */
	$instagramUserID = 123456789;
	$instagramToken  = '3166329560.69469a6.f646b26cfa9f4b41bab1f270523a0352';

	/* Get API ( Require HTTPS ) JSON Convert */
	$instagramApiURI    = 'https://api.instagram.com/v1/users/'.$instagramUserID.'/media/recent?access_token='.$instagramToken.'&count=10';
	$instagramDates = json_decode(file_get_contents($instagramApiURI));

	/* Loop Start */
	foreach((array) $instagramDates->data as $instagramData):
?>
	<div class="box">
		<a href="<?php echo $instagramData->link; ?>" target="_blank">
			<div class="image">
				<p><img src="<?php echo $instagramData->images->standard_resolution->url; ?>" alt="<?php echo str_replace(PHP_EOL, '', $instagramData->caption->text); ?>"></p>					
				<p class="date"></p>
			</div>
			<div class="text">
				<dl>
					<dt><span class="label">Profile Image</span></dt>
					<dd><img class="user_image" src="<?php echo $instagramData->user->profile_picture; ?>"></dd>
					<dt><span class="label">User Name</span></dt>
					<dd><?php echo $instagramData->user->username; ?></dd>
					<dt><span class="label">Full Name</span></dt>
					<dd><?php echo $instagramData->user->full_name; ?></dd>
					<dt><span class="label">URL</span></dt>
					<dd><?php echo $instagramData->link; ?></dd>
					<dt><span class="label">Caption</span></dt>
					<dd><?php echo nl2br($instagramData->caption->text); ?></dd>
				</dl>
			</div>
		</a>
	</div>
	<!-- /.box -->
<?php endforeach; ?>

Example Link

いろいろなデータが取得できますね。

ただし、Instagram APIには制限があり、Sand boxモードの状態では全ての画像を取得することはできません。

• 取得できるメディアの件数は20件まで
• ハッシュタグなどでの絞り込みはできない

などなど、いろいろ制限があります。申請して審査をクリアすれば制限が突破できるようです。

最後に1つ豆知識というほどではないですが、Instagramは画像と動画をアップできますので
メディアタイプによって条件分岐する方法も記載しておきます。メディアタイプごとに条件分岐できればHTMLタグの出しわけができるのでより柔軟に扱えるかと思います。

<?php if($instagramData->type == 'video'): ?>
　〜ここに動画の時の記述〜
<?php else: ?>
　〜ここに静止画の時の記述〜
<?php endif; ?>

ブログなどに組み込めば、「更新した記事とInstagramにアップした画像」の両方が表示されるので、
更新頻度が上がり、ユーザーに飽きられないサイトを作れそうですね。

最後までお読みいただきありがとうございます。