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

2012.11.18 Category:jQuery Tag:jQuery

プラグインを使わずに表示させる方法をいろいろと模索していたところ、Instagram API を jQuery で動かせるようにしてくれているものを発見！

いろいろな結果を出力してくれるので、自分の写真だけでなくタグやロケーションなどから検索して表示してくれます。

デモを作りました。

対応ブラウザ Google Chrome / Safari / Firefox　/ Opera / InternetExplorer

DEMO

まず、その前にこのInstagram APIを使うには、アプリケーションの登録が必要になりますので、登録方法から説明したいと思います。

アプリケーションの登録

以下のリンクからinstagramの開発者登録を行い、アプリケーションを登録します。

instagram developer

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

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

各項目を入力し、緑のRegisterボタンを押せば完了です。

完了すると以下の項目が表示されます。

CLIENT ID
CLIENT SECRET
WEBSITE URL
REDIRECT URI

今回必要なのは、「CLIENT ID」になりますので、忘れずにメモしておいてください。

以上で、完了です。では、今日の本題『jquery-instagram』へいきます。

『jquery-instagram』

GitHubはこちらから

GitHub：GitHub：『jquery-instagram』

使い方

上記サイトからダウンロードした jquery.instagram.js を読み込みます。

一緒にjQueryからjquery-1.4.2.min.js を読み込みます。

<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script src="ファイルのURL/jquery.instagram.js"></script>

1 2	<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script src="ファイルのURL/jquery.instagram.js"></script>

続けて、（タグで検索表示させたい場合）

<script>
$(document).ready(function() {
$(“.instagram”).instagram({
hash: ‘任意のハッシュタグ 例）cat’,
show: 5, //表示させる数
clientId: ‘あなたのクライアントID’
});
});
</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

<script>
$(document).ready(function() {
$(“.instagram”).instagram({
accessToken: "あなたのaccessToken",
userId: "あなたのID", 
show: 5, //表示させる数
clientId: ‘あなたのクライアントID’
});
});
</script>