ameeeee
10/11/2019 - 1:57 AM

instagram API取得

.md
content_copyfile_download
  • Rendered
  • Source

1.　instagramアカウントをビジネスアカウントに変更する

[モバイルからのみ]プロフィール -> メニュー -> 設定 -> アカウント -> プロアカウントに切り替える -> クリエイター or ビジネスアカウント

2.　facebookページとInstagramビジネスアカウントを連携させる

  • instaからfacebookにログイン（持ってなければ作成
  • Facebookページを作成、インスタアカウントとリンクさせる

3.　facebookページで設定（持っていなければ作る

facebookページ -> 設定 -> instagram -> アカウントをリンク -> インスタビジネスアカウントでログイン

4.　Instagram Graph APIでWebサイトにインスタの写真を埋め込むのに必要なアクセストークンおよびInstagramビジネスアカウントIDを取得する

1.　facebookアプリを作成
  • facebook開発者ページにアクセス
  • 開発者アカウントがなければ作成（電話番号認証必要
  • 新しいアプリの作成（マイアプリ -> 新しいアプリの作成
2.　1段階目のアクセストークンの取得
  • グラフAPIエクスプローラに移動
  • 右上 トークンを取得 -> ユーザーアクセストークンを取得
  • business_management、pages_show_list、manage_pages、instagram_basic()、instagram_manage_comments()、instagram_manage_insights()にチェック（は他のビジネスアカウント情報も取得したい場合のみ
  • アクセストークンを取得 -> 流れに沿ってfacebookログイン
  • アクセストークンをメモ
3.　2段階目のアクセストークン取得
  • 上メニュー　アプリ -> 先程作ったアプリを選択
  • 左メニュー 設定 -> ベーシック
  • アプリIDとapp secretをメモ
  • 移動：https://graph.facebook.com/v4.0/oauth/access_token?grant_type=fb_exchange_token&client_id=【ここにアプリIDを入力】&client_secret=【ここにapp secretを入力】&fb_exchange_token=【ここに1段階目のアクセストークンを入力】
  • {"access_token":"ここが2回目のアクセストークン","token_type":"bearer","expires_in":5184000}これをメモ
4.　3段階目のアクセストークン取得
  • 移動：https://graph.facebook.com/v4.0/me?access_token=【2段階目のアクセストークンをここに入力】
  • {"name": "***","id": "ここのID"}IDを控える
  • 移動：https://graph.facebook.com/v4.0/【直前に取得したidをここに入力】/accounts?access_token=【2段階目のアクセストークンをここに入力】
  • アクセストークンをメモ："data": [ { "access_token": "ここに3回目のトークン",

5.　instagramビジネスアカウントIDを取得

アクセストークンデバッガーでここまでの設定内容に相違がないかをチェック
  • アクセストークンデバッガーに移動、アクセストークンを選択
  • 3段階目のアクセストークンを入力、デバッグ
  • 有効期限：受け取らない になっていること、スコープの設定を確認
  • グラフAPIエクスプローラに戻る
  • ”アクセストークン”を3回目のトークンに書き換え
  • URLの部分を「me?fields=instagram_business_account」にする
  • 送信、インスタビジネスアカウントIDが表示される

必要なのは「3段階目のアクセストークン」と「インスタビジネスアカウントID」



index.html
content_copyfile_download
<!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>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    
    <ul id="gallery" class="gallery"></ul>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>
instagram.js
content_copyfile_download
axios.get("instagram.php").then(instagram_data=>{
  console.log(instagram_data);// 検証ツールのConsoleを覗くと取得したデータの全容が確認できます。
    
  //
  //他のInstagramビジネスアカウントの投稿情報も取得したい場合
  
  const gallery_data = instagram_data["data"]["business_discovery"]["media"]["data"];

  //
  //自分のInstagramビジネスアカウントの投稿情報が取得できればOKな場合は
  //const gallery_dataを下記にする。

  // const gallery_data = instagram_data["data"]["media"]["data"];

  let photos = "";
  const photo_length = 9;

  for(let i = 0; i < photo_length ;i++){
    photos += '<li class="gallery-item"><img src="' + gallery_data[i].media_url + '"></li>';
  } 
  document.querySelector("#gallery").innerHTML = photos;
}).catch(error=>{
  console.log(error);
})
instagram.php
content_copyfile_download

<?php

$instagram_business_id = 'ここにInstagramビジネスアカウントIDを入力してください。'; 
$access_token = 'ここに3段階目のアクセストークンを入力してください。';

$target_user = 'ここに取得したいInstagramビジネスアカウントのユーザー名を入力してください。（例えばArrownのInstagramであればURLがhttps://www.instagram.com/arrown_blog/なので「arrown_blog」がユーザー名になります。このアカウント全然更新してないけど。。。）';

//自分が所有するアカウント以外のInstagramビジネスアカウントが投稿している写真も取得したい場合は以下
$query = 'business_discovery.username('.$target_user.'){id,followers_count,media_count,ig_id,media{caption,media_url,media_type,like_count,comments_count,timestamp,id}}';

//自分のアカウントの画像が取得できればOKな場合は$queryを以下のようにしてください。

//$query = 'name,media{caption,like_count,media_url,permalink,timestamp,username}&access_token='.$access_token;



$instagram_api_url = 'https://graph.facebook.com/v4.0/';
$target_url = $instagram_api_url.$instagram_business_id."?fields=".$query."&access_token=".$access_token;

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $target_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$instagram_data = curl_exec($ch);
curl_close($ch);

echo $instagram_data;
exit;
insta2.js
content_copyfile_download
// 動画or画像判定有り版

axios.get("https://xxxxxxxxx.com/instagram.php").then(instagram_data=>{
  console.log(instagram_data);// 検証ツールのConsoleを覗くと取得したデータの全容が確認できます。
    
  //
  //他のInstagramビジネスアカウントの投稿情報も取得したい場合
//  const galleryData = instagram_data["data"]["business_discovery"]["media"]["data"];

  //
  //自分のInstagramビジネスアカウントの投稿情報が取得できればOKな場合は
  //const galleryDataを下記にする。
   const galleryData = instagram_data["data"]["media"]["data"];
//   const galleryData = instagram_data["data"]["id"];


	let galleryLength = galleryData.length;
  let photos = "";
	let showNum = "";
  const photoLength = 12;
	if( photoLength > galleryLength ) {
		showNum = galleryLength;
	} else {
		showNum = photoLength;
	}


  for(let i = 0; i < showNum; i++){

	let mediaUrl = "";
	if(galleryData[i].media_type=='VIDEO'){
		mediaUrl = galleryData[i].thumbnail_url;
	}else{ 
		mediaUrl = galleryData[i].media_url;
	}

console.log(galleryData[i].thumbnail_url);
    photos += '<li class="gallery-item"><a href="' + galleryData[i].permalink + '" target="_blank"><img src="' + mediaUrl + '" alt="' + galleryData[i].caption + '"></a></li>';
  } 
  document.querySelector("#gallery").innerHTML = photos;
}).catch(error=>{
  console.log(error);
})