Instagram APIでインスタグラムのタイムラインをサイト内に実装する | 大阪市天王寺区SOHOホームページ制作 | デザインサプライ-DesignSupply.-
0%

Programmingプログラミングナレッジ

Posted:2018.01.09

Instagram APIでインスタグラムのタイムラインをサイト内に実装する

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

 

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

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

 

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

 

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

 

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

 

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

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

 

Instagram APIでインスタグラムのタイムラインをサイト内に実装する

 

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

 

Instagram APIでインスタグラムのタイムラインをサイト内に実装する

 

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

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

 

Instagram APIでインスタグラムのタイムラインをサイト内に実装する

 

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

 

Instagram APIでインスタグラムのタイムラインをサイト内に実装する

 

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

 

Instagram APIでインスタグラムのタイムラインをサイト内に実装する

 

そして、下記の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サイトに写真を表示させてみよう

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】