instagramのapiを使用して自分のアカウントの画像を取得する

###前提・実現したいこと
instagramのapiを使用して自分のアカウントの画像を最新8件出そうとしています。
テストURLで作成した際は問題なく動作していたのですが、本番用のURLでは画像が取得できなくなってしまいました。

Manage ClientでのWebsite URL:は本番用のURLで登録し
Valid redirect URIs:は本番用URLとテスト用URLの両方が登録してあります。

本番用URLを
http://example.com/
とするとテストURLは
http://example.com/test/

アクセストークンは下記の方式で「CLIENT ID」にCLIENT ID、「リダイレクトURL」にテストではテスト用のURL、本番では本番用のURLを入れて取得しました。

https://instagram.com/oauth/authorize/?client_id=「CLIENT ID」&redirect_uri=「リダイレクトURL」&response_type=token

対策方法などご存知の方がいましたら、教えていただけると助かります。

###データ表示箇所コード

html
1<div class="instagram clrFix"></div>

###データ取得用コード

js
1$(function() {
2  $(".instagram.clrFix").text("loading...");
3    $.ajax({
4      url: "https://api.instagram.com/v1/users/self/media/recent",
5      data: { access_token: "取得したアクセストークン" },
6      dataType: "jsonp",
7      error: function(jqXHR, textStatus, errorThrown) {
8        $(".instagram.clrFix").text(textStatus);
9      },
10      success: function(data, textStatus, jqXHR) {
11        $(".instagram.clrFix").text("");
12        for (var i = 0, length = 8; i < length; i++) {
13          var d = data.data[i];
14          $(".instagram.clrFix").append(
15          $("<div>").addClass("image").append($("<a>").attr("href", d.link).attr("target", "_blank").append($("<img>").attr("src", d.images.standard_resolution.url))));}
16        }
17    });
18});

###試したこと
一度、テスト用のURLをValid redirect URIsから外して再登録しましたが変わりませんでした。

kei344

2016/10/22 02:17

例示用ドメインはご自身で所有されていない限りexample.comを利用してください。また、まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。

raidomaru

2016/10/24 02:08

ドメインの件、教えていただきありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

データ取得用コードは正しく動いているので
本番用のアクセストークンが取得できていないのが原因かと思います。

以下のサイトからアクセストークンを発行してみてはいかがでしょうか。
Get Your Instagram Access Token
⇒ インスタグラムにログインした状態でGenerate Access Tokenをクリックしてアクセストークンを発行。

投稿2016/10/19 01:17

takumaro_web

総合スコア301

raidomaru

2016/10/19 04:36

回答ありがとうございます。頂いたリンクから取得したアクセストークンを使用してみましたが、変わりませんでした。

takumaro_web

2016/10/19 04:43

jsエラーなどは出ていないですか？

raidomaru

2016/10/19 11:32

js?sensor=true:86 Uncaught TypeError: Cannot read property 'firstChild' of null 上記のエラーが出ておりますが、関係ございますでしょうか？

takumaro_web

2016/10/20 00:31

オブジェクトが取得できていないようですね... この原因はソースを見ないとなんとも言えないですが記載された「データ取得用コード」のみで、今回取得したアクセストークンを使用しても動かないですか？それともその他にjsの記述はありますか？ ------------------------------------------------- またもう1つ疑問に思ったのですがテスト用と本番用は同じアカウントでしょうか？それともそれぞれ違うアカウントでしょうか？

raidomaru

2016/10/20 01:31

データ取得用コードのみだと出力できました。テスト用と本番用は同じアカウントです。

takumaro_web

2016/10/20 01:41

そうなると他のjsの記述に問題ありそうですね。

raidomaru

2016/10/20 01:53

切り分けて読み込みの順番を変えたらできました！色々とありがとうございました！

takumaro_web

2016/10/20 01:54

いえいえ、解決できたようでなによりです！