WordPress Beaver BuilderサイトにInstagramフィードを追加する方法
ホーム ブログ WordPress Beaver BuilderサイトにInstagramフィードを追加する方法

WordPress Beaver BuilderサイトにInstagramフィードを追加する方法

ビーバービルダーのウェブサイトにインスタグラムのフィードを追加する方法

Beaver BuilderにInstagramのフィードを簡単に追加する方法を知りたいですか?

Instagramのコンテンツをサイトに表示することで、訪問者の関心を維持したり、フォロワーを増やしたりすることが簡単にできます。しかし、Beaver Builderを使用している場合、Instagramのコンテンツをサイトに直接追加するのは、特にコーディングに慣れていないと難しいかもしれません。

そこで、ビーバービルダーにインスタグラムのフィードを数分で追加する方法を紹介する初心者向けガイドをまとめました。

その前に、インスタグラムのフィードを追加することで、ブランドのウェブサイトにどのような効果があるのかを見てみよう。

なぜInstagramのフィードをWordPressサイトに埋め込むのか?

人気のソーシャルメディア・プラットフォームであることに加え、インスタグラムはあなたのビジネスをオンラインで宣伝し、より多くの潜在顧客にリーチするのに最適な場所となり得る。

しかし、すでに多くの巨大ブランドがインスタグラムを利用しているため、群衆から目立つことは難しい。

実際、インスタグラムでは80%以上のアカウントが企業をフォローしており、毎日2億人のインスタグラマーが積極的に企業のプロフィールを訪れている。

インスタグラム・データ

良いニュースは、インスタグラムのフィードをサイトに埋め込むだけで、簡単に大量の「いいね!」やコメント、フォロワーを獲得できるということだ。

オンラインのフォロワーを増やすだけでなく、関連性のあるインスタグラムの投稿を見せることで、人々の注目を集め、彼らの関心を引きつけることができる。

インスタグラムのフィード例

Instagramから好意的なレビューやブランドへの言及を示すことで、社会的証明として活用し、売上を伸ばすこともできる。

Beaver BuilderにInstagramフィードを追加する方法(簡単) 

Beaver BuilderサイトにInstagramフィードを追加する準備はできましたか?以下のステップバイステップのガイドに従うだけです。

ステップ1:Instagram Feed Proのインストールと有効化

Instagramのフィードを埋め込む最良の方法をお望みなら、Instagram Feed Proを使ってみてください。

No.1のインスタグラムフィードプラグインであるこのツールを使えば、美しいインスタグラムフィードをわずか数分で作成、カスタマイズ、埋め込むことができる。

ベスト・インスタグラム・フィード・プロ・プラグイン

始めるには、Instagram Feed Proプラグインをここで入手し、コンピューターにダウンロードする。

次に、WordPressウェブサイトにプラグインをインストールし、有効化します。

その方法については、WordPressプラグインのインストールに関するチュートリアルをご覧ください。

ステップ2:新しいインスタグラムフィードを作成する

プラグインの準備ができたら、WordPressのダッシュボードエリアからInstagram " All Feedsメニューを開き、Add Newをクリックする。 

インスタグラムフィードプロ

さて、プラグインは、作成したいInstagramフィードのタイプを選択するように私に尋ねた。フィードの種類がよくわからないという方のために、説明しよう:

  • ユーザーのタイムライン: 自分のInstagramプロフィールから写真や動画を埋め込む
  • パブリックハッシュタグ:選択したハッシュタグが付いたInstagramの投稿を表示する
  • タグ付けされた投稿ブランドのInstagramアカウントにタグ付けされた投稿を表示する。

さらに、複数のフィードタイプを1つのフィードにまとめることもできます。そのためには、ここで複数のオプションを選択するだけです。

フィードの種類を選んだら、「Next(次へ )」をクリックして次に進みます。

フィードタイプを選択 instagramフィードプロ

ステップ3:インスタグラムのアカウントに接続する

新しいインスタグラムのフィードを作成したら、次はこのフィードをインスタグラムのアカウントに接続します。

ソースの追加 ボタンをクリックすることから始めることができます。

インスタグラム、フィードにソースを追加

ここで、個人 アカウントかビジネスインスタグラムアカウントの どちらかを選んで接続することができる。

ビジネスアカウントでは、ショッパブルフィードやハッシュタグフィードなど、より多くの種類のインスタグラムコンテンツを埋め込むことができる。

アカウントの種類を選択したら、「Instagramでログイン」ボタンをクリックします。

インスタグラムのアカウントタイプを選択するポップアップ

そうするとInstagramにリダイレクトされ、そこでプラグインにInstagramアカウントへの読み取り専用 アクセス権を与えることができる。

つまり、Instagram Feed Proはあなたのコンテンツを見ることができるだけで、あなたのアカウントに変更を加えることはできません。

あとは「許可」をクリックして続行するだけだ。

インスタグラムアカウントへのアクセスを許可する フィードを作成する

さて、Instagram Feed Proは再びあなたのウェブサイトを開きます。ここで、新しいInstagramのソースとしてアカウントを選択することができます。

ソースを選択したら、 Nextボタンをクリックします。

インスタグラムのフィードのソースとしてアカウントを確認する

ステップ4:インスタグラムのフィードをカスタマイズする

さて、いよいよInstagramのフィードをBeaver Builderのウェブサイト上でどのように表示するかをカスタマイズします。

良いニュースは、Instagram Feed Proが自動的にあなたのウェブサイトのデザインをコピーし、すぐにあなたのブランドの外観に合わせることです。その上、Instagramフィードをカスタマイズする方法がたくさんあります。

開始するには、フット・テンプレートを選択し、「Next」をクリックします。

その後、プラグインは自動的にあなたのインスタグラムフィード用のテンプレートのデザインをインポートする。

その後、Instagram Feed Proはビジュアルカスタマイザーにあなたを送り、左側のオプションを使用してレイアウト、配色、ヘッダーなどを変更することができます。

ライブフィードエディタ インスタグラムフィード

ここで何か変更を加えると、右側のリアルタイムプレビューを使って、インスタグラムのフィードがあなたのサイトでどのように表示されるかを確認することができる。

フィードのレイアウトを変更するには、ここで「フィードのレイアウト」をクリックします。

インスタグラムのカルーセルのレイアウトを編集する

インスタグラム・フィード・プロには、ユニークなデザインの4種類のレイアウトがあり、その中から選ぶことができる:

  • グリッド:正方形のサムネイルをさまざまな行や列に埋め込むことで、一度にたくさんの魅力的なコンテンツを表示できます。
  • カルーセル:Instagramのフィードを魅力的なスライドショーのカルーセルに変えることで、あなたのウェブサイトをよりインタラクティブにします。
  • メイソンリー元の比率を保ちながら、複数のカラムで投稿コンテンツを表示する。
  • ハイライトフィードから余分な詳細を削除し、特定のInstagram投稿に焦点を当てる
カルーセルレイアウトを有効にする

レイアウトを選び終えたら、「 保存」をクリックして変更を保持します。

Instagramフィードのカスタマイズを続けるには、左上隅にあるカスタマイズボタンをクリックしてください。これでメインのカスタマイズオプションに戻ります。

主なカスタマイズオプションに戻る

次に、Instagramフィードの色を変更してみましょう。左側の配色オプションから行うことができる。

配色オプションをクリック

配色は4種類から選ぶことができる:

  • テーマから継承します:ビーバービルダーのウェブサイトと同じ色を使用します。
  • 明るい:明るい背景と暗いフォントでフィードを表示します。
  • Dark:明るい文字色とともに暗い地色を表示する。
  • カスタム:Instagramフィードの各色を手動で選択します。
配色エレメントを選ぶ

最後に「保存」をクリックすると、新しい配色が維持されます。残りのオプションを使って、ヘッダー、投稿要素、フィルターなどを変更できます。

カスタマイズが完了したら、変更を保持するために保存をクリックすることを忘れないでください。

ステップ5: Beaver BuilderにInstagramフィードを追加する

最後に、このInstagramフィードをビーバービルダーのページに追加します。

WordPressの管理画面からページ " 新規追加メニューをクリックして、新しいページを作成してください。

そして、Launch Beaver Builderボタンを押して次に進みます。

ビーバービルダーのページを開く

これでビーバー・ビルダー・エディタでページが開きます。ここで、左側にWordPressページのライブプレビューを見ることができます。

右側には、ページに挿入できるさまざまなモジュール、行、テンプレートが表示されます。とてもシンプルです。

ビーバービルダーエディター

続行するには、上部の標準モジュールオプションをクリックしてドロップダウンメニューを開きます。

次に、代わりにWordPressウィジェットオプションを選択します。

すると、ページに追加できるさまざまなWordPressウィジェットが表示されます。

すべてのオプションからInstagram Feedウィジェットをクリックし、右側のページにドロップする

ドラッグ&ドロップのインスタグラムフィードウィジェット ビーバービルダー

次に、Beaver BuilderはInstagramフィードウィジェットの追加オプションを表示します。

続けて、タイトルオプションにInstagramフィードの見出しを入力します。

次に、フィードオプションの下にあるドロップダウンメニューを使って、埋め込みたいインスタグラムのフィードを選択します。

インスタグラムのフィードを選択する ビーバービルダー.jpg

このフィードをウェブサイト上でライブにするには、「公開」 オプションを選択する前に、右上の「完了」ボタンをクリックしてください。

このように、Beaver Builderプラグインが残りの作業を行い、あなたのWordPressサイトにInstagramフィードを埋め込みます。

ビーバービルダー・インスタグラムのフィード例

そうだ!

ビーバービルダーのウェブサイトにInstagramのフィードを埋め込む方法がわかりました。これで訪問者の関心を引き、Instagramのフォロワーを増やし、より多くの売上を得ることができます。

ご覧の通り、Instagram Feed Proは、あなたのウェブサイトをInstagramと統合したい場合に、コーディングなしで簡単に利用できる最高のオプションです。

Instagramのフィードを埋め込む準備はできましたか?今すぐInstagram Feed Proを入手してください

あなたのブランドのウェブサイトを構築するのに役立つ、もっと素晴らしいツールが欲しいですか?WordPressに最適なページビルダー・プラグインのリストをご覧ください。

ソーシャルメディア・マーケティングのヒントやコツについては、ツイッターや フェイスブックで私たちをフォローしてください。 

著者アバター
サジャン・シャルマ シニアライター
WordPress、ソーシャルメディアマーケティング、オンラインビジネスについて10年以上執筆。専門分野はインフルエンサーマーケティング、コンテンツキュレーション、デジタルマーケティング戦略など多岐にわたる。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。