ブログやWEBサイトにインスタグラムの投稿を埋め込む方法をお伝えします。この記事ではサイトに埋め込む方法を4パターン紹介し、それぞれ概要を説明します。技術的なハードルもありますが、利用目的に合わせてどの方法を使うのがベターか最終的にまとめます。
インスタの投稿を利用してサイト上にインスタのコンテンツを表示することで、ブログやサイトへのアクセスを行わずコンテンツの更新が可能になります。気軽にインスタから写真を投稿するだけで更新ができるので、サイトの運用が楽になります。
2020年6月にインスタグラムAPIが廃止され、かわりに2種類の新APIが利用可能になりました。
旧APIで表示していたサイトやサービスは軒並み表示ができなくなりました。最近、新APIに対応したサービスや連携方法の記事が多く出てきたので簡単にまとめます。
インスタグラムの埋め込み方法
- APIを利用して投稿を表示（instagramグラフAPI利用）
- 簡易的なAPIを利用して投稿を表示（instagram基本表示API利用）
- 外部サービスを利用して投稿を表示
- 公式サイトの埋め込み機能を利用して投稿を表示
数字が若いほど敷居が高くなります。
※ 補足 ※
APIとは、ざっくりと説明するとインスタグラムで使用している機能の一部を利用させてもらうことです。１と２はそれぞれ、インスタグラム（フェイスブック）の規約に従って提供されているAPIを利用してサイトにインスタグラムの投稿を表示させます。１と２の２種類のAPIの簡単な違いは、以下の通りです。
１（グラフAPI）ができること
ビジネスアカウントの情報取得、インサイトデータの取得、ハッシュタグが付いたメディアの発見、@メンションが付いたメディアの発見など
２（基本表示API）ができること
インスタグラムアカウントの基本的な情報（プロフィール情報、写真、動画、アルバム）を取得することが可能になります。
他にもスクレイピングという荒業もありますが、先日FaceBookのポリシー変更があり、限りなく黒くなったので利用しないほうがベターです。
APIを利用して投稿を表示（instagramグラフAPI利用）
基本表示APIに比べてできることが多い分、導入の敷居は高くなります。「プロアカウント」に変更し、利用目的をFaceBook社に伝え、審査を通す必要があります。当ブログではライトに利用する想定のため、詳しい導入方法の解説は割愛します。
instagramグラフAPIの詳細については、下記から確認できます。
https://developers.facebook.com/docs/instagram-api
APIを利用して投稿を表示（instagram基本表示API利用）
技術的な手間がかかりますが、PHPやCSSの知識があれば、表示件数の調整や好みの見た目で表示をさせることが可能です。別記事にて実際に連携を試した記事をアップします。
instagram基本表示APIについては、下記から確認できます。
https://developers.facebook.com/docs/instagram-basic-display-api
■簡易手順
フェイスブックの開発者アカウントを入手
Facebookアプリを作成
Instagram基本表示を構成する
Instagramテストユーザーの追加
Instagramテストユーザーの認証
アプリのライブモードへの切り替え
アクセストークンから取得した投稿を表示する
※後日別記事を作成しリンクを張ります。
外部サービスを利用して投稿を表示
APIを利用するのが難しい場合、外部サービスを利用することで簡単にサイトと連携をすることが可能です。
旧APIが廃止になり、いろいろあったサービスがぐっと減ってしまいましたが新APIリリースから月日がたち、新しいAPIに対応したサービスがいくつか出てきています。
InstaWindow
細かい手間がいらないのが特徴で、さくっと導入できて非常に便利です。
・月間3万PVまで無料
・無制限版は300/月で利用可能
注意：無料版はサービス名が表示されてしまう。
snapwidget
ウィジェットの種類が豊富でいろいろな表示方法を試すことができます。
・登録に少々手間がかかる
・無料版
注意：無料版は直接インスタ記事へリンクされない。
ご紹介したサービス以外にも類似サービスがあるので、ご自身のサイトの利用目的に合わせて最適なサービスを選んでください。
公式サイトの埋め込み機能を利用して投稿を表示
公式サイトの埋め込みコードを利用することでサイトにインスタの記事を表示できます。ただしこの方法では指定した特定の記事のみを表示します。
埋め込み方法
埋め込みたい記事の詳細を開きます。
赤枠で囲った ・・・ 部分をクリックします。
埋め込みをクリックすると、埋め込み用のコードが表示されます。
サイト内の表示したい箇所にコピーしたコードを張り付ければ完成です。表示側のデザインは、公式インスタグラムの表示とほぼ同等のもので表示されます。
まとめ
インスタで投稿した記事をサイトやブログで表示するための方法を4パターンご紹介しました。
ざっくりと使い分けは以下の基準で行うとよいでしょう。
■「グラフAPIを利用する場合」
・自分の投稿を取得・表示する場合
・自由にデザインを組みたい
・ハッシュタグやメンションを利用して広く投稿を取得・表示する場合
・基本表示APIで取得できない項目を取得したい。
■「基本表示APIを利用する場合」
・自分の投稿を取得・表示する場合
・自由にデザインを組みたい
・表示にコストをかけたくない
■「外部サービスを利用する場合」
・時間をかけずに導入したい。
・クレジットの表記やコストがかかっても問題ない。
■「公式サイトの埋め込み機能を利用する場合」
・特定の記事をピックアップして表示する場合
インスタで投稿した記事をサイトに埋め込むその２、では詳細を記載できなかった基本表示APIを利用して投稿を表示する方法と、その際の注意点をまとめます。
