まだまだ人気のSNSであるインスタグラムですが、フェイスブックやツイッターなど他のSNSと同じくタイムラインをウェブサイトに埋め込むことができます。しかし他のものと比べて実装の難易度が少し上がります。今回弊社サイトに実装することになったので、備忘録として残しておきます。

Instagram APIを使ってタイムラインの投稿写真を取得

今回はインラインのHTMLコードを直接埋め込むのではなく、インスタグラムの公式APIを利用することで、タイムラインの写真の情報をJSON形式で受け取ることによりサイトに表示できるという仕組みになります。

ただし、APIの使用にあたり、インスタグラムのデベロッパー登録やアクセストークンの取得などいくつかハードルがあります。今回は順を追って説明していきます。

また、Instagram APIは通常ですと承認が必要となり、承認を得ることで様々な機能を使えるようになるのですが、この承認はとても厳しくまず通らないだろうという噂です、、

今回は承認作業を含まず、未承認の状態で使える範囲となりますので、直近の投稿20件のみの取得になります。

デベロッパー登録とアクセストークンの取得

まずはInstagram APIを使用するためにインスタグラムのデベロッパー登録を行います。公式サイト（https://www.instagram.com/developer/）にアクセスします。ページが表示され、右上の「ログイン」からインスタグラムにログインします。ですので、インスタグラムのアカウントを持っていない場合は事前に取得しておきましょう。ログインができたら画面中央下の「Register Your Application」をクリックしてアプリ機能の登録を行います。

画面が切り替わり、登録済みのクライアント側のアプリ機能が表示されます。右上の「Register a New Client」をクリックして新規作成を行います。

クライアントIDを登録するために情報を入力していきます。まずは「Details」タブの画面から以下の最低限下記の項目を入力します。

・Application Name:（アプリ名を適宜入力）
・Description:（アプリ名の説明文を入力）
・Website URL:（埋め込みを行うウェブサイトのURL）
・Valid redirect URIs:（承認リダイレクト用のURL、ウェブサイトのURLを入れる）

項目の入力が終われば「Security」タブに切り替えます。始めにある「Disable implicit OAuth:」のチェックボックスを外しておきます。そして画像認証テキストを入力し「Register」をクリックします。

登録が完了したら、先ほどの登録済みアプリのリストに登録した内容でアプリが追加されます。ここに「CLIENT ID」が記載されているので控えておきます。

そして、下記のURLのステータスにそれぞれ「CLIENT ID」と先ほど設定した「Valid redirect URIs」の値を入れてブラウザでアクセスします。※わかりやすいように【】を入れていますが実際は【】を入れずに入力します。

https://instagram.com/oauth/authorize/?client_id=【CLIENT ID】&redirect_uri=【Valid redirect URIs】&response_type=token

URLを叩くと「This app is sandbox mode and can only be …」とアラートが表示されるので「Authorize」をクリックするとリダイレクトで設定したURLに遷移し次のようにアクセストークンが付与されているので控えておきます。

https://example.com/#access_token=********************************

PHPでJSON出力用のコードを記述する

アクセストークンが取得できたので、これで特定のユーザーの投稿記事を取得できるようになりました。色々と方法はありますが今回はPHPで取得する例を挙げていきます。

以下のコードでアクセストークンを入力し、JSONデータで取得することができるのであとはHTMLとして取得したデータをループで出力させます。

<?php
   $accessToken = '************************************';
   $json = file_get_contents('https://api.instagram.com/v1/users/self/media/recent/?access_token='.$accessToken);
   $obj = json_decode($json);
   echo '<ul>';
   foreach($obj->data as $data){
     echo '<li><img src="'.$data->images->low_resolution->url.'" alt="instagram_photo"></li>';
   }
   echo '</ul>';
?>

これでサイトにタイムラインとしてインスタグラムで投稿した写真が表示されるようになります。あとはサイトデザインに合わせて整えていきます。実際にデザインしていくのはこちらの記事「InstagramAPIで作成したタイムラインをデザインしてみる」で見ていきたいと思います。

次回記事「Instagram APIで取得できるJSONからいろんな情報を表示する」では取得したJSON内のデータを活かしたカスタマイズをしてみます。

（参考にさせて頂いたサイト様）
Instagramのタイムライン埋め込み方法。

Instagram APIを使ってWEBサイトに写真を表示させてみよう