webcreator.me

Instagram インスタのAPIでfeedを取得し表示する方法。

インスタにログインし、管理画面で一番下にスクロールすると下記のAPIボタンが見つかります。

APIに進みます。

するとこの画面が出てきます。

Resister Your Appricationに進みます。

Developer Signupに登録します。

この電話番号には特にかかってくることは無いようです。

出典：http://teamnaporitan.com/get-instagram-access-token/

そしたら、resister a new clientへ進みます。

項目に記入して行きます。

Valid redirect URIs:にはhttp://サイトアドレス/instagram_api.phpとします。このURLは

Instagramからデータを取得する際に必要なアクセストークンを取得するためURLになります。つまり、アクセストークンはこのURLにリダイレクトし渡されるのです。

https://www.instagram.com/oauth/authorize/?client_id=XXXXX&redirect_uri=YYYYY&response_type=token

もしここで、

{“code”: 403, “error_type”: “OAuthForbiddenException”, “error_message”: “Implicit authentication is disabled”}

このようなエラーが表示された場合は、securityタブの「Disable implicit OAuth」のチェックを外して再度アクセスしてください！

アクセストークンが取得時に、「Disable implicit OAuth」のチェックを外した場合はセキュリティのためにチェック入れて更新しておきましょう。

アクセスが成功すると認証画面が表示されますので、「Authorize」をクリックします。

そうすると、認証後に表示される画面のURLのACCESS_TOKENというパラメーターの部分がアクセストークンになりますので、メモを取るなどしておきましょう。

アクセストークンが取得できたら下記のようなJSで出力させます。

access_token: "11553306.ccb4e40.e81f80dec540fab4999da22554",

この部分を自分のアクセストークンに書き換えるだけで大丈夫です。

var photoViewNum = 10

この部分に表示する枚数を入力します。

$(function() {

  var photoViewNum = 10

  $(".instagram").html('<p class="txt01">ロード中...</p>');
  $.ajax({
    url: "https://api.instagram.com/v1/users/self/media/recent/",
    data: {
      access_token: "11553306.ccb4e40.e81f80dec540fab4999da22554",
      count: photoViewNum
    },
    cache: false,
    dataType: "jsonp",
    error: function() {
      $(".instagram").html('<p class="txt01">情報の取得に失敗しました。リロードするか時間を開けてアクセスして下さい。</p>');
    },
    success: function(data) {
      $(".txt01").remove();
      $(".instagram").append('<ul class="img">')
      for (var i = 0, length = photoViewNum; i < length; i++) {
        $(".instagram .img").append($("<li>").append($("<a>").attr("href", data.data[i].link).attr("target", "_blank").append($("<img>").attr("src", data.data[i].images.standard_resolution.url))));
      }
    }
  });

});

参考サイト:

http://teamnaporitan.com/get-instagram-access-token/

参考サイト:

https://www.ultra-l.net/note/2016/08/instafeed.php