APIを使わずにJavaScriptを使ってInstagramの画像を取得する方法

とある案件でサイト内にInstagramの画像を埋め込みたいとの依頼が。

 

以前からあったInstagram APIは見事に廃止されてしまい、
その代わりにInstagram Graph APIというものが登場した。

 

しかし、ちょっと面倒なのがInstagramをビジネスアカウントに変更させて
さらに自身のFacebookと連動させて、さらに審査もしなきゃいけなかったりと、といろいろ作業が増えるのです。

 

 

私が実際に体験したことなのですが、お客さんがFacebookとInstagramの連携をミスってしまい
なかなか連携できない状態に。。。

間違えたからと何度も連携を外したりしてしまうと、当分の間連携ができなくなるそう。。

 

 

それなのに、サイト内にはインスタの画像を埋め込んでくれとの要望が。。。

 

 

 

そこでAPIを使わずにInstagramから画像を取得していく方法をご紹介します。

 

 

JavaScript のみで書くことができます。

実際のコードがこちら。

 

/* instagram */ 
$(function () { 
    try { 
        this.name = "ユーザー名"; 
        $.ajax('https://www.instagram.com/' + this.name + '/', { 
            timeout: 2000, 
            datatype: 'html' 
        }).then(function (data) { 
           json_string = data.split("window._sharedData = ")[1]; 
           json_string = json_string.split("};</script>")[0] + "}";
           this.Arrya_data = JSON.parse(json_string); 
           let datas = this.Arrya_data.entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.edges; 
           for (i in datas) { 
               url = datas[i].node.display_url;               link = datas[i].node.shortcode;
               this.html = ` 
                   <div class=""> 
                        <a href="${url}">
                             <img src="${url}" class="" /> 
                        </a>
                   </div> `; 
              $(".instafeed").append(this.html); 
           }  });  } catch (error) {  alert(error);  } })

 

 

 

 

 

 

 

 

 

 

 

 

Twitterでフォローしよう

おすすめの記事