Instagramのタイムライン埋め込み方法。

Instagram logo

みなさんこんにちは！

エンジニアのあずまです。

Instagram埋め込み方法は、Wordpressのプラグインや、SnapWidgetを使っても可能ですが、今回はInstagram APIを使ってタイムラインを埋め込む方法を紹介します。
※SnapWidgetはタイムラインから、SnapWidgetで生成されたページにリンクするので注意が必要です。

Instagram APIについて

Instagram APIは2016年6月1日に仕様が変更され、Instagram APIをフルに使うにはInstagramの承認が必要となりました。
しかし審査が相当厳しいため、今回はSandBoxモードという機能が制限された状態で実装します。
※SandBoxモードはアプリケーション登録をすれば未承認でも使用できます。
※APIをフルで使いたい場合はアプリケーションの申請をします(今回は割愛)。

Instagram APIについての詳細はドキュメント(英語)をご確認ください。

SandBoxモードとは

Instagramのアプリケーションが未承認の場合に制限付きでAPIが使えるモードです。

  • 扱えるユーザーは10人（自分以外のユーザー写真を使うには、相手アカウントの承認が必要）。
  • 読み込めるデータは最新20件のみ。
  • APIのリクエスト制限が500/1H。

基本的に、自分のアカウントの写真と情報を最新20件まで取得できます。

埋め込み方法

1.アカウント登録

APIを使用するにはInstagramのユーザーアカウントが必要です。
スマートフォンからアプリをダウンロードしてアカウント登録を行ってください。

2.アプリケーション登録をする

developer向けページからアプリケーション登録を行います。

画面右上の「ログイン」から、用意したユーザーアカウントでログインします。

スクリーンショット Instagram ログイン画面

「Register Your Application」をクリック。

スクリーンショット Instagramアプリ登録へ

初めての方は開発者プロフィールの登録画面に進みます。
WebサイトのURLと電話番号、APIを利用する目的を入力し、API利用規約に同意の上、「Sign up」をクリック。

スクリーンショット Instagram開発者登録

次に「Register a New Client」をクリック。

スクリーンショット Instagramアプリ登録画面

 

先に「Security」タブで「Disable implicit OAuth」のチェックを外しておきます。

スクリーンショット Instagram 登録セキュリティ画面

その後「Details」タブで各項目を入力し、最後に「Register」をクリック。

入力内容は上から

  • アプリケーション名
  • アプリケーション説明
  • 会社名（未入力可）
  • WEBサイトのURL
  • 認証時のリダイレクトURL（Website URLと同じでOK）
  • 個人情報保護方針のURL（未入力可）
  • 連絡先のメールアドレス（未入力可）

です。

スクリーンショット Instagramアプリ登録画面

 

アプリの登録に成功すると、一覧画面に登録したアプリの情報が加わります。

スクリーンショット InstagramクライアントID

この内、「CLIENT ID」と「REDIRECT URL」を、使用します。

3.アクセストークンを取得

先ほど取得した「CLIENT ID」と「REDIRECT URL」を下記のURLに記述します。

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

「CLIENT ID」と「REDIRECT URL」を入れたらURLにアクセスします。
下記の画面が表示されるので「Authorize」をクリック。

スクリーンショット Instagram確認画面
「REDIRECT URL」で指定したページに遷移すると、GETにアクセストークンの値が表示されます。

こんな感じです。

「REDIRECT URL」/#access_token=●●●●●●●●●●●●●●

4.PHPでJSONデータ取得

JSでも取得できますが、アクセストークンが見えてしまい、セキュリティ上良くないのでPHPで取得します。
PHPサンプルコード


<?php
//POSTリクエストの場合のみ受付
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    //アクセストークン
    $access_token = "アクセストークンの値";
    //JSONデータを取得して出力
    echo @file_get_contents("https://api.instagram.com/v1/users/self/media/recent/?access_token={$access_token}");
    exit;
}
?>

5.JSで出力

JSサンプルコード


$(function(){
    var $container = $(".instagram");
    var html = "";
    $.ajax({
        url: "先ほどのPHPファイルのURL",
        type:"POST",
        dataType: "json"
     }).done(function(data){
     //通信成功時の処理
     $.each(data.data,function(i,item){
        var imgurl = item.images.standard_resolution.url; //画像のURLを取得
        var link = item.link; //リンクを取得
        html += "<li><a href='" + link + "' target='_blank'><img src='" + imgurl + "'></a></li>";
        if (i == 15) {
            return false;
        };
    });
    }).fail(function(){
    //通信失敗時の処理
        html = "<li>画像を取得できません。</li>";
    }).always(function(){
    //通信完了時の処理
        });
   });
});

 

あとは出力されたHTMLをCSSで整形すればOKです。

まとめ

柔軟性のある実装がAPIのメリットです。
細かなカスタマイズができますので、プラグインでは手が届かないところまで実装できます。
タイムライン埋め込み以外にもAPIを使えば様々なことができますので、ぜひInstagram APIを使ってみてください！

[HTML] カテゴリーの最新記事