【PHP/JavaScript】Instagramを新着順に埋め込む方法~取得方法から画像付きで紹介~

JavaScript

InstagramをはじめとするSNSマーケティングの需要が高まり、インスタ広告で集客したりショッピング機能を使って商品購入へ促したりと、Instagramがビジネス活用されている場面をよく見かけます。


そこで今回は・・

1.インスタの投稿写真(動画の場合はサムネ)の情報を「Instagram Graph API」を使って取得する方法

2.取得した情報をWebページに表示させるためのPHPJavaScriptそれぞれのコード

上記2つを画像付きで紹介していきたいと思います!


今回紹介するコードはの完成形はこんな感じ⬇️

9つの投稿を3×3で新着順に表示

動画の場合はサムネイルを表示させて対応

写真をクリックするとInstagramページに飛べる

DEMO
スポンサーリンク

Instagram Graph API

Instagram APIが廃止され、現在Instagram Graph APIが新しく提供されています。

こちらのAPIは少々手間な作業が必要なので、備忘録として手順をまとめてみましたー。

※STEP4まであって少し長くなるので、コピペ用のコードが知りたい方はこちらまで飛ばし読みしてください!

STEP1:Instagramをプロアカウントにする

STEP1

まずは、Instagramのアカウントをプロアカウントにする必要があります!

とりとん
とりとん

インスタのアプリから操作してね~

(1)「設定」

インスタのプロフィール画面右上のメニューを開いて、「設定」をタップします。


(2)「プロアカウントに切り替える」

設定を開いたら少し下の方に「プロアカウントに切り替える」という青文字があるのでタップします。


(3)「無料のプロアカウントを取得」

ちなみに、プロアカウントは無料かつ、いつでも個人アカウントに戻すことができます。


(4)「カテゴリを選択」

事業内容や活動内容に合ったカテゴリーを選択してください。

どれを選んでもプロアカウントには変わりないので、好きなものを選んでOK。


(5)「クリエイター」or「ビジネス」

以前は”プロアカウント”ではなく”ビジネスアカウント”という名称でしたが、現在はクリエイターの選択もできるようになりました。

どちらでも好きな方を選択してください。


(6)「プロアカウント」完了!

プロアカウントにすると、プロフェッショナルツールを利用できるようになります。

今回は割愛しますね!


STEP2:Facebookページを作成する

STEP2

次に、先程プロアカウントにしたインスタアカウントで、Facebookページを作成する or 既存のFacebookページと連携させるという作業をしていきます!

とりとん
とりとん

インスタから新規Facebookページを作成する方法と、既存のFacebookページと連携する方法を一緒に紹介するよ~

(1)「プロフィールを編集」

先程プロアカウントにしたインスタアカウントの「プロフィールを編集」をタップします。


(2)「ページ」

少し下の「ビジネスの公開情報」→「ページ」をタップします。


(3)「Facebookページにリンク」

「Facebookページを作成」をタップします。

既存ページとリンクする場合は「既存ページをリンク」をタップします。


(4)「アカウントの連携」

InstagramとFacebookのアカウント連携をします。

連携させたくないFacebookアカウントが出てきた場合は「次へ」を押さずに「変更」をタップします。任意のFacebookアカウントにログインし直すことができます。


(5)「Facebookページの選択」

Facebookアカウントと連携したことで、既存のFacebookページがある場合は表示されるので、選択します。

新規Facebookページを作成する場合は「新しいFacebookページを作成」をタップします。


(6)「Facebookページを作成」完了!

任意のページ名とページのカテゴリーを選択して「作成」をタップします。


STEP3:アプリID・app secret・ユーザーアクセストークンの取得

STEP3

続いて、Facebook for Developersにログインして「アプリID」「app secret」「ユーザーアクセストークン」を取得していきます!

とりとん
とりとん

・・疲れてきたわぁ

このSTEP3が終われば、あとは楽やけん頑張ってー!

(1)「Facebook for Developers」

Facebook for DevelopersにFacebookのアカウントでログインして、「マイアプリ」をクリックします。


(2)「アプリを作成」

右上の「アプリを作成」をクリックします。


(3)「アプリタイプ」

任意のアプリタイプを選択して、「次へ」をクリックします。

今回は「ビジネス統合の管理」を選択してみましたが何でもOKです。


(4)「アプリ名・アプリの目的」

任意のアプリ名とメールアドレスを入力し、「自分自身または自分のビジネス」にチェックを入れて「アプリを作成」をクリックします。


(5)「アプリID・appsecretをメモ」

左メニューの「設定」→「ベーシック」から『アプリID』と『appsecret』をメモしておきます。


(6)「グラフAPIエクスプローラー」

上のナビから「ツール」→「グラフAPIエクスプローラー」を開きます。


(7)「アクセストークン」

ユーザーまたはページの「トークンを取得」→「ユーザーアクセストークンを取得」をクリックします。


(8)「Facebookでログイン」

Facebookのアカウントにログインします。


(9)「許可を追加」

「許可を追加」の下2つのタブから、既に選択されている「public_profile」を含めた10項目を選択します。

以下参考にしてみてください⬇️

  • Events Groups pages
    ・business_management
    ・pages_manage_adspages_manage_metadata
    ・pages_read_engagement
    ・pages_read_user_content
    ・pages_show_list
  • Other
    ・instagram_basic
    ・instagram_manage_comments
    ・instagram_manage_insights

(10)「ユーザーアクセストークン」完了!

「Generate Access Token」をクリックした後に表示された英数字がユーザーアクセストークンです。

こちらもメモしておいてください。

STEP4:InstagramのプロアカウントID・アクセストークンの取得

STEP4

最後に、API Query MakerのSTEP1に情報を入力して 「InstagramのプロアカウントID」と「アクセストークン」を取得する

とりとん
とりとん

・・もう無理

という方も安心してくださいw

ここからの過程を一発で処理してくれる便利なWebツールを発見したので、それを使わせていただきました!

API Query MakerにアクセスしてSTEP1~STEP3で取得した5つの内容を入力します。

インストールや登録など一切必要ないブラウザベースの無料ツールなのでご心配なく!

⇒「Instagramビジネスidとアクセストークンを取得」を押すと、下に【InstagramプロアカウントID】と【アクセストークン】が表示されるので、この2つを使って埋め込んでいきます!

とりとん
とりとん

お疲れさまでした!!!

必要な情報の取得が早速コードを確認してみよう!

コピペ用コード

※以下コードの【表示件数】【InstagramプロアカウントID】【アクセストークン】の3箇所を差し替えてお使いください!

PHP
<div class="insta_list">
    <?php
        $insta_media_limit = '【表示件数】';
        $insta_business_id = '【InstagramプロアカウントID】';
        $insta_access_token = '【アクセストークン】';

        $json = file_get_contents("https://graph.facebook.com/v6.0/{$insta_business_id}?fields=name%2Cmedia.limit({$insta_media_limit})%7Bcaption%2Cmedia_url%2Cthumbnail_url%2Cpermalink%7D&amp;access_token={$insta_access_token}");

        $json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
        $obj = json_decode($json, true);

        $insta = [];

        foreach ($obj['media']['data'] as $k => $v) {
            if ($v['thumbnail_url']) {
                $data = [
                    'img' => $v['thumbnail_url'], 
                    'caption' => $v['caption'],
                    'link' => $v['permalink'],
                ];
            } else {
                $data = [
                    'img' => $v['media_url'],
                    'caption' => $v['caption'],
                    'link' => $v['permalink'],
                ];
            }
            $insta[] = $data;
        }
        foreach ($insta as $k => $v){
            echo '<a href="'.$v['link'].'"><img src="'.$v['img'].'"></a>';
        }
    ?>
</div>
JavaScript
$(function(){
	$.ajax({
		type: 'GET',
		url: 'https://graph.facebook.com/v5.0/【InstagramプロアカウントID】?fields=name%2Cmedia.limit(【表示件数】)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cthumbnail_url%2Cmedia_type%2Cusername%7D&amp;access_token=【アクセストークン】',
		dataType: 'json',
		success: function(json) {
		    	
		    var html = '';
		    var insta = json.media.data;
		    for (var i = 0; i < insta.length; i++) {
		    var media_type = insta[i].media_type;
                if ( insta[i].media_type == "IMAGE" || insta[i].media_type == "CAROUSEL_ALBUM" ) {
		    	html += '<li><a href="' + insta[i].permalink + '" target="_blank" rel="noopener noreferrer"><span class="square-content"><img src="' + insta[i].media_url + '"></span></a></li>';                
                } else if (media_type == "VIDEO" ) {
		    	html += '<li><a href="' + insta[i].permalink + '" target="_blank" rel="noopener noreferrer"><span class="square-content"><img src="' + insta[i].thumbnail_url + '"></span></a></li>';           
		    var media_type = '';                    
                }       
		    }
		      $(".insta_list").append(html);			
		},
		error: function() {
 
		//エラー時の処理
		}
	});
});

//html
<div class="insta_list"></div>
CSS
.insta_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 3vw 0 2vw;
}

.insta_list img{
    width: 13vw;
    padding: 0 .25vw;
}

PHPJavaScript両方とも上記のCSSを適用させることでDEMOのような3×3の表示になります。

WordPressでPHPを記述する方法

WordPressのエディターでそのままPHPを記述することはできませんが、『PHP Everywhere』というプラグインを入れることでページ別にPHPを記述することができます。

今回紹介したコードもコピペで使うことができるので、ぜひ使ってみてください!

PHPの知識がなくてもわかりやすいように使い方の手順をまとめてみたので、よかったら参考にしてくださいね⬇️

インスタの埋め込みはちょっと手間やけど需要あると思うのでやってみてね!

最後まで読んでいただきありがとうございました!

タイトルとURLをコピーしました