Beaver Builder X(Twitter)のフィードを簡単に表示する方法(手順別)
ホーム ブログ Beaver Builder X(Twitter)のフィードを簡単に表示する方法(手順別)

Beaver Builder X(Twitter)のフィードを簡単に表示する方法(手順別)

ビーバービルダーのTwitterフィードを簡単に表示する方法

Beaver Builderで作成したウェブサイトに、X(Twitter)のフィードを表示したいですか?

Beaver Builderは、コーディングを一切行わずに、自分のブランドのための美しいウェブサイトを作成したい場合に最適なツールです。しかし、Beaver BuilderにX(Twitter)のフィードを追加するのは、特にコードの扱いに慣れていない人にとっては、少々難しいかもしれません。

皆さんの参考になるよう、Beaver BuilderでX(Twitter)のフィードを簡単に埋め込む方法について、この初心者向けガイドを作成しました。

始めよう!

なぜBeaver BuilderにX(Twitter)のフィードを追加するのですか?

X(Twitter)のフィードを活用すれば、X(Twitter)上の関連性の高い投稿や写真、動画などを通じて、ウェブサイトの訪問者の関心を引くことができます。何と言っても、ソーシャルメディアの投稿は、人々の関心を維持するための最良の方法の一つだからです。

典型的な」インターネット・ユーザーは、毎日ほぼ2時間半をソーシャルメディア・プラットフォームに費やしており、これは私たちの総オンライン利用時間の3分の1以上に相当する。

サイモン・ケンプ(DataReportalチーフアナリスト

さらに、X(Twitter)のフィードを使って、次のようなことができます:

  • 商品のオンラインレビューを表示することで、社会的証明となり、コンバージョンを高めることができます。
  • 自分だけのX(Twitter)コンテンツを投稿して、簡単にたくさんの「いいね!」やコメント、フォロワーを獲得しましょう
  • SEO効果を高め、検索エンジンの検索結果で上位に表示されるよう、関連キーワードを含むX(Twitter)のコンテンツを定期的に投稿しましょう
  • 重要な告知記事、製品リリース、ニュースなどを表示し、人々の注目を集める。
  • その他にもいろいろある!

Elementor用のX(Twitter)フィードを作成するには、以下の簡単な手順に従うだけです。さっそく始めましょう!

Beaver Builder X(Twitter)フィードを簡単に埋め込む方法

以下の手順に従うだけで、WordPressのBeaver Builderサイト上に、あっという間に美しいX(Twitter)のフィードを表示させることができます。

ステップ 1: X (Twitter) Feed Pro プラグインをダウンロードする

X(Twitter)のコンテンツを埋め込む際には、「X(Twitter)Feed Pro」が最適なツールです。

最高のX(Twitter)フィードプラグインとして、このプラグインを使えば、たった数分でXの投稿フィードを作成・カスタマイズ・埋め込むことができます。コードを1行も書く必要はありません。

ツイッター・フィード・プロ ホームページ

さらに、すべてのX(Twitter)フィードは、Beaver Builderサイトのデザインに自動的に合わせられ、すぐに見栄えの良い表示になります。

X(Twitter)Feed Proプラグインをこちらから入手し、ウェブサイトにインストールして有効化してください。

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

ステップ 2:新しい X(Twitter)フィードを作成する

プラグインを入手したところで、3ステップのガイドに従って、X(Twitter)のフィードを素早く作成しましょう。

WordPressの管理画面からTwitter Feed " All Feeds メニューを開き、Add Newボタンをクリックします。

カスタムツイッターフィードを追加

その後、プラグインから、どのタイプのX(Twitter)フィードを作成したいか尋ねられました。どうやら、3つの選択肢があるようです:

  • ユーザーのタイムライン: 自分のタイムラインにあるX(Twitter)のコンテンツを表示する
  • ハッシュタグ:選択したハッシュタグが付いた投稿をX件表示する
  • 検索選択した検索語の検索結果を埋め込む

結局、ここではユーザータイムラインの フィードタイプを選んだ。

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

フィードの種類

X(Twitter)Feed Proでは、今後ソースの指定が求められるようになりました。このソースとは、基本的にユーザーが選択したいタイムライン、ハッシュタグ、または検索キーワードのことです。

下にあるように、"starbucks "のユーザー・タイムラインをソースとして追加した。

ソースを忘れずに追加し、「Next」をクリックして続行します。

twitterフィードを埋め込む

ステップ3:X(Twitter)のフィードをカスタマイズする

ユニークなデザインの美しいX(Twitter)フィードを作成できるよう、このプラグインでは、インポートするフィードテンプレートを選択できます:

  • デフォルト
  • 石工カード
  • シンプルなカルーセル
  • シンプルなカード
  • ショーケース・カルーセル
  • 最新のX投稿
  • ウィジェット

お好きなテンプレートを選んで「次へ」 ボタンをクリックしてください。

フィードテンプレートを選択する

次に、「X (Twitter) Feed Pro」がビジュアルカスタマイザーにフィードを表示します。ここでは、レイアウト、ヘッダーのデザイン、ボタンのデザイン、Xの投稿スタイルなどを変更するためのオプションを利用できます。

さらに、ライブプレビューで変更内容を確認することもできます。

ライブフィードエディタ

Beaver Builder用のX(Twitter)フィードのカスタマイズを始めましょうか?

まず、左側のフィードレイアウトオプションを選択します。

フィードレイアウトオプション

ここでは、Beaver Builder サイト上で X 件の投稿を表示する 3 つの方法をご紹介します:

  • リスト:Xの投稿を1列に並べて埋め込み、各投稿がはっきりと見えるようにする
  • Masonry:複数のカラムを使用して、サイトに大量のX投稿を同時に表示する
  • カルーセル: X(Twitter)のコンテンツをスライド表示するカルーセルを表示し 、ウェブサイトのインタラクティブ性を高めましょう
フィードレイアウトを選ぶ

結局、この例では石積みのレイアウトを選んだ。

新しいレイアウトを維持するには、右上の「保存」ボタンをクリックします。次に、カスタマイズを クリックしてメインのカスタマイズオプションに戻ります。

カスタマイズ・オプションのツイッターに戻る

このビジュアルエディターのもう一つのカスタマイズオプションを見てみよう。

左側の配色 オプションをクリックします。

配色オプション twitter feed pro

ここでは、X(Twitter)のフィードの色を設定できる便利な場所をご紹介します。

配色は4種類から選べる:

  • テーマから継承します: Beaver Builderウェブサイトのテーマと同じ色を使用します。
  • 明るい: 背景は明るく、フォントとアイコンは暗い色を選ぶ。
  • Dark:代わりに濃い色の背景と明るい色のフォントを選択する。
  • カスタム:手動ですべての色を選ぶ
ツイッターで配色を選ぶ

前回同様、Saveをクリックして変更を保持する。

その後、残りのオプションを使用して、フィードのX投稿のスタイルやX投稿の数、ヘッダーのスタイルなどをカスタマイズできます。

Beaver Builder X(Twitter)フィードを埋め込む準備ができたら、必ず「 保存」をクリックしてください。

ステップ4:Beaver BuilderにX(Twitter)のフィードを追加する

ビジュアルカスタマイザーから、X(Twitter)のフィードの埋め込みを開始できます。まず、上部にある「埋め込み」ボタンをクリックしてください。

埋め込みツイッターボタンライブエディタ

ここでは、X(Twitter)のコンテンツを埋め込むすべての方法をご紹介します。WordPressのページに追加したり、フッターやサイドバーにX(Twitter)ウィジェットとして埋め込んだりすることができます。

とりあえずコピーボタンをクリックしてください。

ツイッターフィードプロのショートコードをコピーする

ダッシュボードからページ " 新規追加 メニューを開いて、新しいビーバー・ビルダーを作成できます。

そこで、Launch Beaver Builder ボタンをクリックします。

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

これを行うと、Beaver Builderのドラッグ&ドロップエディタでページが開きます。

左側を見ると、WordPressのページに追加できるBeaver Builderのモジュールがすべて表示されています。

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

まず、標準モジュールオプションをクリックしてドロップダウンメニューを開きます。

そこで、WordPress Widgetsオプションを選択します。

そうすることで、ウェブページに追加できるモジュールが増える。

オプションからCustom Twitter Feedsモジュールを探し、左側にドロップ する。

カスタムtwitterフィードモジュール

そうすると Beaver Builder がこのモジュールの追加オプションを表示します。

そこで、先ほどのショートコードをメインフィールドに貼り付けてから、「保存」をクリックする。

twitterショートコードの貼り付け例

最後に、右上の「完了」ボタンをクリックして、新しいページを確定します。その後、新しいBeaver Builder X(Twitter)フィードを公開するかどうかの選択が可能です。

そうしたら、サイトを開いて、訪問者にどのように見えるかをチェックする。

ビーバービルダー ツイッターフィードの例

これで完成だ!

ご覧の通り、適切なツールを活用すれば、Beaver Builder X(Twitter)フィードの埋め込みは驚くほど簡単です。これだけで、訪問者の関心を高め、X(Twitter)での存在感を高め、売上を伸ばすなど、さまざまな効果が期待できます。

必要なのは「X (Twitter) Feed Pro」プラグインだけ。これで、X (Twitter) をウェブサイトに連携させるのがこれまで以上に簡単になります。このプラグインは、SeedProd や Elementor といった人気のページビルダーともすべて互換性があります!

Beaver BuilderにX(Twitter)のフィードを埋め込む準備はできましたか?今すぐ「X(Twitter)Feed Pro」を入手しましょう!

ソーシャルメディアとサイトを統合するその他の方法については、ソーシャルフィードウィジェットをウェブサイトに埋め込む方法についての詳細なガイドをご覧ください。

この記事は参考になりましたか?ソーシャルメディアマーケティングのヒントやコツをもっと知りたい方は、X(Twitter)やFacebookで当アカウントをフォローしてください。

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

コメントを追加する

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