Instafeed.jsにてハッシュタグの取得

Question

こんにちは、いつもお世話になっています。

現在webサイトを作成中で、Instagramからハッシュタグで画像を取得し、サイトに一覧表示しようと考えています。

Instafeed.jsというプラグインを利用しています。

下記などを参考にdeveloperページに登録し、アクセストークンも取得しました。

http://peng-note.com/archives/1678
http://www.skuare.net/test/jinstafeedjs.html
http://miukro.hatenablog.com/entry/2016/02/09/191123

下記の内容ではうまく自分の投稿が表示されたのですが、

<script>
$(document).ready(function() {
    var userFeed = new Instafeed({
        get: 'user', //ユーザーから取得
        userId: 'YOUR_USER_ID', //ユーザーID(数字のみのもの)
        sortBy:'random', //並び順をランダムに
        links: true , //画像リンク取得
        limit: 5, //取得する画像数を設定
        resolution: 'low_resolution', //画像サイズを設定
        template: '<li><a href="{{link}}"><img src="{{image}}" target="_blank"></a><span>{{caption}}</span><span>like:{{likes}},comments:{{comments}}</span></li>',
        accessToken: 'YOUR_ACCESS_TOKEN' //アクセストークン
    });
    userFeed.run();
});
</script>

肝心のハッシュタグを取得しようとすると下記エラーで表示されなくなります。

Uncaught Error: Error from Instagram: The access_token provided is invalid.

下記はサイトよりコピペしたのですが、こちらのままですと上手く表示されます...
クライアントIDを自身のものに変えるとエラーになります。

<script>
$(document).ready(function() {
    var feed = new Instafeed({
        get: 'tagged', //popular,tagged,location
        tagName: '東京タワー',
        //locationId: number,
        sortBy:'most-liked', //most-recent,least-recent,least-liked,most-commented,random
        links: true , //false
        limit: 60, //max60
        resolution: 'low_resolution', //thumbnail - 150x150 ,low_resolution - 306x306 ,standard_resolution - 612x612 
        template: '<li><a href="{{link}}"><img src="{{image}}" target="_blank" /></a><br />{{caption}}<br />like:{{likes}},comments:{{comments}}</li>',
        clientId: 'e6930bc2e21c4c198e7e36853ea56db3'
    });
    feed.run();
});
</script>

いろいろ検索はしたのですが、いかんせん英語が読めず...
お手数ですが、どなたか解決策を教えていただけないでしょうか？

Comments

[ogaaaan]

エラーメッセージにはっきり原因書いてあるんだけど。
この英文は中学生レベル。『The access_token provided is invalid.』。

[MaShiRo_H]

そこではなく、解決方法を検索しても英語のサイトしか出てこずわからない…という意味でしたが...
ただ、なんとなく日本語のページが出ないのも納得できました。

[ogaaaan]

それもあるだろうけど、アクセストークンが間違ってますよって英語で書いてあるので、まずアクセストークンが正しいのかどうかの調査が必要なんだと思ったんで。

[MaShiRo_H]

ありがとうございます！今一度確認して試してみますね。

Answer 1

はじめましてこんにちわ。

私も同じ所でつまずいています。
同じように特定ユーザーの画像の抽出はできました。

ハッシュタグ抽出のサンプルを同じようにIDを変えると表示されません。

何かその後解決しましたか？

Comments

[MaShiRo_H]

遅れてしまってごめんなさいm(_ _)m
つまずいたっきりで解決しておりません><
その後変化がありましたら改めてコメントさせていただきますね。

Answer 2

ライブラリ使わないで直にアクセスしてみたけど、どうも弾かれちゃうんだよね。

$(function() {
    var ACCESS_TOKEN = 'xxxxxxxx.xxxxxxxx.xxxxxxxxxxxxxxxxxxxxxxx',
        MAXSIZE = 20,
        ID = '#instafeedarea';

    $.ajax({
        url: 'https://api.instagram.com/v1/tags/cats/media/popular',
        data: {
            access_token: ACCESS_TOKEN
        },
        type: 'GET',
        dateType: 'jsonp',
    })
    .done(function (data, textStatus, jqXHR) {
        var i, length, d = data.data[i];
        for (i = 0, length = MAXSIZE; i< length; i++ ) {
            if(typeof(d) !== 'undefined') {
                $(ID).append(
                    $('<div>').append(
                        $('<a>').attr('href', d.link)
                                .attr('target', '_blank').append(
                                    $('<img>').attr('src', d.images.low_resolustion.url)
                                )
                    )
                );
            }
        }
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
        console.log(jqXHR, textStatus, errorThrown);
    });
});

なにか認証の手順が漏れてたのかも。やってないことがあるかもしれない。

Answer 3

気になったので登録して試してみました。

https://api.instagram.com/v1/users/self.json?access_token=＜アクセストークン＞

このURLにアクセスして、画面にjson形式のデータ表示されますか？

アクセストークンが正しければ、自分のインスタのアカウント情報が取得できると思います。

Comments

[MaShiRo_H]

わざわざ調べていただきありがとうございます。
はい！ {"meta":{... で始まるデータが表示されています。
私も普段Instagramを全く使わないので、たった二行でしたが...。

勘違いでなければ、InstagramのManage ClientsページのCLIENT ID : ... で通るのかと思っていましたが、何度試しても同じエラーが出てしまうのです。