【2021年度版】WEBサイトに埋め込んでいるInstagram(インスタグラム)の最新投稿一覧を表示されるようにする方法
本記事では、最新のinstagram(インスタグラム)をWEBサイトに埋め込んで投稿一覧表示させる方法をご紹介します。インスタの埋め込み画像が表示されないといった症状の解決策にもなります。
有料級の情報『インスタをWEBサイトにて投稿一覧表示させるためのプログラムのソースコード』を無料で下部に記載しております。
WEBサイトにInstagram(インスタグラム)を埋め込んで連携しているショップさんや不動産屋さん等結構いるのですが、2020年6月29日で埋め込んで投稿表示できるInstagramの旧APIが利用停止となったため、Instagramの最新投稿が表示されない？といったお悩みごとがあるかと思います。
Instagram Basic Display APIを使って表示できるようにする具体的な手順・方法をご紹介いたします。
手順
1. Instagramフィード取得用のFacebookアプリを作成
2. 表示したいInstagramアカウントをテストユーザーとして招待
3. 2で招待したアカウントにて1で作成したアプリを承認
4. 2のアカウントに向けて認証ウィンドウを表示（ブラウザからアドレスを打つ）→
Instagramにて承認する→認証用コードが発行される
5. 認証用コードを使用して、短命アクセストークンを取得
6. 長寿命のアクセストークンを取得
7. 6を使用して2のアカウントのInstagramフィードを取得
8. 7で取得したフィードを良い感じに加工してサイトに表示する
長寿命のアクセストークンは60日有効なので、延命処置を検討する
（cronで一ヶ月毎に取得とか）
手順のソース
アクセストークンを取得
https://developers.facebook.com/docs/instagram-basic-display-api/getting-started
長寿命トークンの取得
https://developers.facebook.com/docs/instagram-basic-display-api/guides/long-lived-access-tokens
メディアの取得
https://developers.facebook.com/docs/instagram-basic-display-api/guides/getting-profiles-and-media
用意するもの ➀ Facebook開発者アカウント https://developers.facebook.com/?locale=ja_JP Facebookアカウントがあり、Facebookの開発者向けサイトに開発者としての登録が必要です。 ➁ Instagramアカウント ないなら当然最新投稿が表示されません ➂ WEB(ウェブ)サイトがあること 投稿一覧を表示するWEBサイトです ➃ WEBサイト上でPHPが動くこと。PHPが動作するサーバーであればほぼ大丈夫です。
1.Facebook開発で準備
➀のアカウントを使って、開発者向けサイトにアクセスし、 1.マイアプリ➡アプリの作成を選択 2.名前や識別番号、アプリに許可するアクセス権限等の設定を登録します 3.アプリIDを作成というボックスが出てくるのでその中にあるその他をクリック 4.セキュリティチェックを完了してくださいという表示がでます。私はロボットではありませんをチェックして、送信ボタンをクリックしましょう 5.アプリ表示名 アプリIDとリンクするアプリ名です。の空欄にアプリ名表示とアプリの連絡先メールアドレスを入力し、アプリIDを作成ボタンをクリックしましょう。 6.画面の左端メニューにある『プロダクト』をクリックするか、表示画面の『製品を追加』のところからInstagram Basic Displayにある設定ボタンをクリック。 7.次にダッシュボードが表示されるので、設定を選択→ベーシックをクリックし、埋込予定のWEBサイトのプライバシーポリシーのURLを入力します。 8.WEBサイトURLの入力欄があるので、埋込予定のWEBサイトのURLを入力し、変更を保存ボタンをクリック。
2.Instagram基本表示設定
埋め込むために必要なFacebookアプリ内にInstagramアプリを作ることができます。
1.1で作ったFacebookアプリにプロダクトを割り当てて使えるようにします。 2.左メニューからプロダクト内にあるinstagram Basic Displayを選択 3.Create New Appのボタンをクリックしましょう。 4.表示名に文字列が入力されていることを確認し、アプリを作成のボタンをクリック。 5.画面が更新されて、作成されたInstagramアプリのIDなどの情報が表示されます。
6.クライアントOAuth設定欄には、Instagramを埋込するWEBサイトのURLを入力しましょう 7.ページの下にある変更を保存をクリックしましょう。これで保存ができます。
3.テストユーザー追加
Instagramの投稿表示をしたいInstagramアカウントのIDをテストユーザーといいます。 1.ダッシュボードの下に役割という表示があるのでその役割をクリック 役割➡役割メニューを選択します。 2.Instagramテスターというボックスがページの下あたりにあるので、Instagramテスターを追加というボタンをクリックします。 3.InstagramアカウントのIDをInstagramテスターを追加の空欄の中に入力し、送信を行いましょう。 4.テストユーザーが追加されたら画面が更新されて、Instagramユーザーはプロフィールのアプリとウェブサイトセクションからテスターへの招待を管理できます。という表示ができます。 5.Instagram側での作業：新しく別にブラウザを立ち上げて、Instagramアカウントにログインしましょう。プロフィールアイコンをクリックし、プロフィールを編集ボタンを押します。アプリとウェブサイトメニューをクリックし、テスターの招待タブをクリック、承認するボタンをクリックしましょう。 6.Facebook側での作業に戻ります。認証ウィンドウURL生成フォームに、作成したInstagramアプリのアプリIDと作成したInstagramアプリのクライアントUAuth設定で入力したURLを入力しましょう。入力したら生成ボタンをクリックします。 7.認証ウィンドウが表示されたら承認をクリックします。 認証ウィンドウで承認後のブラウザのアドレス欄(URL）をコピーして長期アクセストークン取得フォームにある認証ウインドウで承認後のブラウザのアドレス欄に貼り付けましょう。
4.APIにアクセスするために必要なトークンを取得
1.Instagramapp secret の表示をクリックします。Facebookのパスワードを入力し送信をクリック。次にInstagramapp serectをコピペします。この時にリセットを押さないように。
2 .長期アクセストークン取得フォームが表示されているので、そこに必要事項を全て入力しましょう。
3.取得をクリックします。
4.Facebook for DevelopersにおいてアプリIDの右側にある開発中ボタンを押してライブモードに切り替えましょう。モード切替をクリックするとライブモードになります。
5.Instagram投稿一覧の表示
サーバー上に、長期アクセストークンを使用し、表示処理を行うプログラムを設置する必要があります。
必要な動作は下記の通り。
・Instagram Basic Display APIから投稿治乱のデータを取得
・取得した投稿一覧のデータをもとに表示する
・有効期限が切れる前に長期アクセストークンを更新する。
写真データを取得するプログラムソースコードは下記
$access_token = "（トークン情報）";
$url = "https://graph.instagram.com/me/media?fields=id,caption,permalink,media_url&access_token=".$access_token;
$curl = curl_init($url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($curl);
$photo_datas = curl_close($curl);
取得したトークンをファイル作成。 ➀「token.txt」というファイルを作成しましょう。
➁アクセス拒否を記述した「.htaccess」ファイルと共に入れておきましょう。
Facebook for Developerにて、左メニュー＞プロダクト＞Instagramの「Basic Display」を選択し、「Instagram App Secret」の「表示」ボタンを押して、シークレットキーを取得・コピーしておきます。
<?php
$client_secret = "（シークレットキー）"; //シークレットキー
$token_refresh_time = 60*60*24*30; //トークン再取得の間隔（30日）
$token_file_path = "./token/token.txt";
$photo_data_refresh_time = 60*60*24; //写真データの再取得の間隔（1日）
$photo_data_file_path = "./instagram_api.json";
//保持しているトークンを取得する
$fl = fopen($token_file_path, "r");
$access_token = fgets($fl);
fclose($fl);
//$token_refresh_timeの期間が過ぎたらトークンを再取得する
$refresh = 0;
if(!file_exists($token_file_path)){
$refresh = 1;
}else{
$filemtime = filemtime($token_file_path);
if((time()-$token_refresh_time) > $filemtime){
$refresh = 1;
}
}
if($refresh == 1){
$url = 'https://graph.instagram.com/access_token?grant_type=ig_exchange_token&client_secret='.$client_secret.'&access_token='.$access_token;
$curl = curl_init($url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($curl);
curl_close($curl);
$decode = json_decode($response, true);
$access_token = $decode["access_token"];
$fl = fopen($token_file_path, "w");
fwrite($fl, $access_token);
fclose($fl);
}
//$photo_data_refresh_timeの期間が過ぎたら写真データを再取得する
$refresh = 0;
if(!file_exists($photo_data_file_path)){
$refresh = 1;
}else{
$filemtime = filemtime($photo_data_file_path);
if((time()-$photo_data_refresh_time) > $filemtime){
$refresh = 1;
}
}
if($refresh == 1){
$url = "https://graph.instagram.com/me/media?fields=id,caption,permalink,media_url&access_token=".$access_token;
$curl = curl_init($url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($curl);
curl_close($curl);
if(!empty($response)){
$fl = fopen($photo_data_file_path, "w");
fwrite($fl, $response);
fclose($fl);
}
}
?>以上のプログラムファイルの配置はこうなります。 get_photo.php 写真データを取得
instagram_api.json（自動生成）
token/token.txt トークンデータはここに格納
token/.htaccess トークンをみられたらダメなので(ヾﾉ･∀･`)ﾅｲﾅｲしましょう。
この記事が気に入ったらサポートをしてみませんか？