【Instagram】自社のInstagramアカウントの画像をサイトへ表示させる方法

Instagramをメインで広報活動をしているような企業が、自社サイトでもInstagramの画像を見せたいという要望があった場合などに使える。備忘録的に記しておく。リンクをつければ良いのであまり需要は無いが、写真を使って発信するプロモーションのLPなどでも使えるかもしれない。

■Facebookでページを作る

---

https://www.facebook.com/pages/create/
でFacebookページを作る。特にInstagram用なので、特に内容は必要ない。

■Instagramをビジネスアカウントにする

---

Instagramを開き、設定からプロアカウントに切り替えるでビジネスアカウントに変更する。新規で立ち上げる場合は、制作会社のほうで設定まわりをクリアにできるが、すでにクライアントがInstagramアカウントを持っている場合は、設定をしてもらうか、委託してもらうか、運用を決める必要がある。このあたりがちょっとしたハードルになる。

■Facebook側のデベロッパーページで新アプリを作る。

---

https://developers.facebook.com/

・その他を選ぶ
・アプリタイプはビジネス

で作成。

■Facebook側グラフAPIエクスプローラ

---

https://developers.facebook.com/tools/explorer/
で作成したアプリを選択
アクセス許可に

pages_show_list
business_management
instagram_basic
instagram_manage_comments
instagram_manage_insights
instagram_content_publish
instagram_manage_messages
pages_read_engagement

を追加

トークンを作成し、iマークでアクセストークンデバッガーを開く。
アクセストークンデバッガーの結果の一番下にある
「アクセストークンを延長」というボタンを押す

すると、「この長期アクセストークンは期限切れになりません」と出るので
このときの【①アクセストークン】を保存しておく。


グラフAPIエクスプローラに戻り、
ユーザーまたはページで該当のFacebookページを選択し、
getの部分にme?fields=instagram_business_account
と入力し、送信。
そこで表示された【②IDを保存】

この①と②を組み合わせて、apiリクエストを作成。

　（例） https://graph.facebook.com/v18.0/②?
fields=name%2Cmedia.limit(10)
%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2
Cthumbnail_url%7D&access_token=①

あとは、このapiリクエストで返ってきたデータを整えて、Javascriptでajaxを使って呼び出す。
例えばjQuaryを使って、下記のようなソースで表示させることができる。


実際に実務で使う場合は、NEW的な使い方や、グラフィック的に写真だけを並べてリッチ感を出すなど、そもそもの見せ方の企画が必要かと思う。さらにInstagram投稿の文章中にタグやキーワードを入れることで、写真のソートや絞り込みも可能。
うまく連携させれば面白いサイトができるかもしれない。