ホームページにInstagramの投稿を埋め込むには？WordPressでの手順と表示確認

たとえば作品1件の説明に投稿を添えるなら、その投稿URLを使う作業へ進めます。「投稿するたび、サイトの一覧にも追加したい」なら別の要件です。投稿URLを貼って表示できても、一覧の自動更新に対応しているとは限りません。

MiniLaunchの「SNS links」はプロフィールへ移動するリンクの設定です。ここで説明するWordPress用プラグインの手順はMiniLaunchには使えません。

参照したMeta公式READMEの導入説明では、必要環境はWordPress 5.9以上、PHP 7.4以上です。自分の環境と、プラグインを追加できるかを確認します。管理を他の人へ任せているなら、先に環境と導入可否を確認してください。必要バージョンを満たすことだけで、今のテーマや他のプラグインとの組み合わせまで動作確認できたことにはなりません。

1. WordPressの管理画面で「プラグイン」→「新規追加」を開く。
2. 「Meta Embeds」を検索し、公式の案内先・提供元を照合する。
3. 「今すぐインストール」、続いて「有効化」を選ぶ。

公式の案内先はWordPress.orgのMeta Embedsです。参照READMEは追加設定やアクセストークンを不要としています。導入時には現行の公式説明も開き、要件や手順が変わっていないかを確かめましょう。ここでは契約、費用、利用中の環境での導入成功までは確認していません。

表示したい投稿を開き、その投稿のURLを用意します。公式資料が示す形式は、画像・カルーセル投稿の「instagram.com/p/投稿の識別子/」と、リールの「instagram.com/reel/投稿の識別子/」です。プロフィールへの誘導と混同しないよう、今回は投稿単位のURLを選びます。

公式配布ページのFAQは公開されたInstagram投稿のURLを対象とし、ストーリーズには対応しないと説明しています。表示したいものがこの範囲に入るかを先に確認してください。

1. WordPressで掲載先の記事や固定ページの編集画面を開く。
2. 投稿URLだけを独立した行へ貼る。前後の説明文と同じ行へ混ぜない。
3. プレビューで、意図した投稿を指定しているか確認する。

URL形式と挿入方法は公式READMEの使い方に基づきます。ブロックエディタとクラシックエディタの対応も同資料に記載されています。操作画面が異なる場合は、自分の編集環境を記録して確認します。

投稿に何を補えばよいか迷う場合は、自分のサービスの案内文を作る記入欄で条件を整理できます。投稿の表示が止まったときも、サービスの内容と受付方法を本文から読める状態にしておきます。

編集画面で投稿が見えても、読者が開く公開ページで見えるかは別に確認します。公開・更新後のページURLを開き、PCとスマホで投稿の幅、文章との間隔、ページ全体の横はみ出しを確かめます。未ログインなど読者に近い状態でも開き、投稿が見えるか、投稿へのリンクが意図した先を開くかを記録してください。

表示されないときは、まず元の投稿URLを直接開き、URL違いや投稿自体の閲覧条件を確認します。次に、WordPress側でプラグインが有効か、正しい掲載ページを更新したかを確認します。ログイン中だけ見えるなど環境で差があれば、表示された文面と閲覧状態を残しましょう。原因が分かる前に、公開範囲を変える必要はありません。

公式READMEのPrivacy欄によると、この方式はWordPress側で埋め込みHTMLを取得し、閲覧時にInstagramの外部スクリプトを読み込んで表示します。元の投稿は開けてもページ内で表示されない場合は、外部スクリプトの読み込みや、サイト・ブラウザ側の制限を管理担当者と確認します。読者に設定解除を求める前に、どの条件で差が出るかを整理してください。

上記は確認の順番で、特定の環境での原因を断定するものではありません。元投稿を削除した、閲覧条件を変えた、プラグインやテーマを更新した場合も、公開ページで見直す予定をメモに残します。

まず、表示したい投稿1件のURLと、プラグインを追加する担当者を決めましょう。作業を進めたら、下のメモへ実際の結果を書き足します。「未確認」と「表示できなかった」を分けると、次に何を調べるかが明確になります。

WordPressで投稿を見せる目的なら、この確認を進めます。投稿一覧より、料金や受付先をまとめた案内とInstagramへのリンクが欲しい場合は、媒体の役割と相互リンクへ戻り、作成するページの範囲を決めてください。

新作を投稿するたびに一覧へ加えたいなら、指定URLの表示とは別に、自動フィードの条件を比べます。Smash Balloon Social Photo Feedの公式配布ページは、所有するInstagramアカウントを接続し、新しい投稿を自動表示する方式を案内しています。作成したフィードはブロック、ウィジェット、ショートコードで配置します。以下は提供者の仕様説明で、今回の接続・表示成功の記録ではありません。

前半の比較表で選んだ「自動で一覧を更新する」方法では、投稿URLを貼る代わりに、所有するアカウントを接続し、投稿を取得する間隔を設定します。

公式配布ページの「External Connections」欄では、Smashballoon.comを取得元の接続・認証に、Instagram.comとFacebook.comを投稿取得に使うと説明しています。接続予定のアカウントと、導入・認証を担当する人を先に決めます。

提供者のキャッシュ文書の2・3節によると、新しい投稿を確認する間隔は設定したキャッシュ時間に基づきます。取得した投稿はWordPressのデータベースへ保存され、期限が切れると再び新しい投稿を確認します。キャッシュ時間を長くすると取得の頻度は下がるため、「自動更新」を投稿直後の即時同期と捉えないようにしましょう。実際の反映時間は今回測っていません。

同文書はFree・Proのバージョン6.0以降について、ページ閲覧時ではなくバックグラウンドで新規投稿を確認する設定も案内しています。設定場所はWordPress管理画面の「Instagram Feed」→「Settings」→「Feeds」タブ→「Caching」です。自分の版と画面を照合し、設定値と有効・無効をメモします。

ここで説明した取得間隔はSmash Balloon方式の条件です。選んだ投稿URLを表示するMeta Embedsとは分けて判断してください。

自動フィードを検討するなら、まず接続元と更新担当を下のメモへ記入してください。導入後は、Instagram側の投稿と公開ページの一覧を照合し、PC・スマホで見えた範囲と確認日時を追記します。新しい投稿が見当たらない場合は、設定値、接続状態、公開ページの結果を分けて管理担当者と確認しましょう。