Instagramの画像をWEBサイトに表示

top2015_1106.jpgInstagramを自身のサイトに表示させる時は手順が思ったより多かったのでメモっておこうと思います。

■大まかな流れとして
1.jQueryプラグインInstafeed.jsをダウンロード
2.JSをユーザーアカウントから画像を取得出来るように書き換える
3.InstagramのuserIdを取得する
4.Instagram Access Tokenを取得する
5.確認

【1】jQueryプラグインInstafeed.jsをダウンロード
参考サイトが非常に分かりやすくまとめられているので、順序良く進める事で自身のサイトにInstagramの画像を表示することができます。
●参考サイト:Instagramの画像を取得して表示できるjQueryプラグインInstafeed.js

【2】JSをユーザーアカウントから画像を取得出来るように書き換える
プラグインページに記載されている内容を参考に一部コードを編集します。

$(document).ready(function() {
    var feed = new Instafeed({
        get: 'tagged', //ハッシュタグから取得
        tagName: '東京タワー', //好きなハッシュタグを設定
        sortBy:'random', //並び順をランダムに
        links: true , //画像リンク取得
        limit: 20, //取得する画像数を設定
        resolution: 'low_resolution', //画像サイズを設定
        template: '
  • {{caption}}like:{{likes}},comments:{{comments}}
  • ', clientId: 'xxxxxxx' //Instagram DevelopersのクライアントID }); feed.run(); });

    $(document).ready(function() {
        var userFeed = new Instafeed({
            get: 'user', //ユーザーから取得
            userId: 'YOUR_USER_ID', //ユーザーID
            sortBy:'random', //並び順をランダムに
            links: true , //画像リンク取得
            limit: 5, //取得する画像数を設定
            resolution: 'low_resolution', //画像サイズを設定
            template: '
  • {{caption}}like:{{likes}},comments:{{comments}}
  • ', accessToken: 'YOUR_ACCESS_TOKEN' //アクセストークン }); userFeed.run(); });

    これで下準備は完了です。

    【3】InstagramのuserIdを取得する
    プラグインのページも記載されていますがuserIdはアルファベットの方ではなく数字の方になります。

    Note that YOUR_USER_ID corresponds to your Instagram account ID (eg: 4385108), not your username.

    数字のIDを取得する方法は以下のサイトが参考なります。
    ●参考サイト:InstagramAPIを利用して特定のユーザの最新画像を表示する iPhoneアプリを作成①

    使用している名前によってはいくつか表示されるので、もし迷った場合は[profile_picture]で表示さているプロフィール画像で確認してみるのもありかと思います。

    【4】Instagram Access Tokenを取得する
    以下に参考サイトへアクセスし「Generate Access Token」をクリックします。
    画面遷移後「認証」を完了するとコードが表示されます。
    ●参考サイト:Get Your Instagram Access Token

    【5】確認
    3と4で取得した情報をJSに反映したら確認してみましょう。

    ▼3で取得した数字のIDに変更
    userId: 'YOUR_USER_ID', //ユーザーID

    ▼4で取得しアクセストークンに変更
    accessToken: 'YOUR_ACCESS_TOKEN' //アクセストークン


    ハマりながらだったので、自分のInstagramが表示された時は「おーーー」となりました。
    今回は以上です。