• 投稿日 2022/11/02
  • 最終更新日 2023/08/31

WordPressウェブサイトにインスタグラムを埋め込む方法まとめ

embed-instagram-feed-wordpress-plugin

個人での利用はもちろん最近では企業のマーケティングに欠かせなくなったSNSプラットフォームの一つであるInstagramは、素敵な写真や動画を公開したりフォロワーと共有するのに最適なSNSです。
そしてみなさんがWordPress(ワードプレス)で作ったウェブサイトをお持ちの場合は、Instagramの投稿を簡単に埋め込んで表示することができ、サイト上でもより多くの人に見せることが可能です。

今回は、WordPressウェブサイトにInstagramの投稿ウィジェットを埋め込む方法、Instagramとウェブを連携させることのメリットについて解説します。さらに、ソーシャルメディア・アグリゲーター(SNS埋め込みツール)であるEmbedSocialフィード機能を使って、自分のアカウントの投稿や、ハッシュタグで集めた投稿をウェブサイトに表示する方法もご紹介した、広範なガイドとなっていますので、ぜひお役立てください。

目次

  1. WordPressで作成したウェブサイトにInstagramを埋め込む方法
  2. プラグインなしでInstagram投稿を埋め込むツールの利用
  3. WordPressフィードプラグインの利用
  4. Instagram埋め込みコードの利用
  5. ショートコードの利用
  6. oEmbed URLの利用
  7. EmbedSocialフィード機能を使ってWordPressにInstagramを埋め込む方法
  8. WordPressにInstagramのハッシュタグフィードを埋め込む
  9. WordPressサイトへのInstagram Reelsウィジェットの埋め込み
  10. 複数のInstagramアカウントからInstagramの投稿を埋め込む
  11. Instagramの投稿フィードをWordPressサイトでおしゃれに表示する方法
  12. Instagramフィード、リール、ハッシュタグのWebサイトへの埋め込みデモ
  13. WordPressウェブサイトにInstagramを埋め込むメリット
  14. WordPressへのInstagram投稿埋め込みに関するFAQ
  15. さいごに 今回の重要ポイント

 

WordPressで作成したウェブサイトにInstagramを埋め込む方法

どのようなウェブサイトか、どのような機能を使いたいかによって、いくつかの方法があります。

1)EmbedSocialのようなInstagram埋め込みツールの利用(自動オプション)
2)WordPressフィードプラグインの利用(基本オプション)
3)Instagram埋め込みコードの利用(手動オプション)

方法1.プラグインなしでInstagram投稿を埋め込むツールの利用

WordPressには様々な機能を追加するためのプラグインが用意されています。私たちEmbedSosialでもプラグインを提供していますが、私たちの経験では、ユーザーのほとんどは、Instagramプラットフォームからのコードを貼り付けるためだけに、さらに別のプラグインを導入する必要はありません。EmbedSocialのフィード機能は、プラグインなしでInstagramの投稿を埋め込みたいユーザー向けに設計されています。

また、これらのツールはWordPress以外で使用することができ、ユーザーはInstagramの投稿で好きなウィジェットを作成することができます。この方法については、後述するセクションで詳しくご紹介していますので、そちらをご覧ください。

方法2.WordPressフィードプラグインの利用

WordPressを使用している場合、InstagramのWordPressプラグイン(英語記事にリンクします)を使用して、Instagram投稿を埋め込むことができます。これらのプラグインは、みなさんのウェブサイトのサイドバーや他のウィジェットエリアに簡単にInstagramの投稿を埋め込むことができます。

方法3.Instagram埋め込みコードの利用

プラグインもその他のツールも使いたくない場合は、Instagramのアプリの埋め込みコードを使用して投稿を埋め込むことができます。これを行うには、Instagramのアカウントに移動して、埋め込みたい投稿を見つけます。そして、投稿の右上にある3つの点をクリックし、”埋め込み “をクリックします。
instagram-copy-embed-code

 

詳しい方法はこちらでご確認いただけます。:【2022年9月更新】インスタグラムをウェブサイトやブログに埋め込む方法と埋め込みインスタ活用術

備考:この方法では、個別の投稿のコードを一つずつコピーして貼り付けていく必要があります。例えば5つ以上の投稿を埋め込む必要がある場合、この方法はお勧めできません。1つのコードで複数の投稿を埋め込むには、やはりInstagram投稿を埋め込むためのツールやプラグインを使ったほうがよいでしょう。

方法4.ショートコードの利用

Instagram投稿を埋め込むための他の方法として、ショートコードを利用することもできます。Instagram投稿のショートコードを生成し、フィードの管理・カスタマイズを外部のプラットフォームで行うプラグインがいくつかあります。

これらの特徴は、ショートコードの埋め込みのみを可能にするプラグインであり、定期的なメンテナンスが不要なシンプルで軽いプラグインであることです。更新はすべて外部のプラットフォームで行い、そこでウィジェットを作成し、ショートコードを取得することができます。

基本的にこれらのプラグインは、JavaScriptのコードを丸ごと貼り付けずに簡単な埋め込み方法のショートコードを利用したい場合にのみ有用です。

例えば、私たちの製品EmbedSocialではショートコードを生成でき、さらにプラグインを使ってショートコードを埋め込むことが出来ます。

詳しくはこちらから:

WordPressプラグインについて

ショートコードを利用してWordPressにウィジェットを表示させる方法

方法5.oEmbed URLの利用

最後に取り上げる5つ目の方法は、oEmbed URLです。この方法は、他の方法よりも少し専門的ですが、もし皆さんがInstagram(Facebook/Meta)のAPIを利用してアプリ開発を行っている場合は、この方法も検討いただけます。

oEmbed URLとは、特定のInstagramの投稿を指し示すURLのことです。

InstagramのoEmbedエンドポイントを照会して、HTMLと基本的なメタデータに埋め込まれたInstagramの投稿を取得し、別のウェブサイトやアプリで、画像、動画、リール、まとめの投稿を表示できます。

oEmbedの利用を開始するには、開発したアプリがMeta/Facebook社によるアプリレビューを受ける必要があります。アプリが認められると、oEmbed読み取り機能を利用できるようになり、Instagramの公開ページ、投稿(画像、まとめも含む)および動画(リール)の埋め込みHTMLと基本メタデータを取得することが出来るようになります。

EmbedSocialフィード機能を使ってWordPressにInstagramを埋め込む方法

ここでは、EmbedSocialプラットフォームのフィード機能を使ってInstagramをWordPressサイトに埋め込む方法をご紹介します。

なおEmbedSocialプラットフォームのご利用にはお申し込みが必要です。ご興味のある方はお問い合わせページへ、ご利用をご希望の場合はお申し込みページからご連絡ください。

EmbedScialはInstagram APIと直接統合されているので、ユーザーIDの設定やアクセストークンなどの難しい設定は必要ありません。利用開始にはEmbedSocialとInstagramのアカウントの接続が必要ですが、ユーザーの皆様はガイドに従って画面をクリックし、WordPressで作成したウェブサイトでInstagram投稿を埋め込み・同期するための許可をEmbedSocialに与えるだけでOKです。

また、EmbedSocialでは、WordPressの投稿に直接埋め込むためのコードを、javascriptコードとInstagramの投稿をショートコードで埋め込むためのプラグイン、の2つのオプションを提供しています。どの方法を選択するかはみなさん次第で自由に選べます。以下に両方のケースについてご説明します。

ステップ1:Instagramアカウントのビジネスプロフィール化とFacebookページとの接続

EmbedSocialフィード機能を通してInstagramからの投稿収集を希望される場合には、Instagram APIの仕様によりInstagramアカウントのビジネスプロフィール化・Facebookページとの接続が必要となります。

詳しくはこちらのページからご確認いただけます:Instagramのビジネスアカウント化・Facebookページとの接続方法

ステップ2:Instagramソースタイプの選択

無事にEmbedSocialプラットフォームとInstagram アカウント(を管理しているFacebookページ)の接続が完了すると、投稿が収集できるようになります。EmbedSosialではInstagramの3つの種類の投稿を収集するか選択できます。

  •  @アカウント – 管理者アクセス可能なInstagramアカウント上の投稿を収集
  •  ハッシュタグ – 指定したハッシュタグのついた投稿を収集
  •  @メンション – 管理者アクセス可能なInstagramアカウントをメンションしている投稿を収集

なおFacebookページとEmbedSocialを連携すると、複数のInstagramアカウントを管理している場合はすべてのアカウントが表示されます。

以下のように、投稿を取得したいInstagramアカウントを選択すれば、ソースタイプの選択は完了です。

embedsocial-select-source-type

ステップ3:レイアウトを選択し、Instagramウィジェットをカスタマイズする

EmbedSocialのフィード機能では、たくさんのレイアウトがあるため、様々な見せ方でInstagram投稿をウェブサイトに表示することが出来ます。例えば、Instagramの投稿をスライダー形式で表示することも可能です。希望のレイアウトを選択して「フィードの作成」ボタンをクリックするだけで、ウェブサイトに埋め込むためのコードを表示する画面に移動します。

ステップ4:Instagram投稿の表示/非表示と並べ替え

EmbedSocialのフィード機能では編集画面内の「モデレーション」ページで、ウェブサイト上で表示するInstagramの投稿を選択することができます。また「並べ替え」ページでは、投稿のピン留めや表示順を設定することが出来ます。その他さまざまな編集が可能です。

embedsocial-moderation-page

ステップ5:WordPressにInstagramウィジェットコードを貼り付ける

最後にEmbedSocialで生成されたInstagram投稿をウェブサイトで表示するためのコードをコピー&ペーストします。このステップでは、JavaScriptコードとショートコードの2つのコードを使用することができます。以下では、両方の方法を説明します。

オプション1:WordPressにJavascriptのウィジェットコードを貼り付ける

ウィジェットのコードを取得するには、設定パネルの左上セクションにある「コードをコピー」をクリックするだけです。コピーされるのは、WordPressのページや投稿に埋め込むことができるJavaScriptコードです。
次に、WordPressアカウントにログインしてWordPress管理エリアに入り、「投稿」または「ページ」から、ウィジェットを表示したいページまたは投稿を探します。次に、以下の手順を実行します。

embedosocial-copy-code

  1. WordPressエディタで、+プラス・アイコンをクリックし、HTMLブロックを選択します。
  2. EmbedSosialから取得したコードを貼り付ける(以下の例を参照)。
  3. WordPressのサイドバーの右上の領域で、[公開]ボタンをクリックします。

備考: WordPressクラシック版のエディタを使用する場合、「ビジュアル」から「テキスト」に切り替えるだけでよいでしょう。

オプション 2: WordPress のショートコードブロックにショートコードを貼り付ける

前述のとおり、EmbedSocialフィード機能 には、JavaScript コードの簡易版として使用できるショートコードがあります。

このコードを見つけるには、以下のステップを踏むだけです。

  1. 左上のコードエリアで「各CMS設定手順」をクリックします。
  2. ポップアップで「WordPress」をクリックします
  3. 「ショートコードをコピー」をクリックします
  4. WordPressのエディタに戻り、+アイコンをクリックして、ショートコードのブロックを選択します。
  5. そこにショートコードを貼り付けます

embedsocial-wordpress-shortcode

以上で、Instagram投稿がウェブサイトに表示されるようになります。

WordPressにInstagramのハッシュタグ投稿フィードを埋め込む

Instagramのハッシュタグ付き投稿を埋め込みたい場合も、EmbedSocialのフィード機能を利用することで実現できます。EmbedSocialのフィード機能は、Instagramのハッシュタグを含む、あらゆる種類のSNS投稿をコンテンツをWordPressページに簡単に埋め込むことができます。

EmbedSocialプラットフォームにログインし、フィード機能を選択したら、以下の手順で進むだけです。

  1. 「ソース」に移動し、Instagramを選択します
  2. Instagramのハッシュタグを選択し、投稿を集めたいハッシュタグを入力し、「次」をクリックします
  3. ウィジェットのレイアウトを選択し、「フィードの作成」をクリックします
  4. ウィジェットを埋め込むには、画面左上のコードをコピーして、WordPressページのHTMLブロックに貼り付けるだけです。

設定はこれだけで完了できます。一度設定をすればEmbedSocialプラットフォームが、指定されたハッシュタグを含むすべての最新投稿を自動的に取得・同期を行います。そのためウェブサイト上には常に最新の投稿が表示できます。さらに、上述の通り、投稿の表示・非表示の選択や、並べ替えも可能です。

詳しくはこちらからご確認いただけます:Instagramハッシュタグから投稿を収集して表示させる方法

WordPressサイトへのInstagramリールを埋め込む

WordPressのウェブサイトにInstagramリールを追加することは、オーディエンスと関わり、ブランドの最新のInstagram動画を見せる素晴らしい方法です。EmbedSocialのフィード機能を利用すれば、もちろん、リールも簡単にウェブサイトに埋め込むことが出来ます。

手順は、上述のハッシュタグを使ったウィジェットの作成と同じです。ただし、最初にInstagramアカウントを接続する必要があります。

参考:Instagramの『リールズ』がEmbedSocialで収集できるようになりました!

以下は、EmbedSocialフィード機能でInstagramリールを収集したウィジェットを編集している画面です。

embedsocial-editor-reels

複数のInstagramアカウントからInstagramの投稿を埋め込む

EmbedSocialフィード機能には、管理している複数のInstagramアカウントから投稿を取得し、すべての投稿を統合したInstagramフィードを作成するオプションがあります。

embedsocial-multiple-sources

例えば以下のような利用シーンで、複数のInstagramアカウントからInstagram投稿を作成するメリットを感じることが出来るでしょう。

  •  複数の支店がある不動産会社であれば、様々な支店の物件を紹介することができます
  •  タレント芸能事務所であれば、所属する複数のタレントのInstagramの活動を一度に紹介することができます
  •  自動車ディーラーであれば、異なる自動車ディーラーからのInstagramの投稿を紹介することができます
  •  複数のショップを展開するファッションブランドであれば、各ショップの店員がアップした投稿を一度に紹介することができます

利用シーンは無限大で、複数のアカウントのInstagram投稿をWordPressに埋め込む方法は、上述の手順と同じです。

Instagramの投稿フィードをWordPressサイトでおしゃれに表示する方法

Instagramの投稿をWordPressのウェブサイトで見栄えよく表示するために、すぐにできる対策がいくつかあります。

まず、ウェブサイトに表示する際に魅力的に見えるように、投稿を表示する際のレイアウトを工夫することです。Instagramの投稿だからといって同じサイズの正方形を並べるだけでなく、スライダーやコラージュなど違ったレイアウトで表示すれば、印象も変わり、おしゃれに見えます。EmbedSocialのフィード機能にはさまざまなレイアウトが用意されていて、クリック一つでレイアウトを変えられます。

embedsocial-collage-layout

次に、投稿に高品質の画像を使用することです。自身で投稿する場合の画像に注意することはもちろん、ハッシュタグなどで集めた画像についてもより高品質の画像のみを選ぶなどすることで、フィードはよりプロフェッショナルで洗練されたものになります。

最後に、Instagramに内蔵されているフィルターを活用して、写真をより美しく仕上げましょう。いくつかの簡単なフィルターを使うだけで、Instagramの写真をポップにし、注目を集めることができます。

Instagramは、あなたの写真や動画を世界中と共有する素晴らしい方法です。EmbedSocialを使えば、あなたのWordPressサイトにInstagramのフィードを簡単に埋め込むことができます。上記のステップに従うだけで、すぐに実行できます。

Instagramフィード、リール、ハッシュタグのWebサイトへの埋め込みデモ

ここではEmbedSocialを使ってWordPressの記事にInstagramの投稿をスライダー形式で埋め込んだ、ウィジェットのデモを紹介します。

なおこれは、EmbedSocialを使用してWordPressサイトにInstagramのコンテンツを表示するための多くの方法のほんの一例に過ぎません。EmbedSocialフィード機能の製品ページを下にスクロールしていただくと、「設置イメージ」としていくつかのレイアウトをご覧いただけます。

みなさんのインスピレーションを得るために、ぜひ参照ください。

WordPressウェブサイトにInstagramを埋め込むメリット

WordPressのウェブサイトにInstagramの投稿を表示したい理由はたくさんあるでしょう。例えば、みなさんの素晴らしいリール作品をサイトでも見せたいのかもしれないし、訪問者にあなたのInstagramアカウントを紹介したいというケースもあるでしょう。

いろいろな理由や目的に応じて、WordPressのウェブサイトにInstagramの投稿フィードを埋め込むことで得られるメリットがあるので、いくつかここで紹介します。

1.ウェブサイトの訪問者の関心を長く維持する

魅力的な投稿が並んだInstagramアカウントをお持ちの場合は、Webサイトにそのコンテンツを表示することで訪問者をサイトに長く引き留める一つの手段になります。

Instagramがサイトに埋め込まれていればサイトを離れる必要がないので、訪問者はウェブサイト上で魅力的なコンテンツを思わずスクロールし、そしてそれは、さらにあなたのサイトを探索する可能性が高くなることを意味します。

2.最高のコンテンツを 1か所で紹介する

Instagramに素晴らしいコンテンツがたくさんあるけれど、画像や動画が多すぎてウェブサイトがごちゃごちゃになるのは嫌だという場合、Instagram埋め込みフィードは投稿を1つにまとめてすっきりと表示できる素晴らしい方法です。

クライアントや上司に自分の最高の作品を見せるためのポートフォリオとして使用することができます。

3.ウェブサイトへのトラフィックを増やす

もしたくさんの人にウェブサイトを訪問してもらいたいなら、そのための理由を与える必要があります。Instagramの投稿フィードを埋め込むことは、誰かの興味を引き、みなさんのサイトへクリックさせる素晴らしい方法です。

そして、一度彼らがウェブサイトを訪れれば、それは購読者や顧客になる可能性を秘めているのです。

4.ブランドの認知度向上

もし、みなさんが会社や製品のブランドや事業の認知度を高めようとしているのであれば、Instagramのフィードを埋め込むことは素晴らしい方法になるはずです。誰かがウェブサイトで投稿を見るたびにそのブランドに触れることになります。

そして、高品質のコンテンツと強力なビジュアル・アイデンティティがあれば、時間をかけてみなさんのブランドの認知度を高めることができます。

5.SNSとのエンゲージメントを高める

誰かがみなさんのウェブサイトでSNS投稿を見るたびに、彼らはあなたのコンテンツに触れ関与することができます。これにより、皆さんのブランドやSNSアカウントの周りに強力なコミュニティを築くことができます。

6.SNSアカウントを簡単に見つけられるようにする

人々がみなさんのSNSアカウントを見つけることができるようにしたい場合、ウェブサイト上のInstagramの投稿フィードを設置しておけば、投稿をクリックした訪問者を簡単に元のソースであるInstagramアカウントにリダイレクトすることができます。

ウェブサイトの訪問者にみなさんのSNSのプロフィールを訪れたりブランドを発見する機会を提供することができるようになるのです。

7.SNSのフォロワーを増やす

Instagramの投稿をウェブサイトに埋め込むことで、サイト訪問者はウィジェットのInstagramボタンをクリックするだけで、みなさんのInstagramアカウントのプロフィールに移動することができます。

アプリ内だけでなくウェブサイト訪問者にもリーチしてInstagramのフォロワーを増やせる方法ということができるでしょう。

8.アフィリエイトリンクからお金を稼ぐ

Instagramの投稿にアフィリエイトリンクがある場合、その投稿をウェブサイトに埋め込めばさらなる収入を得られる可能性があります。

つまり、誰かがアフィリエイトリンクをクリックするたびに、みなさんはコミッションを得ることができます。ウェブサイトからお金を稼ぐための一つの方法となるでしょう。

WordPressへのInstagram投稿埋め込みに関するFAQ

「ソーシャルメディアアグリゲーター」とは?

「ソーシャルメディアアグリゲーター(Social Media Aggregator)」とは、複数のソーシャルメディア(SNS)からコンテンツを一箇所に集めて表示することができるツールです。SNS投稿埋め込みツール、と呼ぶこともあります。これは、フォロワーや顧客のための情報を一つに集約したい個人や企業両方にとって便利なものです。ソーシャルメディア・アグリゲーターは、ブログ、ニュースサイト、ソーシャルネットワーキングサイトなど、さまざまなソースからのコンテンツを表示するために使用することができます。

最も充実したソーシャルメディアアグリゲーターのひとつがEmbedSocialフィード機能で、TikTok、YouTube、Facebook、Pinterest、Instagramなどのソースを備えています。埋め込みコードを使用して、これらのソースからのコンテンツをウェブサイトやブログに表示することができます。

WordPress用のInstagram投稿プラグインを見つけるには?

WordPressの公式サイト、WordPress「プラグイン(Plugins)」ページから確認できます。ここで、’Instagram feed plugin’または’Instagramウィジェット’を検索すると、複数の結果が表示されます。(日本語のプラグインページではヒットしないようです。)

また、私たちがまとめたInstagramのWordPressプラグインのリストで確認することができます(現在英語版のみ)。

プラグインやその他ツールを使わずに、WordPressのウェブサイトにInstagramの投稿を埋め込むには?

Instagramの投稿に付与されている埋め込みコードをウェブサイトのHTMLに貼り付ければ可能です。ただし、プラグインやツールを使ってInstagramのAPIと接続することをお勧めします。その理由は以下の通りです。

まず、プラグインやツールを使うとInstagramのアカウントから自動的にコンテンツを取り込むことができるようになります。つまり、ウェブサイトやブログで共有したい写真や動画をそれぞれ手動で追加する必要がないのです。

次に、共有されているコンテンツを調整する機能を提供します。これは、高品質で関連性の高いコンテンツのみをウェブサイトやブログで共有したい場合に重要です。

最後に、Instagram API統合を持つプロのソーシャルメディアアグリゲーター(SNS埋め込みツール)は、コンテンツの同期において非常に信頼性が高く、彼らは常にメンテナンスされ、新しい機能で更新されています。

さいごに 今回の重要ポイント

今回は、WordPressのウェブサイトにInstagramの投稿を埋め込み、最新のInstagramの投稿をサイトで紹介する方法について詳しく紹介しました。

その中でInstagramの公式プラグインを使用する方法と、EmbedSocialフィード機能やプラグインを使用する方法をご紹介しましたが、いずれもWordPressサイト上でInstagramのコンテンツを美しく表示することができます。

投稿の表示をもっとコントロールしたい場合や、他のInstagramユーザーのUGC(ユーザー生成コンテンツ)を表示する必要がある場合は、EmbedSocialフィード機能のご利用をお勧めします。投稿フィードをカスタマイズして、必要なコンテンツだけをウェブ上に表示することができる強力なツールです。

WordPressサイトにInstagramの投稿を埋め込む方法についてのこの記事が、皆さんのお役に立てれば幸いです。

embedsocial

UGC活用ツール
- エンベッドソーシャル -

7種類以上のSNSから投稿を収集してウェブサイトで活用。初期費用なし・クレジットカード決済可能

無料トライアル

WEB制作 × SNS連携なら
7日間システムを
無料でお試し!

ご導入完了までのご質問やご相談なども
お気軽にお問い合わせください。

お問い合わせ

導入に関するご不明点を
専門スタッフが解決します。

相談する
お見積り

ご導入内容に合わせた最適な
プランを選択できます。

料金表を見る
使い方講座

製品の使い方を解説する
ウェビナーを開催しています。

参加する