Beaver BuilderのTwitterフィードを簡単に表示する方法(ステップバイステップ)
ホーム ブログ Beaver BuilderのTwitterフィードを簡単に表示する方法(ステップバイステップ)

Beaver BuilderのTwitterフィードを簡単に表示する方法(ステップバイステップ)

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

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

Beaver Builderは、コーディングなしでブランドの美しいウェブサイトを作成したい場合に最適なツールです。しかし、Beaver BuilderにTwitterフィードを追加するのは、特にコードの扱いに慣れていない場合は厄介です。

Beaver BuilderでTwitterフィードを簡単に埋め込むためのビギナーズガイドをご用意しました。

始めよう!

Beaver BuilderにTwitterフィードを追加する理由

ツイッターフィードを使えば、ツイッターからの関連記事、写真、動画などでウェブサイトの訪問者を惹きつけることができます。結局のところ、ソーシャルメディアへの投稿は、人々の興味を持続させる最良の方法の一つなのです。

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

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

その上、ツイッターフィードを使うこともできる:

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

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

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

以下のステップに従うだけで、WordPress Beaver Builder サイトに美しい Twitter フィードをすぐに追加できます。

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

Twitterのコンテンツを埋め込むとなると、Twitter Feed Proが最適です。

最高のTwitterフィードプラグインとして、あなたはわずか数分でツイートのフィードを作成、カスタマイズ、埋め込むために使用することができます - 一行のコードに触れる必要はありません。

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

さらに、すべての Twitter フィードは自動的に Beaver Builder サイトのデザインにマッチし、すぐに美しく表示されます。

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

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

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

プラグインを手に入れたら、3ステップガイドを使って素早くTwitterフィードを作成しよう。

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

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

その後、プラグインはどのタイプのTwitterフィードを作成したいか尋ねてきた。結局、3つの選択肢から選ぶことになった:

  • ユーザーのタイムライン タイムラインから自分のTwitterコンテンツを表示
  • ハッシュタグ選択したハッシュタグを含むツイートを表示します。
  • 検索選択した検索語の検索結果を埋め込む

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

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

フィードの種類

Twitter Feed Proがソースの入力を求めてきます。このソースは基本的に、あなたが選択したいユーザーのタイムライン、ハッシュタグ、または検索ワードです。

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

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

twitterフィードを埋め込む

ステップ3: ツイッターフィードをカスタマイズする

ユニークなデザインの美しいTwitterフィードを作成するために、このプラグインではフィードテンプレートを選択してインポートすることができます:

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

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

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

次に、Twitter Feed Proはビジュアルカスタマイザーにフィードを表示します。ここでは、レイアウト、ヘッダーデザイン、ボタンデザイン、ツイートスタイルなどを変更できます。

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

ライブフィードエディタ

Beaver BuilderのTwitterフィードのカスタマイズを始める準備はできましたか?

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

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

Beaver Builderのサイトにツイートを表示する3つの方法があります:

  • リスト:各ツイートがはっきりと見えるように、1つの列に次々とツイートを埋め込む。
  • メイソンリー複数のカラムを使用して、大量のツイートをサイトに同時に表示する
  • カルーセル Twitterコンテンツのスライドカルーセルを表示し、ウェブサイトをよりインタラクティブにします。
フィードレイアウトを選ぶ

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

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

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

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

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

配色オプション twitter feed pro

これは、あなたのTwitterフィードの色を選択することができる便利な場所を示しています。

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

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

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

残りのオプションを使って、フィードのツイートスタイル、ツイート数、ヘッダーのスタイルなどをカスタマイズできる。

ビーバービルダーのTwitterフィードを埋め込む準備ができたら、 保存をクリックするのを忘れないでください。

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

ビジュアルカスタマイザーからTwitterフィードの埋め込みを開始できます。まず、上部の埋め込みボタンをクリックします。

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

Twitterのコンテンツを埋め込むためのあらゆる方法が紹介されています。WordPressのページに追加したり、Twitterウィジェットとしてフッターやサイドバーに埋め込むことができます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最後に、右上の完了ボタンをクリックして新しいページを確認します。その後、新しいビーバービルダーのTwitterフィードを公開するかどうかを選択できます。

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

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

これで完成だ!

このように、ビーバービルダーのTwitterフィードを埋め込むのは、適切なツールを使えばとても簡単です。これだけで、訪問者の関心を引き、Twitterでの存在感を高め、売上を向上させることができます。

Twitter Feed Proプラグインさえあれば、Twitterをあなたのウェブサイトに簡単に統合できます。このプラグインは、SeedProdやElementorのような人気のあるページビルダーでも動作します!

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

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

お役に立ちましたか?ソーシャルメディア・マーケティングのヒントやコツをもっと知りたい方は、ツイッターや フェイスブックをフォローしてください。

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

コメントを追加する

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