質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 6,989

score 326

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

現在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>

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • ogaaaan

    2016/03/04 21:12

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

    キャンセル

  • MaShiRo_H

    2016/03/04 23:31

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

    キャンセル

  • ogaaaan

    2016/03/04 23:42

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

    キャンセル

  • MaShiRo_H

    2016/03/04 23:46

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

    キャンセル

回答 3

checkベストアンサー

0

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/05 00:28

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

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

    キャンセル

0

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

$(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);
    });
});

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/26 17:00

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る