プラグインを使わずに表示させる方法をいろいろと模索していたところ、Instagram API を jQuery で動かせるようにしてくれているものを発見!
いろいろな結果を出力してくれるので、自分の写真だけでなくタグやロケーションなどから検索して表示してくれます。
デモを作りました。
まず、その前にこのInstagram APIを使うには、アプリケーションの登録が必要になりますので、登録方法から説明したいと思います。
アプリケーションの登録
以下のリンクからinstagramの開発者登録を行い、アプリケーションを登録します。

上記赤枠のところRegister Your Applicationをクリックすると

この画面が出てくると思いますので、こちらの右上にある緑の Register New Clientボタンをクリックします。

各項目を入力し、緑のRegisterボタンを押せば完了です。
完了すると以下の項目が表示されます。
- CLIENT ID
- CLIENT SECRET
- WEBSITE URL
- REDIRECT URI
今回必要なのは、「CLIENT ID」になりますので、忘れずにメモしておいてください。
以上で、完了です。では、今日の本題『jquery-instagram』へいきます。
『jquery-instagram』

GitHubはこちらから
使い方
上記サイトからダウンロードした jquery.instagram.js を読み込みます。
一緒にjQueryからjquery-1.4.2.min.js を読み込みます。
1 2 |
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script src="ファイルのURL/jquery.instagram.js"></script> |
続けて、(タグで検索表示させたい場合)
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function() { $(“.instagram”).instagram({ hash: ‘任意のハッシュタグ 例)cat’, show: 5, //表示させる数 clientId: ‘あなたのクライアントID’ }); }); </script> |
と、記述します。
clientId:のところは、先程取得したCLIENT IDを記述します。
使えるパラメーターは以下のとおり
- hash
- userId
- locationId
- search
- accessToken
- clientId
- show
- onLoad
- onComplete
- maxId
- minId
- next_url
- image_size
自分の写真を取得する
自分の写真を取得するには、上記のパラメーターの中で以下のモノを使用します。
- userId
- accessToken
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function() { $(“.instagram”).instagram({ accessToken: "あなたのaccessToken", userId: "あなたのID", show: 5, //表示させる数 clientId: ‘あなたのクライアントID’ }); }); </script> |
userId と accessToken を知るには、先ほどの
instagram developerこちらの左メニューのところの、Endpointsを開くと自分のID等知ることができます。
その他の詳しいことなどは、GitHub上でのReadMeに記載されていますのでそちらを参照してください。
以上で設置は、終わりです。あとは、CSSを使って装飾すればすてきなギャラリーが出来上がり。