大学生必見!確定申告でアルバイト代の税金を取り戻す方法

[み]Instagram APIを使ってタグで絞った画像を表示する方法

あれだけ苦戦したInstagramのAPIですが、ものすごくカンタンに利用できるプラグインがありました。しかも、このプラグインは、タグを指定することができます。ググり方が悪かったんですかね?昨日検索したときには出てこなかったんですが…

Instagram APIを使ってタグで絞った画像を表示する方法

では、さっそくタグで絞った画像を表示する方法を紹介します。まずは、InstagramのクライアントID(CLIENT ID)を取得するのに、開発者登録をしてください。
Instagram Developer Documentation

次に、jQueryのプラグインをダウンロードします。
potomak/jquery-instagram @ GitHub

これで、準備完了です。次は、コードです。

JavaScript

[cc lang=”JavaScript”]


[/cc]

HTML

[cc lang=”HTML”]
[/cc]

CSS

ご自由にどうぞ。

カスタマイズ

デフォルトでは、画像が150x150(px)で表示されます。この画像サイズを変えるにはjquery.instagram.jsを弄ってやります。

まず、次のコードを探してください。[cc lang=”JavaScript”] .attr(‘src’, photo.images.thumbnail.url)
[/cc] これを次のように変えると、306x306(px)もしくは612x612(px)に変えることができます。[cc lang=”JavaScript”] //306x306に変えるとき
.attr(‘src’, photo.images.low_resolution.url)

//612x612に変えるとき
.attr(‘src’, photo.images.low_resolution.url)
[/cc]

とってもカンタンにInstagram APIで取得・表示できちゃいますね:)

Instagram
価格: 無料(記事公開時)
App Storeで詳細を見る

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

モバイルバージョンを終了