htmlで作ったホームページにインスタグラムの一覧を載せたい時の方法です。
Metaからデータへのアクセス更新のお知らせが届きました。
これまでは簡単に更新できていたのに、ビジネスプロフィールで詳細を入力する画面になってしまい、ビジネスポートフォリオができてわからなくなり削除したら、フェイスブックページが丸ごと削除されてしまった。。。
再度、新しくビジネスページから作り直す羽目になり、これまでのビジネスページは消えた。
3年前にインスタグラムの一覧表示はやったことありましたが、思っていたより手間がかかって、その時以来、あまりやりたくない作業でした。
再度、チャレンジして苦手意識を克服しましたので、
次にまたインスタグラムの一覧を作る時用に残しておきたいと思います。
同じ気持ちで、二の足を踏んでいる方の参考になれば嬉しいです。
手順1：フェイスブックとインスタグラムを連携する
まず、フェイスブックのFacebookページの【設定】からインスタグラムとの連携作業を行います。
インスタグラムを「ビジネスアカウント」に変更しますが、2024年現在では「プロアカウント」という名称に変更されたみたいです。
プロアカウントへの変更は、割愛させていただきます。
手順2：一つ目のアクセストークン・ビジネスアカウントIDの取得
ここからの手順が、インスタグラムの一覧表示の要になりややこしいところです。
Facebook管理者ページで設定開始です。
【マイアプリ】をクリックします。
【アプリを作成】をクリックします
【アプリを作成】をクリックして以下の画面が表示されればOK!
Events Groups Pagesから選択する項目
business_management
pages_show_list
pages_manage_ads
pages_manage_metadata
pages_read_engagement
pages_read_user_content
Otherから選択する項目
instagram_basic
instagram_manage_insights
instagram_manage_comments
※選ぶ順番は関係ありません
【Generate Access Token】をクリックします
フェイスブックにつながりますので、ログインして指示の通りに進みます。
一つ目のアクセストークンを取得できました。
アクセストークンをコピーします。
まだまだ道のりは続きます…
手順3：二つ目のアクセストークン取得
【アプリの設定】→【ベーシック】をクリックすると
アプリIDとapp secretが出てくるので、これをコピーします。
2回目のアクセストークンを取得します。
https://graph.facebook.com/v12.0/oauth/access_token?grant_type=fb_exchange_token&client_id=【ここにアプリIDを入力】&client_secret=【ここにapp secretを入力】&fb_exchange_token=【ここに1段階目のアクセストークンを入力】
【】全てをここまで取得してきた数字を入れて、ブラウザの窓にペーストします。【】不要です。
2番目のアクストークンを取得できました。
ここまででも十分疲れます。もっと簡単になってほしい。。。
{“access_token”: この部分をコピーします。
手順4：いよいよ三つ目のアクセストークン取得
https://graph.facebook.com/v12.0/me?access_token=【2段階目のアクセストークンをここに入力】
2番目のアクストークンを入力して、ブラウザの窓へイン！
新しいidが取得できました。
これもコピーします。
https://graph.facebook.com/v12.0/【直前に取得したidをここに入力】/accounts?access_token=【2段階目のアクセストークンをここに入力】
直前に取得した新しいidと2段階目のアクセストークンを入力します。
やっと3つ目のアクセストークンをゲットしました。ここまで疲れた。。。
手順5：InstagramビジネスアカウントIDを取得
アクセストークンデバッガーにアクセスします。
三つの目のアクセストークンを入力してデバックをクリックします。
有効期限のところが「受け取らない」になっているかを確認します。
スコープの内容が自分が選んだ9つの内容が入っているかを確認します。
「ツール」→「グラフAPIエクスプローラ」を選択します。
1に me?fields=instagram_business_account を入力
2に 3回目のアクセストークンを入力します。
3で 送信します。
instagram_business_account が表示されました。
お疲れ様でした（本当に工程が長すぎます。。。）
手順6：ホームページにPHPで実装
実装サンプルはこちらです
実装のhtml（index.php）コードです
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.insta__item{
padding: 0% 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style-type: none;
}
.insta__item > *{
min-width: 8%;
flex-basis: 16%;
text-align: center;
}
.insta__item li img{
width: 100%;
}
/*hover画像をズームで表示*/
.zoom_img{
overflow:hidden;
width: 100%;
height: auto;
margin: 3px;
}
.zoom_img img{
transition:1s all;
width: 100%;
}
.zoom_img img:hover{
transform:scale(1.2);
transition:1s all;
}
.thumbnail{
display: block;
line-height: 0;/*行の高さを0にする*/
overflow: hidden;/*拡大してはみ出る要素を隠す*/
}
/*ズームここまで*/
</style>
</head>
<body>
<?php
$instagram = null;
$instagram_business_id = 'InstagramビジネスアカウントのID';
$access_token = '有効期限無期限のアクセストークン（三つ目のアクセストークン）';
$post_count = 8;//表示させたい投稿数
$query = 'name,media.limit(' . $post_count. '){caption,like_count,media_url,permalink,timestamp,username,comments_count}';
$get_url = 'https://graph.facebook.com/v7.0/' . $instagram_business_id . '?fields=' . $query . '&access_token=' . $access_token;
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $get_url);
curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'GET');
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($curl);
curl_close($curl);
if($response){
$instagram = json_decode($response);
if(isset($instagram->error)){
$instagram = null;
}
}
?>
<ul class="insta__item">
<?php
foreach($instagram->media->data as $post):
$caption = $post->caption;
$caption = preg_replace('/\n/', '<br>', $caption);
?>
<li class="zoom_img">
<a href="<?php echo $post->permalink; ?>" target="_blank" rel="noopener noreferrer">
<span class="thumbnail">
<img src="<?php if($post->media_type=='VIDEO'){ echo $post->thumbnail_url; } else { echo $post->media_url; } ?>" alt="<?php echo $caption; ?>">
</span>
</a>
</li>
<?php endforeach; ?>
</ul>
</body>
</html>参考にさせていただいたサイト様です。
こちらのサイト様のおかげで3年ぶりに挑戦することができました。ありがとうございました！
コメント