Instagramしてますか?
僕も更新頻度は少ないですが流行りに乗っかってやってます。→@tsukasachinen
さて、今回はInstagram APIを使用してInstagramの画像をWebサイトに表示する方法をご紹介します。
まずはサンプルをどうぞ。
Instagram Developersでアプリ登録
まずはこれですね。Instagram Developersでアプリを作成します。
「Register Your Application」をクリックします。
- Application Name:このアプリケーションの名前
- Description:このアプリケーションの説明
- Conmpany Name:会社名
- Website URL:URLを入力
- Valid redirect URIs:トークンなどを取得するときに使用するURL有効なURLを入力しておきましょう
- Contact email:連絡用メールアドレス
上記を入力したら「Register」をクリックして次に進みます。
下記の画像のようにClient IDなどが表示されていればアプリの登録が完了です。次に進みましょう。
アクセストークンを取得する
今度はアクセストークンを取得します。
アクセストークンの取得方法はとてもシンプルです。下記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:」のチェックを外して再度トライしてください。(取得後は再度チェックを入れてください)
User IDを取得する
アプリケーションの登録が終わったら次にユーザーIDを取得します。
User IDの取得とても簡単で下記のURLの[Access Token]の箇所を変更してブラウザで直接アクセスすればOKです。
https://api.instagram.com/v1/users/self/?access_token=[Access Token]
すると下記のようなJSON形式でデータが返ってきます。
JSONデータの最初のIDの値がUser IDですので(この場合、3166329560)控えておきましょう
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; ?>
いろいろなデータが取得できますね。
ただし、Instagram APIには制限があり、Sand boxモードの状態では全ての画像を取得することはできません。
- 取得できるメディアの件数は20件まで
- ハッシュタグなどでの絞り込みはできない
などなど、いろいろ制限があります。申請して審査をクリアすれば制限が突破できるようです。
最後に1つ豆知識というほどではないですが、Instagramは画像と動画をアップできますので
メディアタイプによって条件分岐する方法も記載しておきます。メディアタイプごとに条件分岐できればHTMLタグの出しわけができるのでより柔軟に扱えるかと思います。
<?php if($instagramData->type == 'video'): ?> 〜ここに動画の時の記述〜 <?php else: ?> 〜ここに静止画の時の記述〜 <?php endif; ?>
ブログなどに組み込めば、「更新した記事とInstagramにアップした画像」の両方が表示されるので、
更新頻度が上がり、ユーザーに飽きられないサイトを作れそうですね。
最後までお読みいただきありがとうございます。