Instagramの投稿をWordPressサイトに埋め込む

WordPressサイトでInstagramの投稿を表示させたい時に埋め込む方法メモです。

Instagramの埋め込みコードを使用したりプラグインなどの埋め込み専用ツールを使用する方法があります。用途や見せ方によって最適な方法は異なると思います。自分にあった方法を見つけていきましょう。

一つの投稿を埋め込む – Instagramの埋め込みコードを利用

YouTubeやTwitterなどであれば、WordPressの埋め込みブロックを利用して、URLを貼り付けるだけで投稿の内容を表示させることができるのですが、Instagramは現在その機能の提供をしていません。

【参照】オブジェクトの埋め込み – サポートフォーラム – WordPress.org 日本語

Instagramの特定の投稿を埋め込むには、Instagramから提供されている「埋め込みコード」というものを利用します。 画像や動画、投稿テキストやいいね数も表示されます。埋め込まれた投稿をクリックするとInstagramのページやアプリに飛びます。

Instagramの埋め込みコードはアプリでは表示されないので、ブラウザから取得します。
埋め込みたいInstagramの投稿ページに行き、右上にある「…」マークをクリック。

このブロックにコピーした埋め込みコードをペーストして投稿を公開・更新すれば表示されます。

非公開アカウントの投稿は埋め込みコードを取得できません。ストーリーズの埋め込みもできませんが、ストーリーズを投稿としてシェアした場合はできます。外部ツールによってはストーリーズも埋め込めるものがあるようです。

投稿一覧を埋め込む – プラグイン利用

最新の投稿を自動更新して一覧で表示させる場合はプラグインがおすすめです。

WordPressにはさまざまな埋め込みプラグインがありますが、ここでは「Smash Balloon Social Photo Feed」を使った方法を紹介していきます。

「Smash Balloon Social Photo Feed」は簡単にInstagramの投稿一覧を表示させることができます。有料版と無料版があり、無料版ではできることが限られますが多少のカスタマイズは可能です。 サイト上で投稿を全画面表示にしたい場合やストーリーズの表示、いいねやコメント数も表示させたい、カルーセル表示させたいといった場合は有料版で対応できます。

Instagramは仕様の変更が多いので、しっかりメンテナンスしているサービスを選ぶことがポイントです。プラグインの利用者が多いので、分からないことやエラーの解決策が探しやすいものこのプラグインを使用するメリットです。

プラグインインストール＆有効化

「Smash Balloon Social Photo Feed」で検索しプラグインを追加します。

【プラグインページ】
Smash Balloon Social Photo Feed  – WordPress プラグイン | WordPress.org 日本語

クリックすると以下のような画面が表示されます。

まだフィードを作成していない場合は以下のような画面が表示されるかと思います。ここで「新規追加」をクリックします。

次にフィード形式を選択します。無料版では「ユーザータイムライン」のみ利用可能なのでそのまま「次へ」をクリック。

続いて「ソースを追加」をクリックするとリダイレクトされます。

リダイレクトされると、以下のような画面が表示されます。

この時に「Basic」か「Business」というボタンをクリックすると自動的に連携されるのですが、インスタグラムアカウントにログインしている必要があります。この時点でサイトに埋め込みたいインスタアカウントにログインしていない場合、ボタンをクリックするとInstagramのログイン画面になります。

ログインしていない状態であったりアクセストークンがわかる場合は「Add Acount Manually」ボタンから連携することができます。
クリックすると以下のような画面が表示されるので、アカウントIDとアクセストークンを入力して追加してください。

ここでは「Basic」を選択して進めていきます。クリックすると画面が切り替わるので、ここで「許可をする」をクリックします。

次にサイトのドメインが正しいかの確認画面が表示されます。間違いなければ「Yes, …」の方をクリックして進めます。

ここまで進め、連携が完了すると「Instagramフィードを作成」の画面上のソースが追加されています。チェックを入れ、「次へ」をクリックします。

フィードのプレビューやカスタマイズ・設定などの画面に切り替わります。上部に「埋め込む」ボタンがあるので、そちらをクリックするとショートコードが表示されます。

コピーをクリックして埋め込みたい投稿記事の該当箇所にショートコードをペーストします。そのままペーストすれば自動的にショートコードブロックで反映されます。

これでインスタグラムフィードが表示されます。投稿を更新してちゃんと表示されているか確認してみてください。

無料版ではカスタムできる内容は限られますが、投稿数や列の表示数、ヘッダーを表示させない、フォローボタンの色やテキストを変更したりといったことができるので、サイトに合わせて変更してみてください。

外部ツールを利用して埋め込む

Instagramの埋め込みコードやWordPressのプラグイン以外に、Instagramをサイトに埋め込めるサービスもあります。

基本的には有料のものが多いですが、表示デザインや設定内容などによっては外部ツールを使用する選択肢も持っておいた方がいいでしょう。

【旅アトリーチ】

旅アトリーチは他の人の投稿許可を取ってくれるので、自分で許可を取って管理する手間を任せることができます。自分のInstagram投稿以外をサイトに活用したい場合におすすめです。
WordPressでサイトを運用している場合は、簡単に埋め込める専用コードが発行され、新しい投稿を自動で追加させることも可能です。

【EmbedSocial】

Freeプランではアカウント投稿・ハッシュタグ投稿の取得のみが利用可能です。ストーリーズの表示も可能でハッシュタグを利用したデータ収集をしたい方にもおすすめです。
PROプランはより多くの機能が使えます。販促活動やUGC活用を取り入れたい方は検討してみてください。

【Elfsight Instagram Feed】

200ビュー数以内で1サイトのみの利用であれば無料で使用できます。それ以上になる場合は有料プランの契約が必要です。
ビュー数は、ウィジェットが Web ページに読み込まれる回数とのこと。制限は月ごとで月に一度リセットされます。

【設定や使い方参考】200viewsまでは無料 インスタをwebサイトやブログに簡単に表示させる方法 | イッコー建築事務所のサブサイト

これらの他にもたくさんあるので、サイトでどのように表示させるかやInstagramをどう利用したいかによって選んでみてください。

埋め込む際の注意点

Instagramの投稿をサイトに埋め込む際のデメリットの一つとして、多くの投稿を埋め込むと表示速度が遅くなることがあります。Instagramの表示があることでサイトからの離脱があるのは考えものです。影響が出ないように対策が必要なこともあります。

その他にもいくつか注意点があるのでおさえておきましょう。

Instagram自体にトラブルがあった時に表示されない

Instagramの仕様変更や何かしら技術トラブルなどがあった場合、埋め込んだ投稿内容がうまく表示されないことがあります。

非表示になったらコンテンツとして成り立たなくなってしまうような場合、Instagramの埋め込みではなく直接画像や投稿内容を掲載しておいた方が安全ではあります。

投稿を削除したら表示されない

単一投稿の埋め込みコードを利用している場合、Instagramで投稿が削除されるとサイトに埋め込んだものはエラーになり表示されません。

正常に反映されているか定期的にチェックし、削除されている場合は差し替えなどメンテナンスが必要です。

自分の投稿以外を埋め込むときは著作権・肖像権に注意

自身の投稿なら気にする必要はありませんが、他の人の投稿を引用する際には、無断で使用せず許可を取るようにした方が良いでしょう。

著作権・肖像権の侵害になるかどうか、というところは難しい問題のようでもありますが、無断で使用すると権利の侵害となる可能性もないわけではありません。利用には十分注意していきましょう。