instagram

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

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

デモを作りました。

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

まず、その前にこの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はこちらから

使い方

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

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

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

と、記述します。

clientId:のところは、先程取得したCLIENT IDを記述します。

使えるパラメーターは以下のとおり

  • hash
  • userId
  • locationId
  • search
  • accessToken
  • clientId
  • show
  • onLoad
  • onComplete
  • maxId
  • minId
  • next_url
  • image_size

自分の写真を取得する

自分の写真を取得するには、上記のパラメーターの中で以下のモノを使用します。

  • userId
  • accessToken

userId と accessToken を知るには、先ほどの

instagram developerこちらの左メニューのところの、Endpointsを開くと自分のID等知ることができます。

その他の詳しいことなどは、GitHub上でのReadMeに記載されていますのでそちらを参照してください。

以上で設置は、終わりです。あとは、CSSを使って装飾すればすてきなギャラリーが出来上がり。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る