活気あるインスタグラムのフィードをAstra WordPressウェブサイトに直接追加したいですか？
最新のInstagramの写真、リール、動画をAstraサイトに掲載することは、サイトの鮮度を保ち、人々がウェブサイトからInstagramページに移動するのを助ける素晴らしい方法です。
しかし、ソーシャルメディア・マーケターとして、通常のインスタグラムのオプションを使って、インスタグラムのフィードをアストラのウェブサイトで思い通りに表示させるのは難しいことを知っている。
Smash Balloonでは、Astraのようなトップテーマとシームレスに動作するように設計された、WordPress用の最高のソーシャルメディアフィードプラグインを作っています。私たちのプラグインは、Instagramのようなサイトからのコンテンツを完全にカスタマイズして表示することができます。
この記事では、インスタグラムのフィードをアストラのウェブサイトに追加する簡単な方法をご紹介します。
さらに良いのはこのガイドでは、ステップバイステップですべてを説明します。Astraのユーザーなら誰でも使えるように作られているので、テクノロジーが苦手な方でも、あなたのサイトに美しいInstagramフィードをすぐに設置することができます。
この記事で
なぜアストラのウェブサイトにインスタグラムのフィードを埋め込むのか？
Brainstorm Forceによって開発されたAstraは、人気のWordPressテーマで、あなたのブランドのためのウェブサイトを構築する方法を探している場合に最適なオプションです。
Astraのプロバージョンを使えば、ウェブサイトの訪問者を惹きつけ、興味を持続させることができるWordPressウェブサイトをより簡単に構築することができます。
アストラのウェブサイトをさらに魅力的にするには、インスタグラムのようなソーシャルネットワークのコンテンツを埋め込むのが簡単な解決策です。
インスタグラムのコンテンツのフィードを埋め込むことで、以下のことが可能になる：
- 美しい写真や動画で人々の注目を集め、サイトに留まらせる
- 好意的なレビューを表示することで、Instagramの一般の人々があなたの製品に満足していることを訪問者に示し、売上を向上させる。
- 自分のプロフィールからInstagramの投稿を表示し、新しいインタラクションとフォロワーを大量に獲得する。
- ショッピング可能なInstagramフィードを埋め込んで、ウェブサイト訪問者に魅力的なショッピング体験を提供しましょう。
- その他にも...
インスタグラムのフィードをアストラのサイトに埋め込むだけで、ブランドのインスタグラムの存在感を高め、売上を伸ばすことなどが可能になります。
それでは、AstraにInstagramのフィードを埋め込む最も簡単な方法を見てみよう。
アストラのウェブサイトにインスタグラムのフィードを埋め込む最も簡単な方法
WordPressとInstagramの統合に関しては、Smash Balloon Instagram Feed Proが最適なツールです。
Instagram Feed Proは、コーディングスキルを必要とせずにInstagramのコンテンツをサイトに表示できるWordPressプラグインです。
このプラグインを使えば、インスタグラムの写真、動画、ショートムービー、カルーセル、ストーリーなどを埋め込むことができます。コーディングは不要です。
このシンプルなガイドフローに従うだけで、プラグインがInstagramフィードの作成、カスタマイズ、埋め込みプロセスを案内してくれる。
さらに、Instagram Feed Proでは、フィードのデザインをカスタマイズする方法がたくさんある。
フィードをパーソナライズする簡単な方法として、あらかじめデザインされたテンプレートをインポートし、ユニークなデザインを即座にコピーすることができます。
個人的には、Instagram Feed Proのビジュアルフィードカスタマイザーが気に入っているので、アストラのサイトでInstagramのコンテンツを表示するのに使っている。
数回クリックするだけで、レイアウト、カラースキーム、投稿要素、フィルター、ヘッダーデザインなどを編集できます。また、すべての変更をリアルタイムで追跡できます。
このプラグインは軽量に設計されているため、Instagramの投稿を好きなだけ埋め込むことができ、サイトの読み込みはこれまで通り高速です。
また、ウェブサイトが高速化すれば、SEOも格段に向上する。
これらすべての素晴らしい機能を備えたInstagram Feed Proは、市場で最高のInstagramフィードプラグインであり、100万人以上のユーザーと 4.9/5つ星の評価を得ている！
AstraにInstagramフィードを埋め込む準備はできましたか？今すぐSmash Balloon Instagram Feed Proをあなたのサイトに。
それでは、以下のステップ・バイ・ステップのチュートリアルを始めましょう。
アストラのウェブサイトにインスタグラムのフィードを埋め込む方法
Astra WordPressサイトにInstagramフィードを埋め込む準備ができたら、以下のステップバイステップガイドに従ってください。
ステップ1： Smash Balloon Instagram Feed Pro プラグインをインストールする
インスタグラム・フィード・プロを使い始めるには、こちらからダウンロードしてください。
次に、WordPressウェブサイトにプラグインをインストールし、有効化します。
詳しくは、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。
ステップ2：インスタグラムのフィードを作成する
プラグインのガイドフローに従うだけで、インスタグラムのフィードを作成し始めることができる。
WordPressのダッシュボードエリアからInstagramのフィード " すべてのフィードメニューを開いて開始します。
その後、上部にある新規追加ボタンをクリックする。
次に、ウェブサイトに埋め込むインスタグラムのコンテンツの種類を選択することができます：
- ユーザーのタイムライン：自分たちのInstagramアカウントの投稿を表示する
- パブリック・ハッシュタグ：特定のハッシュタグを選択し、そのハッシュタグを含むすべての投稿を表示します。
- タグ付けされた投稿フィードを使用して、Instagramのメンションをサイトに表示します。
ここで複数のオプションを選択して、フィードタイプを1つのフィードにまとめることもできます。
フィードの種類を選択したら、「次へ」ボタンをクリックしてください。
ステップ3：フィードをインスタグラムに接続する
あなたのビジネスまたはクリエイターのインスタグラムアカウントをウェブサイトに接続することができます。お持ちでない場合は、こちらのステップバイステップのガイドに従ってください。
そうしたら、Add Sourceボタンをクリックする。
インスタグラムの接続を2つのタイプから選べるようになりました：ベーシックと アドバンス。
基本的な接続があれば、自分のインスタグラムの写真や動画を訪問者に見せることができる。
一方、高度な接続では、インスタグラムのハッシュタグフィード、メンションフィード、ストーリーなどを表示できる。
続行するには、アカウントの種類を選択し、下の接続 ボタンをクリックしてください。
その後、接続タイプに応じてインスタグラムかフェイスブックを開くことができる。どちらの方法でも手順は同じです。
とりあえず、Instagramとつながるをクリックしてみる。
Instagramに接続するために、プラグインはInstagramアカウントへの読み取り専用アクセスを要求します。
プラグインはあなたのコンテンツを見ることができるだけで、変更を加えることはできないので、Instagram Feed Proは完全に安全です。
続行するには許可ボタンをクリックします。
高度な接続を選んだ場合は、フェイスブックでも同じことができる。
これで、このソースを今後のインスタグラムのフィードに自由に再利用することができる。
最後に、ここでソースを選択し、「Next」をクリックする。
ステップ4：アストラ・インスタグラムのフィードをカスタマイズする
プラグインはとてもユーザーフレンドリーなので、アストラ・インスタグラムのフィードも簡単にパーソナライズすることができる。
簡単に始められるように、8つのデザイン済みテンプレートが用意されています。
続行するには、使用したいテンプレートを選択し、「Next」をクリックします。
テンプレートをインポートすると、Instagram Feed Proは詳細なカスタマイズのためのライブフィードエディタを開きます。
HTMLやCSSは不要で、フィードのレイアウト、カラースキーム、ヘッダー、ポストエレメント、ロードモアボタンなどを設定できます。
これらのオプションを使って変更を加えると、右側にあるライブプレビューでインスタグラムのフィードがリアルタイムでどのように表示されるかを見ることができる。
フィードレイアウトオプションをクリックし、インスタグラムの投稿のレイアウトを設定することができます。
次に、4種類の既製テンプレートから選ぶことができます：
- グリッド：一度にたくさんの投稿を表示できるように、Instagramのコンテンツを整然とした行や列に埋め込みます。
- カルーセル：あなたのInstagramの投稿を美しいInstagramのカルーセルに変えて、訪問者を魅了しましょう。
- 石組み：インスタグラムのコンテンツを複数のカラムで表示し、元の比率を維持する。
- ハイライト投稿を正方形にトリミングした画像で表示し、特定の投稿を2倍の大きさにする。
この例では、Highlight レイアウトを使用します。
新しいレイアウトを確認するには、上部にある「保存」ボタンをクリックします。
そうしたら、小さなカスタマイズ・ ボタンをクリックして、メインのカスタマイズ・オプションに戻る。
これで、インスタグラムのフィードの色を設定することができる。
左の配色オプションをクリックするだけで始められます。
フィードの色を簡単に変更するには、これらの配色から選ぶことができます：
- テーマからの継承：Astraテーマの色をコピーして、フィードをサイトに完全にマッチさせます。
- 明るい：明るい背景と暗いフォントでInstagramのフィードを表示する
- ダーク：インスタグラムのフィードには、暗い背景と明るいフォントを選びましょう。
- カスタム：手動ですべての色を選ぶ
配色を選んだら、「保存」ボタンをクリックします。
Instagramフィードをもっとカスタマイズしたいですか？残りのカスタマイズオプションで、ヘッダーをパーソナライズしたり、より多くのボタンやフィルターなどをロードすることができます。
Instagramフィードのデザインに満足したら、保存ボタンをクリックするのをお忘れなく。
ステップ5：アストラ・インスタグラムのフィードを埋め込む
ライブフィードエディターから、このインスタグラムフィードをウェブページ、サイドバー、フッターに埋め込むことができる。
まず、エディター上部の埋め込み ボタンをクリックします。
すると、インスタグラムのフィードを埋め込むことができるすべての方法がポップアップで表示されます。
この例では、「ページに追加 」オプションを使用します。
そうすると、Instagram Feed Proが、フィードを埋め込むページを選択させてくれる。
WordPressのページに埋め込んだり、Instagramのフィードウィジェットとして表示したり、ショートコードをコピーすることもできる。
必要なオプションを選択し、追加ボタンをクリックするだけです。
そうすることで、WordPress Gutenbergエディタでページを開くか、他のページビルダーを使用することができます。結局のところ、Astra は Beaver Builder や Elementor のような主要なページビルダーと完全な互換性があります。
インスタグラムのフィードを埋め込む前に、このWordPressページにテンプレートをインポートすることもできる。そのためには、上部にあるテンプレートキットのボタンをクリックしてください。
これをクリックするとポップアップが開き、インポートできるすべてのテンプレートが表示されます。
ここから好みのテンプレートを探してクリックする。
テンプレートの詳細情報を見ることができます。右側には、このテンプレートのすべてのバリエーションもあります。
続行するには、下の「テンプレートのインポート」ボタンをクリックしてください。
クリックすると、Astraがあなたのページにテンプレートを追加します。そうしたら、いよいよInstagramのフィードを埋め込みましょう。
まず、プラス（+）アイコンをクリックして、新しいWordPressブロックを追加します。
上部の検索バーを使って、"instagram "ブロックを探すことができる。
そうしたら、下の検索結果のInstagram Feed ブロックをクリックする。
最後に、更新ボタンをクリックすると、新しいアストラ・インスタグラムのフィードがあなたのウェブサイトで公開されます。
ご覧の通り、Instagram Feed Proを使えば、インスタグラムのコンテンツをサイトに表示するのがとても簡単になります。あなたのページを開けば、Instagramのコンテンツが訪問者にどのように見えるかを見ることができます。
そうだ！
このように、Instagram Feed Proプラグインを使えば、InstagramのフィードをWordPressに埋め込むのはとても簡単だ。
Instagramのフィードを簡単に埋め込みたいですか？今すぐInstagram Feed Proを手に入れよう！
ここにいる間に、最高のインスタグラムマーケティングのヒントのリストをチェックすることができます。
この記事を楽しんでいただけましたか？ソーシャルメディアマーケティングのチュートリアルについては、Twitterや Facebookでお気軽にフォローしてください。
