WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： トレンド >TIPS

最近よく目にする、Instagramの写真を自分のWebサイトに表示させておしゃれな見せ方をしているサイトや、キャンペーンサイトなどでハッシュタグを使って投稿された写真を集めて表示するなど、様々な用途にInstagramが使われていたりします。

しかしInstagramAPIが2016年6月に仕様が変更され、InstagramAPIの機能を全て使うためにはInstagramの承認が必要になり、気軽に使用することが難しくなりました。
承認までの審査が厳しいとされているため、現在Sandbox Mode（サンドボックスモード）が案内されています。
Sandbox Modeとは、使用できる機能に制限はあるものの、Instagramからの承認なしにAPIを使用することが出来るモードのことです。
それでは、Sandbox ModeでのInstagramの投稿写真をWebサイトに表示させる方法を解説していきます。

Sandbox Modeで出来ることは？

Sandbox Modeは未承認でも使用する事はできますが、いくつか制限があるので全ての機能は使えません。

Sandbox Modeでの制限

以下使用できることです。

• 他アカウントの投稿写真を表示する場合、そのユーザは10人まで（自分以外のユーザ写真を使う場合、相手のアカウントの承認が必要です。）
• 読み込めるデータは最新20件のみ。（「もっと見る」などの写真の読み込みは不可能）
• APIのリクエスト制限が1時間に500リクエストまで。

自分のアカウントや、クライアントのアカウントに限定して最新の画像を表示するといった利用には上記でも十分利用できそうですが、キャンペーンサイトや大量の写真を使用するサイトには不向きですね。

Sandbox Modeを利用して、サイトにInstagramの写真を表示させてみよう

1.Instagram API(Sandbox Mode)の取得手順です。

Instagram Developerにアクセスして、使用するInstagramのアカウントでログインをします。

ログインが完了したら、「Register Your Application」をクリックします。

2．次に開発者プロフィールを登録していきます。

サイトURL、電話番号、利用目的を入力します。利用規約の同意にチェックして「Sign up」をクリックします。

3.再び1の画面に戻るので、「Register Your Application」をクリックして、切り替わったページから「Register a New Client」をクリックします。

4.各項目を入力していきましょう。
Valid redirect URIsはWebsite URLと同じで問題ありません。
Privacy Policy URLとContact emailは未入力でOK。

5．Securityのタブに切り替えて、「Disable implicit OAuth」のチェックを外し、「Register」をクリックします。

6.これでSandbox ModeでCLIENT IDの取得が完了です。

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

アクセストークンとは、APIを利用するユーザーを、Instagram側が確認・認識するために発行される認証情報の事です。

次のURLの前半の******の部分に先ほど取得した「CLIENT ID」
後半の******の部分に設定した「Valid Redirect URIs（各項目入力の際に入力した、認証後に表示させるWebサイトのURLの事です）」を入力してアクセスします。

https://instagram.com/oauth/authorize/?client_id=******&redirect_uri=******&response_type=token

表示が切り替わるので「Authorize」をクリックします。

リダイレクトされたページのURLにGETされたアクセストークンが表示されているので、保存しておきましょう。

Instafeed.jsを読み込む

1．Instafeed.jsにアクセスします。githubからダウンロードしていきましょう。

2．ダウンロードされたフォルダ内の「instafeed.min.js」をjquery本体とともにhead内に読み込みます。
※適宜、フォルダの階層等は制作したサイトに合わせてください。

<script src="http://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script type="text/javascript" src="common/js/instafeed.min.js"></script>

次にhead内にjQueryのコードを記述します。

<script>
$(document).ready(function() {
    var feed = new Instafeed({
        get: 'user',
        userId: 'アクセストークンの.より前の部分',
        accessToken: 'アクセストークン',
        sortBy:'most-recent',
        links: true ,
        limit: 20,
        resolution: 'low_resolution',
        template: '<li><a href="{{link}}" target="_blank" /><img src="{{image}}"></a></li>'
    });
    feed.run();
});
</script>

最後にhtmlのbody内に表示させるタグを記述します。

<ul id="instafeed"></ul>

写真を表示させたい部分にid=”instafeed”の記述を入れれば、その領域内にInstagramに投稿された写真が表示されます。これで、全ての設定が完了です。

自分のサイトに表示させてみたものがこちらになります。

現在Instagramに3枚投稿しているので、写真が3枚出ています。
見た目などはCSSで整えています。

写真をクリックするとInstagramのサイトに写真が表示されるようリンクがつながっています。

まとめ

Sandbox Modeを利用する事で、難しい審査は無く、WebサイトにInstagramの写真を表示させる事ができました。
Sandbox ModeとInstafeed.jsによる組み合わせで、ぜひご自身のWebサイトにも利用してみてください。