ElementorにTwitterフィードを追加する方法(5分で)
ホーム ブログ 5分でX(Twitter)フィードをElementorに追加する方法

5分でX(Twitter)フィードをElementorに追加する方法

ElementorのウェブサイトにX(Twitter)の最新投稿を数分で表示したいですか?

ElementorにXフィードを追加することで、サイトをダイナミックに保ち、訪問者の興味を引き、WordPressサイトからソーシャルフォロワーを増やすことができます。

Xではタイムラインの流れが速いため、ウェブサイト上でリアルタイムの最新情報を表示することで、より多くの人に情報を届け、ブランドの信頼性を高めることができる。

しかし、あなたのX(Twitter)フィードをElementorで完璧に表示させるのは、特にあなたがコーダーでなかったり、WordPressプラグインに慣れていなかったりすると、厄介な場合があります。

Elementorのサイトに独自のXフィードを追加しようとした初期の頃、手っ取り早く初心者に優しい方法を見つけるまでに、いくつかのハードルにぶつかった。

スマッシュ・バルーンでの経験から、WordPressサイトとX(Twitter)やその他のソーシャル・プラットフォームを簡単に接続することができ、どのようなスキルレベルにも対応できる最も簡単なソリューションを見つけました。

この記事では、ElementorにX(Twitter)フィードを追加する正確な手順を5分で説明します。

この記事で

なぜElementorのTwitterフィードを表示するのか?

elementorのホームページにインスタグラムのフィードを追加する

人気のWordPressウェブサイト構築プラグインであるElementorは、美しいウェブサイトを簡単にデザインするのに役立ちます。シンプルなドラッグアンドドロップエディタを使用して、コーディング不要で簡単にページを作成できます。

さらに、Elementorアドオンを入手すれば、WordPressウェブサイトにさらに多くの機能を追加できます。

しかし、プレミアムアドオンをたくさん購入したくない場合、Elementorサイトをさらに魅力的にする簡単な方法があります。

ElementorサイトにX(Twitter)フィードを埋め込むだけです。そうすることで、訪問者に関連性の高いツイートを表示することができ、ウェブサイトでの滞在時間を長く保つことができます。

さらに、ElementorのTwitterフィードがあなたのビジネスの成長に役立つ方法をいくつかご紹介します:

  • TwitterのタイムラインをElementorに埋め込むことで、Twitterのフォロワー、リツイート、いいね!などを大量に獲得するためにサイトのトラフィックを利用することができます。
  • Twitterフィードを使えば、Twitter上の実際の人々からのレビューや証言を表示することができます。この社会的証明は、訪問者を有料顧客に変えるのに役立ちます。
  • フィードを使って自分のツイートを投稿できるので、最新ニュースやお知らせが一目瞭然。
  • あなたのブランドハッシュタグを宣伝するために、Elementorのウェブサイトにハッシュタグツイッターフィードを表示することができます。

全体として、TwitterフィードはあなたのElementorサイトに素晴らしいアクセントを加えることができ、あなたのブランドを宣伝するのに役立つ素晴らしい方法です。

それでは、WordPressのTwitterフィードをサイトに埋め込む最も簡単な方法を見てみましょう。

ElementorのTwitterフィードを埋め込む最も簡単な方法

Twitterのコンテンツをウェブサイトに埋め込むには、2つの方法があります:

  • 手動の方法:Twitterフィードの埋め込みコードを作成し、手動でウェブサイトにコードを追加します。
  • 自動的な方法: WordPressのプラグインを使えば、Twitterのフィードを自動的にウェブサイトに埋め込むことができます。

手動の方法を選んだ場合、Twitterフィードを準備する際に多くのコードスニペットを扱わなければならないことになります。その結果、ツイッターのソーシャルフィードをサイトに表示するのに多くの時間と労力がかかることになります。

手動でtwitterフィードを埋め込む

さらに、HTML埋め込みコードをサイトに追加する際に何か問題が発生しても、サポートチームが助けてくれることはない。

Elementorサイトにツイートを埋め込むより簡単な方法は、Smash Balloon Twitter Feed ProのようなWordPressプラグインを使うことです。

世界最高のTwitterフィードプラグインであるTwitter Feed Proを使えば、ElementorのウェブサイトにTwitterフィードを簡単に作成、カスタマイズ、埋め込むことができます。

プラグインに付属しているシンプルなガイドフローを使えば、簡単に始めることができます。

HTMLやCSSなどのコードは一切不要です。

ツイッターガイドフロー

さらに、Twitterタイムライン、ハッシュタグフィード、検索結果、ホームタイムラインなど、表示するTwitterコンテンツの種類を選ぶことができます。

さらに、Twitterのフィードをウェブサイトに表示する方法もコントロールできます。ユニークなデザインのフィードテンプレート集から選ぶことができます。

より詳細なカスタマイズのために、あなたは、単にあなたのTwitterフィードのデザインを変更するには、ライブフィードエディタを使用することができます。レイアウト、カラースキーム、ヘッダーデザイン、ツイートスタイル、ロードモアボタンなどを設定できます。

ツイッターフィード・ライブエディター

さらに、Twitter Feed Proにはスマートキャッシュ機能が搭載されており、Twitterフィードのコピーが保存されます。そのため、あなたのサイトにはそのコピーが表示され、毎回ゼロからTwitterフィードを読み込む必要はありません。

その結果、ツイッターのフィードはこれまでと同じように速くなり、読み込みの速いウェブサイトはSEO対策にもなり、上位に表示される可能性があります。

これらの機能により、このプラグインは市場で最高のTwitterフィードプラグインとなり、15万人以上のアクティブユーザーから 4.9/5つ星の評価を得ています。

ユーザーレビュー カスタムツイッターフィードプロ

ElementorのTwitterフィードを簡単に作成したいですか?今すぐTwitter Feed Proを入手しましょう!

では、このプラグインを使ってElementorのTwitterフィードを作成する方法を見てみましょう。

ElementorのTwitterフィードをWordPressに追加する方法

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

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

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

その方法がわからない場合は、WordPressプラグインのインストール方法に関するこの簡単なガイドに従ってください。

次に、Twitter Feed Proを使ってウェブサイトのTwitterフィードを作成します。

ステップ2:X(ツイッター)フィードの作成

Twitterフィードを作成するには、3ステップのガイドフローに従うだけです。

まず、ダッシュボードからTwitter Feed " All Feeds メニューに移動し、Add Newをクリックします。

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

次に、Elementorウェブサイトに追加するTwitterフィードのタイプを選択できます。以下の6つのオプションから選択できます:

  • ユーザーのタイムライン 特定のTwitterプロフィールのツイートとリツイートを表示します。
  • ハッシュタグ選択したX(ツイッター)のハッシュタグが付いたツイートを埋め込む
  • ホームタイムライン Twitterのホームタイムラインをウェブサイトに表示する
  • 検索:特定の用語を検索し、その結果をサイトに埋め込む。
  • メンションあなたのXプロフィールに言及したツイートを表示

続行するには、ここでフィードの種類を選択し、[次へ]ボタンをクリックします。

フィードタイプを選択 twitterr

この例では、ユーザータイムラインフィードタイプを 使用します。

新しいフィードを作成したら、ステップ3に進み、Twitterに接続する。

ステップ3: ツイッターのタイムラインに接続する

Twitterアカウントと連携することで、Twitterのコンテンツをウェブサイトに埋め込むことができます。

ポップアップの接続 ボタンをクリックするだけで、すぐに始められます。

ツイッターアカウントをワードプレスに接続

プラグインはTwitterを開き、Twitterアカウントへの読み取り専用アクセスを許可する。

そのアクセスを使って、Twitter Feed ProはTwitterに接続し、そこのコンテンツを表示します。さらに、あなたのアカウントに変更を加えることは一切できません。

このように、Twitter FeedProは安全に使用できます

アカウントの接続を完了するには、ここでAuthorize app ボタンをクリックします。

ツイッターの読み取り専用アクセスを許可する.jpg

次に、Twitterフィードに使用するソースを選びます。フィードの種類にもよりますが、ユーザーのタイムライン、ハッシュタグ、検索ワード、Twitterリストなどが考えられます。

タイムラインを埋め込むので、「starbucks」のTwitterプロフィールをソースとして追加しました。

ソースを入力したら、Nextをクリックして続けます。

twitterフィードを埋め込む

このように、TwitterフィードはElementorウェブサイトにコンテンツを埋め込む準備ができました。

その前に、ステップ4で新しいツイッターフィードのデザインをカスタマイズしましょう。

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

Twitterフィードは、あなたのサイトのデザインを自動的にコピーし、すぐに見栄え良く表示されます。しかし、もっとデザインをコントロールしたい場合は、Twitter Feed Proをご利用ください。

まずは、あらかじめ用意されているフィードテンプレートをインポートしてみましょう。インポートできるフィードテンプレートは以下のとおりです:

フィードテンプレートを選択したら、「次へ」 ボタンをクリックします。

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

次に、ライブプレビュー付きのビジュアルフィードエディタを使って、Twitterフィードを詳細にカスタマイズできます。

左側には、フィードのレイアウト、ツイートのスタイル、色、ヘッダーのスタイル、もっと読み込むボタンなどを変更するオプションがあります。

ライブフィードエディタ

左側で何か変更を加えるたびに、右側のライブプレビューを使ってTwitterフィードがどのように見えるかを追跡することができます。

Elementorサイトでのツイートの表示方法を変更するには、左側のフィードレイアウトオプションをクリックします。

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

Twitter Feed Proには、新しいフィードのための3つの異なるオプションが用意されています:リスト、メイソンリー カルーセルです。

以下、それぞれのレイアウトを見ていこう。

フィードレイアウトを選ぶ

リストレイアウトを使えば、ウェブサイト上でツイートを1列に表示することができます。

そうすることで、あなたのツイートを訪問者にはっきりと見せることができる。

ツイッターフィードのレイアウト

また、ツイートを複数のカラムで表示するメイソンレイアウトという方法もある。

この方法なら、一度に大量のツイートを簡単に表示できる。

ワードプレスのツイッターフィード例

Twitterのカルーセルレイアウトを採用すれば、ツイートをフィードカルーセルとしてサイトに表示することができる。

あなたのサイトをさらに魅力的なものにする素晴らしい方法です。

カルーセル・ツイッター・フィード

新しいフィードレイアウトを確認するには、上部にある「保存」ボタンを忘れずにクリックしてください。

レイアウトの設定が終わったら、カスタマイズを クリックしてメインのカスタマイズオプションに戻ります。

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

次に、ライブエディターを使ってTwitterフィードの色を変更することができます。

そのためには、左の配色 オプションをクリックすればいい。

配色オプション twitter feed pro

Twitter Feed Proでは、フィードの配色を4種類から選ぶことができます:

  • テーマから継承する: ウェブサイトの色をコピーする
  • 明るい: 明るい背景と暗いフォントを表示
  • ダーク:暗い背景と明るいフォントを選ぶ。
  • カスタム: すべての色を手動で選択
ツイッターで配色を選ぶ

配色を選択したら、もう一度「保存」ボタンをクリックします。

最後に、残りのオプションを使って、ツイートのスタイル、ツイート数、タイポグラフィ、ヘッダーのスタイルなどを変更できる。

Elementor Twitterフィードの外観に満足したら、保存をクリックします。

これで、ステップ5でTwitterフィードを埋め込むことができる。

ステップ 5: ElementorにTwitterフィードを追加する

最後に、このTwitterフィードをWordPressウェブサイトに埋め込む方法です。このプラグインを使えば、ページや投稿、サイドバーやフッターにTwitterウィジェットとして埋め込むことができます。

右上の埋め込み ボタンをクリックしてください。

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

Twitterフィードの埋め込みオプションのポップアップが表示されます。

とりあえず、コピーボタンをクリックする。

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

ダッシュボードからページ " 新規追加 メニューに移動して、新しいページを作成できます。

その後、上部にある「Elementorで編集 」ボタンをクリックします。

新しいワードプレスページを作成する

WordPressの投稿にElementorのTwitterフィードを埋め込みたいですか?

投稿 " 新規追加 メニューから、Elementorで編集ボタンをクリックしてください。

ワードプレスの新規投稿を作成する

これで、Elementorページビルダーがあなたのサイトで開くのが見えます。左側には、ページや投稿にコンテンツを追加するために使用できるElementorウィジェットが表示されています。

Twitterフィードを埋め込むには、左上の検索バーを探し、"shortcode "と入力する。

すると、下の検索結果にショートコードウィジェットが表示されます。

ショートコード・ブロック・エレメントを検索

次に、ショートコードウィジェットを ドラッグして 、左側のページプレビューにドロップします

ドラッグアンドドロップ・ショートコード・ウィジェット・エレメント

最後に、先ほど入力したTwitterフィードのショートコードを「ショートコードを入力」フィールドに貼り付けます

ツイッターのショートコードを貼り付ける。

Publishを クリックすると、ElementorのTwitterフィードがオンラインになります。

ご覧の通り、このプラグインを使えばTwitterフィードを埋め込むのはとても簡単です。これであなたのウェブサイトを開いて、訪問者にページがどのように見えるかを確認することができます。

ウェブサイト上のelementor twitterフィードの例

これで完成だ!

これでElementorのTwitterフィードをウェブサイトに表示する方法がわかりました。ご覧の通り、Twitter Feed Proを使えばTwitterとElementorを超簡単に統合できます。

訪問者の関心を引き、ツイッターのフォロワーを増やし、売り上げを伸ばすなど、さまざまなことが簡単にできる。

ElementorにTwitterフィードを追加したいですか?今すぐTwitter Feed Proを手に入れましょう

ソーシャルメディアマーケティングをもっと活用したい方は、ソーシャルフィードウィジェットをウェブサイトに埋め込む方法についてのガイドをご覧ください。

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

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

コメントを追加する

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