📑

実は大変なInstagram埋め込みをFacebookページを利用して擬似的に実現する

2024/02/08に公開

X（旧Twitter）埋め込みと同じノリでいけると思っていたら、存外苦労したのでまとめておきます。

想定する構成

Next.js/Nuxt.js等で構成されるWebページにInstagramの投稿一覧を埋め込む
Webページを閲覧するユーザーにログインを要求しない

何が大変か

1. 投稿一覧の埋め込みはコピー＆ペーストだけでは実装できない

はじめに、Instagramの単一投稿を埋め込みたいだけなら埋め込みコードをコピー＆ペーストすれば良いだけなので今回の話は関係ありません。

一方で、「Instagramを埋め込みたい」という要求は大抵の場合「投稿一覧を埋め込みたい」であり、これを実現するためにはInstagram Graph API（もしくは有料のサービス）の使用が必要不可欠になります。

2. Instagram Graph APIの本番運用にはアプリレビューが必要

実装に少し時間がかかるだけならいいのですが、Instagram Graph APIの使用自体にも制約があります。

特に気をつけないといけないのがアプリレビューで、Instagram Graph APIを使用したWebページを公開する場合おそらくほぼすべてのケースにおいてアプリレビューを受ける必要があるのですが、単語の印象から受けるイメージの通りかなり大変です。

申請は英語で行わないといけない（日本語での申請も可能なものの承認されにくく、またリジェクト時の日本語テキストはテンプレートとのこと）
ユーザーにログインを要求しないページでも、申請のためにログイン機能を実装しないといけない（Facebookログインを用いたパーミッションの確認のために必須）

ここまで来るともう気軽に実装できるものではなくなってしまうので、代替案を検討します。

本記事の内容

InstagramをWebページに直接埋め込むのではなく、InstagramとFacebookページに同じ内容を同時投稿する設定を行い、Facebookページの方をWebページに埋め込むことで、Instagram埋め込みを擬似的に実現します。

運用イメージは下記。

手順1. Instagram側の準備

1.1　Instagramアカウントを作成する

https://www.instagram.com/ にアクセスし、アカウントの登録まで行います。

1.2 Instagramアカウントをビジネスアカウントに設定

Instagramトップから。

画面左下「その他」をクリック

表示されたメニューの中から「設定」をクリック

「プロアカウントに切り替える」をクリック

アカウントタイプを選択し、「次へ」をクリック
※今回は「ビジネス」を選択したと仮定

以降、適切な内容を選択し「次へ」をクリック
※ここで入力する内容は後からでも変更可能

ビジネスアカウントの作成が完了

手順2. Facebook側の準備

2.1 Facebookアカウントの作成

https://www.facebook.com/ にアクセスし、アカウントの登録まで行います。

2.2 Facebookページの作成

Facebookトップから。

「ページ」をクリック

「新しいページを作成」をクリック

必要な情報を入力し、「Facebookページを作成」をクリック
以降、必要な情報を入力し「次へ」をクリック
※ここで入力する内容は後からでも変更可能

Facebookページの作成が完了

手順3. InstagramとFacebookの連携

Facebookページトップから。

「Meta Business Suite」をクリック
Meta Business Suiteページに遷移

「Instagramプロフィールをリンク」をクリック

「次へ」をクリック

「〜としてログイン」をクリック
※Instagramへのログインを求められた場合はログイン

InstagramとFacebookのリンクが完了

手順4. 同時投稿テスト

Meta Business Suiteトップから。

「投稿を作成」をクリック

必要な情報を入力し、「公開する」をクリック

Instagramに投稿されていることを確認

Facebookページにも投稿されていることを確認

手順5. Facebookページの埋め込み

あとは通常のFacebookページ埋め込みと同様、ページプラグインに必要な情報を入力した後コードを取得、Webページに埋め込めば完了です。

おわりに

Instagram埋め込みが必須の場合には適用できませんが、そうでない場合は今回の方法での実装を検討してみてはいかがでしょうか。

おまけ：Instagram(SPアプリ)からの同時投稿

※手順1〜3の作業は必要

SPからInstagramアプリを開き、手順1で作成したアカウントでログイン

画面下、一番右のアイコンをクリック

「アカウントセンター」をクリック

「プロフィール間のシェア」をクリック

Instagramアカウントをクリック

「シェア先」が設定されており、「自動的にシェア」の各項目がONになっていればOK（同時投稿される状態）

あとは実際にSPアプリから投稿してみて、同時投稿できていれば完了です。

同時投稿に失敗した場合はSPアプリの再起動や、Instagram/Facebookの連携を解除→再連携で解決できる場合があります。

Discussion