• 投稿日 2022/11/02
  • 最終更新日 2024/01/16

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

embed-instagram-feed-wordpress-plugin

個人での利用はもちろん最近では企業のマーケティングに欠かせなくなったSNSプラットフォームの一つであるInstagramは、素敵な写真や動画を公開したりフォロワーと共有するのに最適なSNSです。

そして皆さんがWordPress(ワードプレス)で作ったウェブサイトをお持ちの場合は、Instagramの投稿を簡単に埋め込んで表示することができるため、WEBサイト上でもより多くの人に見せることができます。
この記事では、WordPressウェブサイトにInstagramの投稿ウィジェットを埋め込む方法、Instagramとウェブを連携させることのメリットについて解説します。

さらに、ソーシャルメディア・アグリゲーター(SNS埋め込みツール)であるEmbedSocialフィード機能を使って、自分のアカウントの投稿やハッシュタグで集めた投稿をウェブサイトに表示する方法もご紹介した、広範なガイドとなっています
Instagramの投稿をWordPressで作ったWEBサイトに表示したいとお考えの場合の参考にしてください。

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

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

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

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

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

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

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

方法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を埋め込む方法

ここまで、Instagramの投稿をWordPrssサイトに表示させる方法の概要をご紹介しました。
ここからはその中でも、最も簡単で効率的な、Instagramの埋め込みツールを使った方法、EmbedSocialのフィード機能を使ってInstagramをWordPressサイトに埋め込む方法をご紹介します。

EmbedScialはInstagram APIと直接統合されているので、ユーザーIDの設定やアクセストークンなどの難しい設定は必要ありません。
EmbedSocialフィード機能は無料プランと、有料プランが用意されています。お試しいただくなら、すべての機能が無料で7日間試せる、無料トライアルから始めることをお勧めします。
EmbedFeed Free trial banner

ステップ1: EmbedFeedアカウントの作成

まずスタートする前に、EmbedFeedアカウントを持っていることを確認してください。まだお持ちでない場合は、アカウントを作成してから、以下のステップに進んでください。

ログインすると、Instagramをソースとして追加するためのソースセクションに移動します。

ステップ2: 収集元プラットフォームとしてインスタグラムを選ぶ

ソース(収集元)選択画面で、Instagramを選びます。
Select Instagram as a source to generate Instagram posts

ステップ3:Instagramのソースの種類を選択:ハッシュタグ、アカウント、ストーリー等

InstagramのハッシュタグやInstagramのアカウントなど、どこから投稿を収集したいかソースのタイプを選択します。
Select Instagram source type
その後、#ハッシュタグを選択した場合は希望のハッシュタグを、@アカウントを選択した場合はアカウント名を入力します。

ステップ4:Facebookアカウントを接続するか、Instagramアカウントを入力する

みなさんのInstagramアカウントとEmbedSocialの接続を行います。

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

ステップ5:Instagramウィジェットのレイアウトを選択する

インスタグラムを埋め込むためのデザインテンプレートを選びます。テンプレートを使うボタンをクリックして選んでください。
Select Instagram feed widget template
必要に応じて編集画面内の「モデレーション」ページで、ウェブサイト上で表示するInstagramの投稿を選択することができます。また「並べ替え」ページでは、投稿のピン留めや表示順を設定することが出来ます。その他さまざまな編集が可能です。
embedfeed-moderation-page

ステップ6:Instagramの埋め込み用コードをコピーする

ウィジェット(インスタグラムの埋め込みパーツ)の編集画面に進むと、画面左上にコードが表示されます。コードをコピーするをクリックし、このコードを埋め込むために使います。
Copy embed widget code
注:コードのすぐ下にはCMSプラットフォームごとの設定手順の説明もあります。クリックするとヘルプ記事にリンクします。

ステップ7:コピーしたコードをウェブサイトに貼り付ける

ウェブページのコードを編集できるプラットフォームを使用している場合、Instagramウィジェットを表示したい位置のHTML構造のボディセクションにコードを貼り付けることができます。

WordPressにコードを埋め込むには、「ブロックを追加」アイコンをクリックし、以下のようにHTMLブロックにコードを貼りつけます:
embed-code-instagram-feed-1
WordPressのショートコードを使って埋め込む場合は、「ウィジェットの共有」セクションの「iframコード」をクリックします。
ポップアップ内の「WordPressショートコード」タブをクリックしてコードをコピーして、WordPressにコードを埋め込んでください。
embed-WP-short-cord
以上で設定は完了です。以下の様にウェブサイトにインスタグラムが表示されます。
example-instagram-feed-album-on-website.jpg

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

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

手順は、上述のハッシュタグを使ったウィジェットの作成と同じです。
以下はリールと通常の投稿をミックスしたウィジェットをウェブサイトに表示させる例です。

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

 
インスタグラムのストーリーズ(ストーリー)は24時間限定で写真や動画を公開できるインスタグラムの人気機能です。様々なスタンプなどが使えたりライブ配信もできることから、閲覧者との双方向のコミュニケーションを図ることができます。

EmbedSocialのストーリー機能は、ストーリーとウェブサイトの連携に特化した機能で、InstagramのストーリーをWordPressウェブサイトに埋め込み表示することができます。
手順は上記のステップとほぼ同じです。インスタグラムとEmbedSocialを接続し、ストーリーを読み込み、ウィジェットを作って、埋め込み用のコードをWordPressに組み込むだけです。

もしストーリーのみをWordPressに表示させたければ、ストーリーに特化したEmbedStoriesのご利用がお勧めです。
EmbedStories-free-trail-banner-JP

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

EmbedSocialフィード機能には、管理している複数のInstagramアカウントから投稿を取得し、すべての投稿を統合したInstagramフィードを作成するオプションがあります。
embedfeed-integrate-multiple-IG-accounts
例えば以下のような利用シーンで、複数のInstagramアカウントからInstagram投稿を作成するメリットを感じることが出来るでしょう。

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

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

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

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

レイアウトを工夫する

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

EmbedSocialのフィード機能にはさまざまなテンプレート、そしてカスタマイズ機能が用意されていて、クリック一つで簡単にデザインを変えられます。

以下のデモ画像の紫色のリングをクリックしていただくと、デザインの変更が簡単にできる様子をご体験いただけます。

高品質の画像を用意する

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

また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埋め込みツールは、コンテンツの同期において非常に信頼性が高く、常にメンテナンスされているため、安定的にInstagramの投稿とWEBサイトの連携を図ることができます。

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

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

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

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

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

embedsocial

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

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

無料トライアル

WEB制作 × SNS連携なら
まずはシステムを
無料でお試し!

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

お問い合わせ

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

相談する
お見積り

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

料金表を見る
資料請求

製品概要をご紹介する資料をダウンロードいただけます。

請求に進む