WEBデザイナーが教える! Instagramで最新の投稿をWEBサイトに読み込む方法

WEBデザイナーが教える!
InstagramをWEBサイトに読み込む方法

2024年10月07日

サクライデザインオフィスのサイトを作成していて、苦労した箇所の一つがInstagramの読み込みの方法です。

投稿を一つ一つ貼り付ける方法はよく出てくるんですが、最新の投稿（自分のアカウントのタイムライン）を自動的に読み込んでもらったほうが、楽ですよね。

やってるサイトさんもあるから、不可能ではないんだろうけど・・・と色々調べました。

次回、やる事があった時のために、備忘録も兼ねて、やり方を記載しておきます。

無料でできますので、興味がある方はどうぞ。

全体の流れ

前提として、InstagramとFacebookのアカウントが必要です。

Instagramのビジネスアカウントを設定する
FacebookとInstagramを連携させる
Metaデベロッパーへ登録、アプリIDを取得する
アクセストークンを作成する
InstagramのビジネスIDを取得する
WEBサイトに実装する

Instagramのビジネスアカウントを設定する

Instagramのアカウントをビジネスアカウントに設定します。

ビジネスアカウントに設定するだけなので、無料です。

投稿するたびに、この投稿を広告しますか？みたいなのは聞かれたりしますが、クレジットカードの登録とかもいらないので、大丈夫です。

Instagramの公式サイトでも説明されてますが、手順は以下になります。

プロフィールに移動して、右上にあるをタップします。[アカウントの種類とツール] ＞ [プロアカウントに切り替える]の順にタップします。
ビジネスに最もよく当てはまるカテゴリを選択し、[ビジネス]を選択します。
これでInstagramビジネスアカウントを取得できました。

FacebookとInstagramを連携させる

次はお手持ちのFacebookのアカウントと先ほどのInstagramのビジネスアカウントを連携させます。

Facebookを運営するMeta社が提供してるグラフAPIエクスプローラで［ビジネスアカウントのID］と［アクセストークン］を取得するためです。

Facebookにログインし、右上のプロフィール写真をクリックします。
[すべてのプロフィールを見る]をクリックし、切り替え先のページを選択します。
Facebookの画面右上にあるページのプロフィール写真をクリックします。
[設定とプライバシー]を選択し、[設定]をクリックします。
左のサイドナビの[アカウントセンター]をクリックします。
[プロフィール]から、[アカウント追加]を選択します。
手順に従って、Instagramにログイン、アカウントの追加を行なってください。

Metaデベロッパーへ登録、アプリIDを取得する

Instagramのアカウントとフェイスブックのアカウントをリンクさせることで、Meta社のデベロッパーツールでアクセストークンを取得していきます。

Meta for Developersの登録方法はここに載っています。

簡潔に書かれているので、ここでは説明を省略します。

次は、デベロッパーツールでアプリ制作をしていきます。

Meta for Developersのヘッダーにある、マイアカウントへ移動。
[アプリを作成]をクリック
このアプリにリンクするビジネスポートフォリオを選択してください。→ここでは[現時点ではビジネスポートフォリオをリンクしない。]を選択する。
あなたのアプリに必要な機能を選択してください。→ここでは[その他]を選択する。
アプリタイプを選択→[ビジネス]を選択。
アプリ名、アプリの連絡先メールアドレスを入力してください。
[アプリを作成]をクリック。
アプリに製品を追加で[Instagram]を選択。
マイアカウントに戻るか、ダッシュボードを見ると、作ったアプリの名前の下にIDが表示されています。

アクセストークンを作成する

ここが一番難しいかもしれません。

グラフAPIエクスプローラでにアクセスして、

グラフAPIエクスプローラで下記のように入力します。
Metaアプリ→先ほどMeta for Developersで作ったアプリ名をプルダウンから選択。
ユーザーまたはページ→トークンを取得から、下記の項目をアクセス許可の項目に加えます。
- business_management
- instagram_basic
- instagram_manage_comments
- instagram_manage_insights
- pages_read_engagement
- pages_read_user_content
[Generate Access Token]をクリックして、アクセスTOKENを取得します。

これは、１、２時間程度の有効期限があるので、続いて、長期で使えるアクセストークンを取得していきます。
下記のURLを完成させて、ブラウザで開きます。 https://graph.facebook.com/【Graphe APIのバージョン】/oauth/access_token?grant_type=fb_exchange_token&client_id=【アプリID】&client_secret=【app secret】&fb_exchange_token=【トークン】
- 【Graphe APIのバージョン】グラフAPIエクスプローラの画面にあるバージョン（現在はv20.0）
- 【アプリID】Meta for Developersで作ったアプリのID
- 【app secret】Meta for Developersで作ったアプリのapp secret（Meta for Developers→アプリの設定→ベーシックと進んだ画面に載ってます）
- 【トークン】先ほど取得したアクセストークン
これで取得できたアクセストークンは有効期限が60日です。
次は、先ほど取得した有効期限60日のアクセストークンを使って、無期限で使えるトークンを取得します。
下記のURLを完成させて、ブラウザで開きます。
https://graph.facebook.com/v20.0/me?access_token=【有効期限60日のアクセストークン】
トークンのIDが表示されます。
下記のURLを完成させて、ブラウザで開きます。
https://graph.facebook.com/v20.0/【先ほどのトークンのID】/accounts?access_token=【有効期限60日のアクセストークン】
access_tokenという項目の文字列が、無期限のアクセストークンになります。

InstagramのビジネスIDを取得する

グラフAPIエクスプローラを開きます。

画面右側の[アクセストークン]に先ほど取得した無期限のアクセストークンを入力します。
画面上部のアドレスバーに「me?fields=instagram_business_account」と入力して[送信]をクリックします。
instagram_business_accountの項目の文字列があなたのビジネスIDになります。
下記のURLを完成させて、ブラウザで開きます。
https://graph.facebook.com/v20.0/【InstagramビジネスID】?access_token=【無期限のアクセストークン】&fields=name,media{caption,like_count,media_url,permalink,timestamp,username}
ブラウザにちょっと長めの文字列が表示されます。

こんな感じで表示されれば、今までの作業はOKとなります。

WEBサイトに実装する

今まで取得してきた【InstagramビジネスID】と【無期限のアクセストークン】を使って、スクリプトのコードを完成させて、WEBサイトに読み込みます。

元にするスクリプトのコード


(function ($) {
    $.ajax({
        type: 'GET',
        url: 'https://graph.facebook.com/v20.0/【InstagramビジネスID】?access_token=【無期限のアクセストークン】&fields=name,media{caption,like_count,media_url,permalink,timestamp,username}',
        dataType: 'json',　
        success: function (json) {
            var insta = json.media.data;
            for (var i = 0; i < 6; i++) {
              let url = insta[i].media_url;   // 動画ソースのURLを取得
              let href = insta[i].permalink;  // リンク先URLを取得
              let caption = insta[i].caption; // 投稿のキャプションを取得
              let like = insta[i].like_count; // いいね！数の取得
              if(url.indexOf('.mp4') <= 0){   // 動画は除外 .mp4以外をタグで描画します
                $('.insta_list').append(`     // insta_listの中に以下を読み込みます

  
    
    ${caption}
    ${like} Likes!!
  

              `);
}
            }
        }
    });
})(jQuery);

HTMLに挿入するタグ
```
<ul class="insta_list"></ul>
```

CSSのコード


    /*インスタ*/
ul.insta_list {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    width: 100%;
}
                
ul.insta_list li {
    width: calc(33.33% - 6px);
    margin-left: 9px;
    /* nthで、3番目だけキャンセルさせる必要あり */
    border: solid 1px #ccc;
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 9px;
}
                
ul.insta_list li:nth-of-type(3n+1) {
    margin-left: 0;
}

完成！

この流れでサイトにInstagramの投稿を読み込む事ができたのではないでしょうか？

自分のための備忘録としてもここに残しておきます。

WEBデザイナーが教える! InstagramをWEBサイトに読み込む方法