レスポンシブなインスタグラムの埋め込みをサイトに追加する方法をお探しですか？
ビジネスやブログ、オンラインショップのウェブサイトを運営している多くの皆さんにとって、コンテンツを常に新鮮で魅力的なものに保つことは最優先事項です。デジタルマーケティングの経験から、ウェブサイトをソーシャルメディアと連携させることが賢い方法であることを知っています。
レスポンシブInstagramフィードは、異なるスクリーンサイズに自動的に調整されるため、誰もがあなたのコンテンツを完璧に見ることができる。
多くの人がスマホでインターネットを閲覧しているため、反応の良いインスタグラムの投稿を見せることは、彼らの関心を引きつける素晴らしい方法となる。
しかし、もしあなたがコードの扱いに慣れているなら、インスタグラムの投稿をサイトに表示するのは難しいかもしれない。さらに、埋め込みがモバイルフレンドリーであることも確認しなければならない。
レスポンシブInstagramフィードをWordPressウェブサイトに簡単に追加したいなら、お任せを！
このガイドでは、InstagramのフィードをWordPressに埋め込み、レスポンシブ対応にする方法を紹介します。
私がレスポンシブ・インスタグラムのフィードを作成するために使った簡単な方法を紹介するので、あなたのウェブサイトを簡単に強化し、どんなデバイスでも見栄えの良いものにすることができる。
この記事で
ウェブサイトにレスポンシブ・インスタグラムを埋め込む理由
ソーシャルメディアマーケティングの広範な調査によると、20億人以上のアクティブユーザーを持つインスタグラムは、最大のソーシャルメディアプラットフォームの1つであり、写真や動画などのビジュアルコンテンツをチェックするのに最適な場所です。
また、訪問者の興味を引く簡単な方法をお望みなら、インスタグラムのコンテンツをウェブサイトに埋め込むことができる。
最近、インターネットユーザーの58.99％以上が携帯電話で閲覧しており、インスタグラムの埋め込みがレスポンシブでなければ、訪問者のほとんどが投稿を正しく見ることができません。
しかし、Instagramの埋め込みをモバイルフレンドリーにすれば、関連する写真や動画を表示して、ウェブサイト訪問者の興味を引きつけ、Instagramのフォロワーにすることが簡単にできる。
さらに、ソーシャルメディアのフォロワーをすぐに増やしたければ、自分でインスタグラムのコンテンツを投稿することもできる。
ビジネスの売上を増やしたいですか？Instagramからポジティブなレビューや証言を埋め込み、訪問者を顧客に変えることができます。
インスタグラムのレビューのようなユーザー生成コンテンツ（UGC）は、社会的証明として機能し、より多くの訪問者を顧客に変えることができる。
さらに良いことに、レスポンシブなショッパブル・インスタグラム・フィードを作成することで、人々があなたのウェブサイトにアクセスする際にどのようなデバイスを使っていても、直接商品を購入できるようにすることもできる。
レスポンシブInstagramの投稿を埋め込むことが、あなたのビジネスにどのように役立つかはお分かりいただけただろう。
それでは、モバイルフレンドリーなInstagramのコンテンツを埋め込む最も簡単な方法を見ていきましょう。
レスポンシブInstagramの投稿を埋め込む最も簡単な方法
インスタグラムのコンテンツをサイトに表示する場合、2つのオプションを試すことができます：
- 手動の方法：インスタグラムの投稿ごとにHTML埋め込みコードを生成し、WordPressサイトに追加する。
- 自動的な方法（簡単な方法）：レスポンシブな写真や動画のフィードを埋め込むことができるInstagramプラグインを手に入れよう。
最初の方法では、インスタグラムの投稿をサイトに追加するのは時間がかかる。
結局のところ、2つのウェブサイトを行ったり来たりしてHTMLコードを取得し、サイトに追加しなければならない。多くのコードを扱うことに慣れていない場合、このステップは混乱するかもしれない。
その上、インスタグラムの投稿がモバイルで正しく表示されているかどうか、毎回手動でチェックしなければならない。
しかも、この方法ではインスタグラムの埋め込み用iFrameをサイトに追加することになる。これは、Googleのような検索エンジンがあなたのサイト上のソーシャルメディアコンテンツを見ることができないことを意味します。
良いニュースは？
最高のInstagramフィードプラグインを使うことで、これらの問題を回避することができる：Instagram Feed Pro。
Instagram Feed Proプラグインを使用すると、Instagramの写真、動画、リールなどを表示するレスポンシブフィードを作成できます。
3ステップのガイドに従うだけで、プラグインがInstagramフィードの作成、カスタマイズ、埋め込みの全プロセスを案内してくれる。
このガイドに従えば、インスタグラムの投稿、メンション、ハッシュタグをワードプレスサイトに表示することができる。
また、埋め込んだすべてのコンテンツは、訪問者の画面サイズに合わせて自動的にリサイズされます。Instagramの投稿がさまざまなデバイスでどのように表示されるかをプレビューすることもできます。
その上、Instagram Feed Proは、Instagramの投稿がウェブサイトにどのように表示されるかをコントロールできる。
あらかじめ用意されたテンプレートから選択し、ライブフィードカスタマイザーを使って数回クリックするだけで、JavaScript、HTML、CSSなどのコードは一切必要なく、フィードをカスタマイズすることができます。
これらの素晴らしい機能性により、Instagram Feed Proは、100万人以上のアクティブユーザーを持つNo.1のInstagramフィードプラグインとなった。
レスポンシブなInstagramフィードをサイトに追加したいなら、Instagram Feed Proを今すぐ入手しよう。
それでは、このプラグインを使ってレスポンシブ・インスタグラムの投稿を追加する方法を見ていこう。
WordPressにレスポンシブInstagramの埋め込みを追加する方法
インスタグラムの投稿をレスポンシブフィードで表示するには、以下の手順を踏むだけでよい。
見てみよう！
ステップ1：Instagram Feed Proプラグインをインストールする
まず、Instagram Feed Proを入手し、ウェブサイトにプラグインをインストールする。
もっと詳しく知りたい方は、WordPressプラグインのインストール方法に関するステップバイステップのガイドをご覧ください。
ステップ2：新しいインスタグラムフィードを作成する
3ステップのガイドフローに従えば、わずか数クリックで新しいInstagramフィードをオンラインで公開する準備ができる。
始めるには、WordPressのダッシュボードエリアからInstagramのフィード " すべてのフィードメニューを開きます。新しいページで、上部にある新規追加 ボタンをクリックします。
そして、ウェブサイトに表示したいインスタグラムのコンテンツの種類を選択することができる：
- ユーザーのタイムライン：インスタグラムのプロフィールからの投稿を表示
- 公開ハッシュタグ：ハッシュタグを選択し、そのハッシュタグが付いた投稿を表示する。
- タグ付き投稿：あなたのInstagramアカウントに言及した投稿を埋め込む。
異なるフィードタイプを1つのフィードにまとめたい場合は、ここで複数のオプションを選択するだけです。
フィードの種類を選択したら、「次へ」 ボタンをクリックします。
ステップ3：フィードをインスタグラムに接続する
フィードの種類を選択したら、ビジネスまたはクリエイターのInstagramアカウントをこのフィードに接続することができます。
開始するには、ソースの追加 ボタンをクリックします。
ポップアップでは、インスタグラムの接続を2つのタイプから選ぶことができる：
- 基本：インスタグラムのプロフィールから写真、リール、コラボ投稿を表示する
- 上級者向け： 基本機能に加え、ハッシュタグフィード、タグ付きフィード、ストーリーなどを表示。
接続タイプを選択したら、接続 ボタンをクリックします。
その後、InstagramかFacebookを開き、アカウントの接続を完了させる。各プラットフォームで手順は同じです。
とりあえず、Instagramとつながるボタンをクリックしてみる。
次に、Instagram Feed Proはアカウントへの読み取り専用アクセスを要求します。このプラグインはインスタグラムの情報を見ることもできますが、変更を加えることはできません。
その結果、Instagram Feed ProのようなSmash Balloonプラグインの使用は完全に安全である。
続行するには、ポップアップの「許可」 ボタンをクリックします。
ウェブサイトを離れることなく、このインスタグラム・アカウントを今後のフィードのソースとして使うことができる。
アカウントの接続を完了するには、[次へ]ボタンをクリックします。
たったこれだけで、インスタグラムのフィードがレスポンシブな写真や動画をウェブサイトに表示できる。プラグインは自動的にウェブサイトのデザインをコピーするので、投稿はあなたのブランドと完璧にマッチします。
ステップ4：レスポンシブInstagramフィードをカスタマイズする
インスタグラムのフィードに美しいデザインを素早く取り込みたいなら、デザイン済みのテンプレート集から選ぶだけでいい。
フィードテンプレートを選択したら、「次へ」ボタンをクリックします。
これで、プラグインはライブフィードエディターを開くので、Instagramフィードのデザインを設定し終えることができる。
左側には、エディタのカスタマイズパネルがあります。ここでは、フィードのレイアウト、ヘッダーデザイン、配色、ボタンデザイン、投稿数などを設定することができます。
何か変更を加えると、右側のライブプレビューで、レスポンシブInstagramフィードがどのように見えるかが表示されます。
まず始めに、ウェブサイト上のインスタグラム投稿のレイアウトを設定することができます。これらのレイアウトオプションはそれぞれ完璧にレスポンシブ対応されますので、ご安心ください。
フィード・レイアウト・オプションを クリックして続行します。
Instagramフィードのレイアウトオプションを4種類から選べるようになりました：グリッド、カルーセル、メイソンリー、ハイライトです。
以下、それぞれのレイアウトを見ていこう。
グリッドオプションを選ぶと、インスタグラムのすべての投稿をきれいな行と列で表示できる。
この方法なら、大量の写真や動画で訪問者を魅了することができる。
次に、投稿をスライドショーのカルーセルで表示できるカルーセル・レイアウトです。
その結果、ウェブサイトは訪問者にとってより魅力的なものになる。
インスタグラムの写真や動画のオリジナルのプロポーションを維持したいですか？
その場合、ここでメーソンリーレイアウトを 選択することができる。
Highlight レイアウトにすると、レスポンシブInstagramフィードは特定の投稿を強調表示する。
さらに、このレイアウトではキャプションやその他の情報が隠れるため、写真や動画に完全にフォーカスされる。
フィードレイアウトを選択したら、「保存」 ボタンをクリックします。
新しいフィードのデザインを続けるには、上部のカスタマイズ ボタンをクリックしてください。
また、ライブフィードエディタを使ってインスタグラムフィードの色を選ぶこともできる。
そのためには、左の配色オプションをクリックします。
簡単に色を変えられるように、4つの配色から選ぶことができる：
- テーマから継承する：WordPressテーマの色をコピーする
- 明るい：暗いフォントで明るい背景色を表示
- Dark：暗い背景を明るい文字色で表示する。
- カスタム：手動ですべての色を選ぶ
配色を選んだら、「保存」をクリックして変更を保存します。
残りのカスタマイズオプションを使って、フィードのテンプレート、ヘッダーデザイン、ボタンスタイル、投稿数などを変更できます。
レスポンシブInstagramフィードの見栄えに満足したら、「保存 」をクリックするのをお忘れなく。
ステップ5：レスポンシブInstagramフィードを埋め込む
Instagram Feed Proプラグインを使用すると、WordPressサイトにInstagramのフィードを埋め込むための2つの異なる方法を取得します：
- WordPressページにレスポンシブInstagramフィードを埋め込む
- WordPressのサイドバーまたはフッターにレスポンシブInstagramフィードを埋め込む
以下、両方のオプションについて説明しよう。
WordPressページにレスポンシブInstagramフィードを埋め込む
Instagram Feed Proはユーザーフレンドリーに設計されているので、ライブエディターから直接フィードの埋め込みを開始することができます。
まず、右上の埋め込み ボタンをクリックします。
このInstagramフィードを埋め込むことができるすべての方法を見ることができます。
すべてのオプションから、「ページに追加 」ボタンをクリックして続行します。
ポップアップで、レスポンシブInstagramフィードを表示したいWordPressページを選択します。
そうしたら、Addを クリックして続ける。
新しいInstagramのフィードを埋め込むために、プラグインはWordPressのエディタでそのウェブページを開きます。
ここから、プラス（+）アイコンをクリックして新しいコンテンツブロックを追加します。
上部の検索バーに「Instagram」と書き、Instagramのフィードブロックを探す。
そうしたら、下の検索結果からInstagram Feedをクリックする。
最後にUpdate ボタンをクリックすると、レスポンシブInstagramフィードが訪問者に公開されます。
このスクリーンショットのように、ウェブサイト訪問者はインスタグラムの写真や動画をサイト上で見ることができる：
ご覧の通り、Instagram Feed Proを使えば、レスポンシブなInstagramエンベッドをWordPressサイトに表示するのがとても簡単になります。
数回クリックするだけで、サイト訪問者はどんな画面サイズやデバイスでも完璧に動作するインスタグラムフィードを見ることができます！
次に、インスタグラムのフィードをサイドバーやフッターに表示する最も簡単な方法を見てみよう。
WordPressのサイドバーまたはフッターにレスポンシブInstagramフィードを埋め込む
先ほどの方法と同様に、ライブフィードエディターを使ってInstagramのフィードをサイドバーやフッターに埋め込むことができる。
ライブフィードエディターがまだ開いていない場合は、WordPressのダッシュボードからInstagramのフィード " すべてのフィード メニューに移動します。
そこで、埋め込みたいインスタグラムのフィードをクリックする。
インスタグラムのフィードが再びライブフィードエディターで開かれるのを見ることができる。
フィードを埋め込むには、上部の埋め込み ボタンをクリックしてください。
ポップアップを使って、インスタグラムのフィードを埋め込む場所を選ぶことができる。
今回は、「ウィジェットに追加 」ボタンをクリックします。
あなたのウェブサイトのウィジェットページが表示されます。ここから、新しいフィードをInstagramウィジェットとして埋め込むことができます。
ウェブサイトのサイドバーにフィードを埋め込みたい場合は、サイドバーパネルを クリックしてください。
チュートリアルでは、サイドバーにレスポンシブ・インスタグラムの埋め込みを表示します。
Instagramのメディアをサイトのフッターに表示したいですか？それなら、代わりにフッターパネルを クリックしてください。
新しいウィジェットを追加するには、下部にあるプラスアイコン（+）を クリックします。
最後に、オプションからInstagramフィードウィジェットを 選択し、更新をクリックします。
これで、ウェブサイトのサイドバーやフッターエリアにレスポンシブInstagramフィードが表示されるようになりました。
ウェブサイト訪問者にどのように見えるかは、ウェブサイトを開いて自分の目で確かめてください。
見てみよう！
これで完成だ！
WordPressにレスポンシブInstagramエンベッドを簡単に追加する方法がわかりました。モバイルフレンドリーなインスタグラムのフィードを表示し、訪問者の関心を引きつけることができます。
Instagram Feed Proを使えば、コーディング不要で、Instagramの写真や動画の美しいフィードをサイトに埋め込むことがこれまで以上に簡単になります。
レスポンシブInstagramフィードを埋め込む準備はできましたか？今すぐInstagram Feed Proを入手しましょう！
もしあなたが動画コンテンツ制作者なら、Instagramのリールをウェブサイトに埋め込む方法についての次の記事も参考になるだろう。
参考になりましたか？Facebookや Twitterで、ソーシャルメディア・マーケティングのヒントやコツをご紹介しています。
