Instagram Graph APIの基本的な使い方・Webサイトにインスタの写真を埋め込みする方法

Instagram Graph APIの基本的な使い方・Webサイトにインスタの写真を埋め込みする方法

こんにちは!ケインコスゲです。

1年ほど前に書いたInstagram API仕様変更・終了・廃止関連の情報まとめ。インスタの写真をWebサイトで直接表示していた方は要注意!という記事を書いたことがありました。

この記事、Arrownの歴代記事の中でもかなりのバズを生み出してくれたのですが、今回のブログ記事は、1年越しの続編の記事になります!(遅い!笑)

Instagram API仕様変更・終了・廃止関連の情報まとめ。インスタの写真をWebサイトで直接表示していた方は要注意! 

でご紹介させていただいたように、2018年4月、それまで提供されていたInstagram APIの一部機能が終了したことにより、Webサイトに埋め込んでいたInstagramの写真が突然表示されなくなってしまったということがありました。

昨年2018年の段階では、Instagramを運営するFaceBook社側からは、「Instagram APIの代替方法については2019年の初頭に何らかのアナウンスします(要約)」というアナウンスがあっただけなのですが、事実上Instagram Graph APIがそれまでのInstagram APIにとって代わるものになっているので、今回のブログ記事ではInstagram Graph APIを使ってWebサイトにインスタの写真を埋め込む方法について、サンプルコードとなるプログラムを交えてご紹介させていただきます!

Instagram Graph APIとは何か?

Instagram API仕様変更・終了・廃止関連の情報まとめ。インスタの写真をWebサイトで直接表示していた方は要注意! でも簡単にご紹介させていたdきましたが、Instagram Graph APIは、InstagramのビジネスアカウントをサポートするためのAPIです。

元々Instagramが提供していたAPI(Instagram API)は、決まりごとに従ってさえくれれば、Instagramの提供するデータを自由に使うことができるよ、というものになっていました。

しかしながら、FaceBook社が起こした5,000万人規模と言われる個人情報流出(詳細はFacebookの5,000万人分の情報流出について、いま知っておくべきこと等を参照ください)によって、個人情報取扱対策が急を要する状況になったFaceBook社は、対策の一環として、この記事の冒頭でもお伝えしたように、Instagram APIの突然の機能制限(元々予定していた機能制限を予定より前倒しで実施)および2020年でInstagram APIの提供を完全に終了する旨を発表した、そんな経緯がありました。

実は上述した個人情報流出の件の少し前から、FaceBook社はInstagram APIというものを整備しだしていたこともあり、元々提供されていたInstagram APIが事実上使い物にならなくなってしまった現在、Instagram Graph APIを使うことが、Webサイトなどにインスタの写真を埋め込むことができる最適な方法となっているのです。

Instagramのビジネスアカウントとは??

先ほど「Instagram Graph APIは、InstagramのビジネスアカウントをサポートするためのAPIです。」というご紹介をさせていただきました。

では、Instagramのビジネスアカウントとは一体どのようなものなのでしょうか。

こんにちは!ケインコスゲ(@keinkosuge)です。 今回は、Instagramのアカウントをビジネスアカウント・ビジネスプロフィ...

実は以前、Instagramをビジネスアカウントに変更する方法。Instagram Graph APIを使用するなら必見!という記事で、ArrownでもInstagramのビジネスアカウントについて紹介させていただいたことがありました。

その時にはビジネスアカウントの設定方法を中心にご紹介させていただきましたが、そもそもInstagramのビジネスアカウントとは、

  • Instagramに投稿した内容がどれくらいの人のタイムラインに表示されているのかを知ることができる
  • それぞれの投稿に何経由で、どれくらいの人が訪れたのかを知ることができる
  • ビジネスを展開している場所や連絡先を公開したり、広告を打ったりすることができる

などのように、通常のInstagramアカウントでは知ることができない情報を多々知れたり、様々な商業的施策を行うことができるようになるものなんです!

ちなみに僕も、謎に自分のInstagramアカウントをビジネスアカウントにしています。笑

Instagram Graph APIを使ってWebサイトにインスタの写真を埋め込むために必要なもの

前書きが長くなってしまいましたが、いよいよここから、Instagram Graph APIを使ってWebサイトにインスタの写真を埋め込む方法をご紹介していきます。

まずは、Instagram Graph APIを使ってWebサイトにインスタの写真を埋め込むために前もって準備する必要があるものを調べてみました。

順番に羅列すると、

  1. 自分自身が所有しているInstagramアカウントをビジネスアカウントにする
  2. FaceBookページを用意し、Instaramのビジネスアカウントと連携させる
  3. FaceBook開発者ページのGraph APIエクスプローラーをいじり倒して、アクセストークンおよびInstagramビジネスアカウントIDと呼ばれるものを取得する、(アクセストークンはAPIを使用するための許可証みたいなものだと思ってください!)

以上になります。

Instagram graph APIを使用するために必要な情報

画像でも図解してみました。最終的に必要なアクセストークンを取得するために、3段階に渡ってアクセストークンその1・その2・その3と取得する手続きが必要になることも、念頭においておいてくださいね!(最終的に必要になるのは「アクセストークンその3」です!)

1については、Instagramをビジネスアカウントに変更する方法。Instagram Graph APIを使用するなら必見!の記事で設定方法について詳しくご紹介させていただいていますので、ぜひご覧になってください!

ここから先は、上記1が設定済であることを前提にしてお話を進めていきます!

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

それではここからは、FaceBookページとInstagramビジネスアカウントを連携させる方法、前の章でご紹介させて頂いた「必要なものリスト」の2に該当する部分について、ご説明させていただきます!

InstagramビジネスアカウントとFaceBookページの連携

まずは、Instagramのビジネスアカウントと連携させたFaceBookページを開いて、「設定」を選択します。

InstagramビジネスアカウントとFaceBookページの連携

出てきた画面で、上記画像で赤枠で囲んだ箇所にある「Instagram」を選択します。

InstagramビジネスアカウントとFaceBookページの連携

次に出てきた画面で、上記画像で赤枠で囲んだ箇所にある「アカウントをリンク」を選択します。

InstagramビジネスアカウントとFaceBookページの連携

Instagramへのログインが求められますので、ビジネスアカウントにしたInstagramアカウントのIDとパスワードを使ってログインします。

以上で、FaceBookページで行う設定は終了です!

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

1、FaceBookアプリを作成

それでは次に進みます!

FaceBookアプリを作成しましょう。FaceBookアプリとはなんぞや?と思う方もいらっしゃるかもしれませんが、Instagram Graph APIのように、FaceBookやInstagramが提供するデータや機能を使って何かを作りたい場合に作成が必須なものになっています。

まずは、FaceBook開発者ページにアクセスします。

Instagram Graph APIを利用するために必要な設定手順(Facebook開発者ページの画面)

マイアプリというところをクリックすると「新しいアプリを追加する」というメニューが表示されますので、こちらを選択します。

Instagram Graph APIを利用するために必要な設定手順(Facebookアプリ作成の画面)

FaceBookのアプリを作成するように促されますので、アプリ名を「表示名」の入力欄に入力します。

「insta」や「facebook」などの文字は使用できないので、念の為注意してくださいね!

今回僕は、このブログ記事のために新しく「tatsuya_test」というアプリ名で新しい FaceBookアプリを作成しました。

途中でセキュリティチェックとして、Google reCAPTCHAをWebサイトのお問い合わせフォームに実装する方法でもご紹介したようなreCAPTCHAと呼ばれるものが表示され、色々なことを尋ねられると思いますが、指示通りに進めていっていただければ問題ありません(reCAPTCHAが気になる方は、Google reCAPTCHAをWebサイトのお問い合わせフォームに実装する方法をご覧ください)。

Instagram Graph APIを利用するために必要な設定手順(Facebookアプリ作成完了の画面)

上記画像のような状態になれば、ここまでは成功です!

2、FaceBook開発者ページやGraph APIエクスプローラーにアクセスして3段階に渡ってアクセストークンを取得する

次に、FaceBook開発者ページのGraph APIエクスプローラーにアクセスして、必要な手続きを踏んでいただきます。

ここが少し手間で、前述したようにアクセストークンと呼ばれる許可証のコード(英数字の文字の羅列)を3段階に渡って取得する必要がある分だけ、時間がかかる箇所になっています、頑張りましょう!

2-1、1段階目のアクセストークンを取得する

それでは、前の章の内容に引き続いて、FaceBook開発者ページのGraph APIエクスプローラーにアクセスします。

Instagram Graph APIを利用するために必要な設定手順(アクセストークン取得の手順画面)

上記のような画面になったら、画像に掲載した通り、「トークンを取得」を選択→「ユーザーアクセストークンを取得」を選択します。

Instagram Graph APIを利用するために必要な設定手順(アクセス許可を選択)上記のような画面が出てきます。

色々自分でも調べてみましたが、端的にいうと現在、Instagram Graph APIを利用するためには、

  • 自分のアカウントの写真が取得できればOKの場合→「business_management・pages_show_list・manage_pages_instagram_basic」にチェック
  • 自分のアカウントの写真も取得したいし、他のInstagramビジネスアカウントの写真も取得したい場合→上記4つに加えて「instagram_manage_comments・instagram_manage_insights」にチェック

をする必要があるようです。

チェックを入れたら「アクセストークンを取得」を選択します。

ログインを求められたら、素直にログインして先に進みましょう。

Instagram Graph APIを利用するために必要な設定手順(1段階目のアクセストークンが表示)

すると、先ほどの画面に戻るのですが、上記画像の赤枠部分に英数字の羅列が新しく表示されるようになっています。

これが、1段階目のアクセストークンなので、必ずメモやコピペなどをして控えておいてください!!この後使用します!

2-2、2段階目のアクセストークンを取得する

1段階目のアクセストークンが取得できたので、2段階目のアクセストークン取得に入っていきます。

Instagram Graph APIを利用するために必要な設定手順(マイアプリへの再アクセス)

ページ上部にある「マイアプリ」から、先ほど制作したFaceBookアプリの名前を選択します。今回の僕の場合だと「tatsuya_test」が該当しますね!

Instagram Graph APIを利用するために必要な設定手順(アプリIDとapp secretの取得)

移動した先のページで左サイドバーにある「設定」→「ベーシック」を選択すると、上記のような画面になります。

ここで表示されていえる「アプリID」と「app secret」をメモなどして控えておいてください。この後使用します。

※尚、app secretは初期状態では「●●●●」のような表記のされ方をしているので、表示してコピーしたい場合は「表示」というボタンが最初は表示されているので(上記画像でいうリセットボタンの位置に)、表示を選択します。ご自身のFaceBookアカウントのパスワード入力を求められるので、入力するとapp secretが表示されるようになります。

次に、以下のURLにアクセスしましょう。

https://graph.facebook.com/v3.0/oauth/access_token?grant_type=fb_exchange_token&client_id=【ここにアプリIDを入力】&client_secret=【ここにapp secretを入力】&fb_exchange_token=【ここに1段階目のアクセストークンを入力】

※【】の記号はもちろん削除した状態にしてくださいね!

すると下記のような画面になります。

Instagram Graph APIを利用するために必要な設定手順(2段階目のアクセストークンが表示)

ここで出てきたaccess_tokenのところに書いている英数字の羅列が、2段階目のアクセストークンになります。こちらもこの後何度か使用しますので、メモなりコピペなりして控えておきましょう。

2-3、3段階目のアクセストークンを取得する

いよいよ3段階目のアクセストークンの取得に入っていきます。

まずは、先ほど取得した2段階目のアクセストークンを使って以下のURLにアクセスしましょう。

https://graph.facebook.com/v3.0/me?access_token=【2段階目のアクセストークンをここに入力】

すると下記の画像のような画面になります。

FaceBookユーザーIDが表示

ここで出てきたidをこの後使いますので、メモやコピペなどをして控えておいてください!ちなみにnameのところには、おそらくあなたのFaceBook名が表示されるかと思います。

次に、直前に取得したidと2段階目のアクセストークンを使って、以下のURLにアクセスしましょう。

https://graph.facebook.com/v3.0/【直前に取得したidをここに入力】/accounts?access_token=【2段階目のアクセストークンをここに入力】

すると下記の画像のような画面になります。

Instagram Graph APIを利用するために必要な設定手順(3段階目のアクセストークンが表示)僕のように複数FaceBookページを所有している場合は複数のデータが羅列して表示されますが、1つしかFaceBookページを所有していない場合は、1つ分の情報セットしか表示されないようになっています。

Instagramをビジネスアカウントに変更する方法。Instagram Graph APIを使用するなら必見!に沿った方もそうでない方も、Instagramのビジネスアカウントを作成する時に連携させたFaceBookページの名前が表示されているはずなので、そこに付随して表示されているアクセストークンをメモなりコピペなどして控えておきましょう。

access_token」という場所に書かれているので、注意してくださいね!

3、InstagramビジネスアカウントIDを取得する

3段階目のアクセストークンを取得して安心したみなさん、実はもう少しやることがあります。笑

本当長いですよね。。。

3-1、アクセストークンデバッガーでここまでの設定内容に相違がないかをチェック

まずは、アクセストークンデバッガーにアクセスしましょう。このあたりで、ここまでの設定内容に相違がないかを再度確認する目的もあります。

アクセストークンデバッガーの画面

上記の画像のような画面が表示されますので、「デバッグするアクセストークンを入力してください」という入力欄に、前の章で取得した3段階目のアクセストークンを入力します。

アクセストークンデバッガーの結果

するとここで、上記のような画面が出てきます。

ここで上記画像の赤枠で囲んでいる有効期限のところが「受け取らない」になっており、スコープのところにかなり前の段階で設定した「アクセス許可を選択」の画面でチェックした項目が含まれていることを確認してください。

以上の内容が満たされていればOKですが、相違があると設定のやり直しが必要になるので注意してくださいね!

3-2、InstagramビジネスアカウントIDを取得

ではいよいよ、Instagramビジネスアカウントの取得をします!

FaceBook開発者ページのGraph APIエクスプローラー に再びアクセスしましょう。

instagram business accountが表示される

ページが移動したら上記の画像のような段取りを踏んで、Instagram ビジネスアカウントのidを取得しましょう。

  • 1、アクセストークン入力欄に3段階目のアクセストークンを入力
  • 2、URLの部分を「me_fields=instagram_business_account」にする
  • 3、送信ボタンを押す

この工程を踏むと、上記画像の4にあるようにinstagramビジネスアカウントのidが表示されます。

これでようやく、Instagram Graph APIを利用するのに必要な情報を取得する工程が終了になります。

この後、プログラムでInstagram Graph APIを使ってインスタの写真の情報を取得するのに、「3段階目のアクセストークン」と「InstagramビジネスアカウントID」が必要になりますので、引き続き注意してくださいね!

4、プログラミングでInstagram Graph API経由でインスタの写真をWebサイトに表示する

それでは、これまで掲載した内容から「3段階目のアクセストークン」と「InstagramビジネスアカウントID」を、使って、プログラミングでInstagram Graph API経由でインスタの写真をWebサイトに表示してみたいと思います。

JavaScriptだけで行う方法と、PHPなどサーバサイドプログラムを使って行う方法とあるのですが、JavaScriptのみで行うとアクセストークンなどが他人にバレてしまい、セキュリティ的によろしくないので、今回はPHPなどのサーバサイドプログラムを混ぜ合わせる形で、サンプルコードをご紹介させていただきます!

あくまで今回はサンプルなので、見た目を変えたい場合はHTMLやCSSをそれぞれいじっていただいたり、ES2015以降の記法を使用したい場合は適宜JavaScriptを置き換えてみてくださいね!

【ファイルのディレクトリ構造】

Instagram  graph apiを使ってインスタの写真を取得するためのサンプルコードのディレクトリ構造

【HTML(今回ajax通信用にaxiosというライブラリを使いました)】
<!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>

【CSSコード(中身はデザインに合わせて適宜置き換えてください)】


img{
    max-width: 100%;
    height: auto;
}
.gallery{
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.gallery-item{
    flex: 1 1 33.333%;
    -ms-flex: 1 1 33.333%;
}

【JavaScriptコード(ES2015以降の記法を使いたい方は適宜置き換えてください)】


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);
})


【PHPコード】


<?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/v3.3/';
$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;


Webサイト制作依頼を受けたお客様のInstagramの写真をWebサイトに表示したい場合は結局どうしたらいいの??

長かったですが、ここまででInstagram Graph APIを使って、Webサイトにインスタの写真を埋め込む方法について、基本的な段取りをご紹介させていただきました。

しかし!もしお客様からWebサイト制作依頼を受けた場合、お客様全員がこんな長い段取りの作業をできるかといえば、おそらくできない方の方が多いですよね・・・

ということで、ここからは、「お客様からWebサイト制作依頼を受けた場合に、どこまでをお客様にやっていただき、どこから制作者が対応する必要があるのか」についてご紹介させていただきます。
(なお、お客様所有のFaceBookページやInstagramアカウントへWebサイト制作者が自由にログインして使えるという状況の場合は、この章の内容は無視していただいて構いません)

簡潔にまとめると、

  • お客様にやっていただくこと・・・お客様が所有しているInstagramアカウントをビジネスアカウントにする
  • Webサイト制作者が行うこと・・・自分自身でも別途Instagramビジネスアカウントを用意し、FaceBookページと連携(Instagramビジネスアカウント制作時に作られる新規のFaceBookページでOK) & FaceBookページとInstagramアカウントの連携 & 本記事でご紹介した「アクセストークンおよびInstagramビジネスアカウントIDを取得する」工程以降全ての内容

になります。

お客様自身もWebサイト制作者自身もInstagramのビジネスアカウントを使用 & FaceBookページとの連携をしていただくというのがポイントですね!

この場合、サンプルコードの部分でご紹介した内容のうち、「自分が所有するアカウント以外のInstagramビジネスアカウントが投稿している写真も取得したい場合」に該当するコードを使用していただく必要があるので、ご注意ください!

ただ、この内容を行う場合は、制作者が何らかの理由で制作したWebサイトの管理・運用保守などから外れるケースがある場合、それらを引き継いだ方に再度行っていただく必要があるので、注意が必要です!

まとめ

ということで、今回はかなりの超大作になりましたが、「Instagram Graph APIを使って、Webサイトにインスタの写真を埋め込む方法」についてご紹介させていただきました!

こちらの記事を見てもうまくいかない!などありましたら、わかる範囲でお答えすることもできますので(繁忙時にはできないかもしれません申し訳ありません)、お問い合わせのページからどうぞお問い合わせください!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする