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

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

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

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

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

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

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jquery.instagram.js"></script>
<script>
$(function() {
    $(".instagram").instagram({
        hash: 'ここにタグ',
        show: 12,
        clientId: 'ここにクライアントID'
    });
});
</script>

HTML

<div class="instagram"></div>

CSS

ご自由にどうぞ。

カスタマイズ

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

まず、次のコードを探してください。

.attr('src', photo.images.thumbnail.url)

これを次のように変えると、306x306(px)もしくは612x612(px)に変えることができます。

//306x306に変えるとき
.attr('src', photo.images.low_resolution.url)
 
//612x612に変えるとき
.attr('src', photo.images.low_resolution.url)

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

Instagram Instagram
価格: 無料(記事公開時)
App Storeで詳細を見る
アプリをダウンロード

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

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

checkboxみはら.comはエックスサーバーです

editNEW エントリー

PAGE TOP arrowup