Instagram APIとプラグイン「jquery-instagram」を使ってウィジェットを作る

Instagram APIとプラグイン「jquery-instagram」を使ってウィジェットを作る

Instagram APIでデータを取得し、jQueryプラグイン「jquery-instagram」を使ってウィジェットを作成します。

Instagram Developerへの登録、jQueryプラグインのダウンロード、設置の順に作業をしていきます。

Instagram Developerへの登録

Instagram APIを使うにはInstagram Developerへの開発者登録とアプリケーションの登録が必要です。

Instagram Developerへアクセスして「Register Your Application」をクリックします。

「Register Your Application」をクリック

こちらが開発者登録フォームです。記入して「登録」をクリックします。
英語というだけでもドキドキしているのに、電話番号の入力欄があってさらに不安になります。。ちょろっと検索してみたところ、「別に電話がかかってくるわけではない」と書いている方がいてちょっと安心。APIで何を作るかを記入する欄には英語で記入している方もいましたが、左側のメニューは日本語混じりなので、私は日本語で記入してしまいました。

こんな感じで記入しました

開発者登録を終えると最初のページへ戻ってきました。
次はアプリケーションの登録をしてClient IDを取得します。「Register Your Application」をクリックします。

また「Register Your Application」をクリック

アプリケーションの管理ページで「新しいアプリを登録」をクリックします。

「新しいアプリを登録」をクリック

アプリケーションを登録するために、アプリケーションの名前と説明、サイトのURLなどを入力していきます。
「Website」と「OAuth redirect_uri」にはウィジェットを設置予定のURLを記入しました。「Disable implicit OAuth」には元々チェックが入っていましたが、このあとの認証作業がうまくいかなかったのでチェックを外しています。
どの項目も後で修正可能なので、よく分からない箇所はそのままで登録でもよさそうな気がします。。
最後に、ページ下部にあるCAPTCHA認証に入力をし「Register」ボタンをクリックします。

「Register」ボタンをクリック

アプリケーションの登録が完了し、Client IDが発行されました。

アプリケーションの登録完了

これでInstagram APIを使う準備は整いました。

ダウンロード

こちらからプラグイン「jquery.instagram.js」をダウンロードします。

最新版はpotomak/jquery-instagram · GitHubなのですが、最新バージョンではうまくいかなかったので、古いバージョンを使いました。

設置方法

<head>内でjQuery本体とダウンロードした「jquery.instagram.js」を読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.instagram.js"></script>

続けて、表示させたい画像や数を指定します。
以下の記述では任意のハッシュタグが付いた画像を5つ呼び出します。

ウィジェットを設置したい場所に以下を記述したらOKです。

ハッシュタグの他に、位置情報で検索した結果を表示することもできるようです。
詳しくは配布サイトをご確認ください。

自分のアカウントの写真を表示するには

以下のようにアクセストークンとユーザーIDを読み込ませると自分のアカウントの写真が表示されるウィジェットを作ることができます。

アクセストークンとユーザーIDの取得方法についてはこちらに記載があります。

アプリケーション登録時に取得したClient IDとRedirect URIを使ってアクセストークンを取得します。
以下のURL内の【Client ID】と【Redirect URI】にそれぞれの値を入れ、ブラウザのアドレスバーに入力してエンターキーを押します。

https://instagram.com/oauth/authorize/?client_id=【Client ID】&redirect_uri=【Redirect URI】&response_type=token

以下の画面が表示されるので「Authorize」をクリックします。
アプリケーション登録時に「Disable implicit OAuth」にチェックを入れているとこの認証作業がうまくできませんでした。

「Authorize」をクリック

ブラウザが「Redirect URI」に指定したページに切り替わり、アドレスバーに以下の表記が表示されます。
「access_token=」以降がアクセストークン、「access_token=」からピリオドまでがユーザーIDです。以下の例だと、アクセストークンが「XXXXXXXXX.9999999999999999999999999999999999999999」、ユーザーIDが「XXXXXXXXX」となります。

【Redirect URI】/#access_token=XXXXXXXXX.9999999999999999999999999999999999999999

参考サイト

Instagram API を jQuery で表示させる『jquery-instagram』

下のボタンを押すと拍手送信＆メッセージフォームが開きます。→WEB拍手お返事

関連記事