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

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

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

ElementorにX(Twitter)のフィードを追加することは、WordPressサイトから直接、サイトをダイナミックに保ち、訪問者の関心を高め、ソーシャルメディアのフォロワーを増やすための素晴らしい方法です。

X(Twitter)ではタイムラインの更新が急速に進んでいるため、ウェブサイト上でリアルタイムの更新情報を表示することで、より多くの人々にリーチし、ブランドの信頼性を高めることができます。

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

当初、Elementorのサイトに自分のX(Twitter)フィードを追加しようとした際、素早く、初心者にも使いやすい方法を見つけるまで、いくつかの難関に直面しました。

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

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

この記事で

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

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

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

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

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

ElementorのサイトにX(Twitter)のフィードを埋め込むだけで済みます。そうすれば、訪問者に関連性の高いXの投稿を表示でき、サイトへの滞在時間を延ばすことができます。

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

総じて言えば、X(Twitter)のフィードは、Elementorサイトにとって素晴らしい追加機能となり、ブランドの宣伝に役立つ優れた手段となります。

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

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

X(Twitter)のコンテンツをウェブサイトに埋め込むには、以下の2つの方法から選択できます:

  • 手動での方法:X(Twitter)のフィード用の埋め込みコードを生成し、そのコードをウェブサイトに手動で追加します。
  • 自動設定: WordPressのプラグイン を使用して 、代わりにX(Twitter)のフィードをウェブサイトに自動的に埋め込みます。

手動での方法を選択した場合、X(Twitter)のフィードを準備する際に、多くのコードスニペットを扱う必要が出てきます。その結果、サイトにX(Twitter)のソーシャルフィードを表示させるのに、はるかに多くの時間と労力がかかることになります。

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

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

ElementorサイトにXの投稿を埋め込むより簡単な方法としては、「Smash Balloon X (Twitter) Feed Pro」のようなWordPressプラグインを使うのが最も手軽です。

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

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

わずか数回のクリックで、サイトにX(Twitter)のコンテンツを埋め込むことができます。HTMLやCSS、その他のコードは一切必要ありません。

ツイッターガイドフロー

さらに、表示したいX(Twitter)のコンテンツの種類も、X(Twitter)のタイムライン、ハッシュタグフィード、検索結果、ホームタイムラインなど、さまざまなタイプから選ぶことができます。

さらに、ウェブサイト上でX(Twitter)のフィードをどのように表示するかを自由に設定できます。ユニークなデザインのフィードテンプレートが多数用意されており、その中から好きなものを選ぶことができます。

さらに詳細なカスタマイズを行うには、ライブフィードエディタを使ってX(Twitter)フィードのデザインを変更するだけで済みます。レイアウト、配色、ヘッダーのデザイン、Xの投稿スタイル、「もっと見る」ボタンなど、さまざまな設定が可能です。

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

さらに、「X (Twitter) Feed Pro」にはスマートキャッシュ機能が搭載されており、X (Twitter) フィードのコピーを保存します。そのため、サイトではそのコピーが表示されるため、毎回X (Twitter) フィードを最初から読み込む必要がなくなります。

その結果、X(Twitter)のフィードはこれまで通り高速に表示されます。また、読み込みが速いウェブサイトはSEO効果を大幅に向上させるため、検索結果での順位が上がる可能性もあります。

こうした数々の機能を備えたこのプラグインは、市場で最高のX(Twitter)フィードプラグインとして定着しており、15万人以上のアクティブユーザーから 4.9/5の星評価を獲得しています。

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

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

それでは、このプラグインを使って、ウェブサイトにElementor X(Twitter)フィードを作成する方法を見ていきましょう。

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

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

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

まずは、こちらから「X (Twitter) Feed Pro」プラグインを入手し、それをウェブサイトにインストールすることから始めてみてください。

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

次に、「X (Twitter) Feed Pro」を利用して、ご自身のウェブサイト用のX(Twitter)フィードを作成することができます。

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

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

まず、ダッシュボードから「X(Twitter)フィード」→「すべてのフィード」メニュー に移動し、「新規追加」をクリックします。

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

次に、Elementorのウェブサイトに追加したいX(Twitter)フィードの種類を選択できます。以下の6つのオプションから選択可能です:

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

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

フィードタイプを選択 twitterr

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

新しいフィードを作成したら、ステップ3に進み、X(Twitter)と連携させることができます。

ステップ3:X(Twitter)のタイムラインを連携する

X(Twitter)アカウントを連携させることで、フィードにX(Twitter)のコンテンツをウェブサイトに埋め込むことができるようになります。

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

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

その後、プラグインがX(Twitter)を起動しますので、X(Twitter)アカウントへの読み取り専用アクセス権を付与してください。

このアクセス権限を利用して、「X (Twitter) Feed Pro」はX (Twitter) に接続し、そこに掲載されているコンテンツを表示します。また、このアプリはユーザーのアカウントに一切の変更を加えることはできません。

ご覧の通り、「X (Twitter) Feed Pro」は安心してご利用いただけます。

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

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

次に、このX(Twitter)フィードで使用するソースを選択します。フィードの種類に応じて、ユーザーのタイムライン、ハッシュタグ、検索キーワード、X(Twitter)リストなどが選択可能です。

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

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

twitterフィードを埋め込む

これで、X(Twitter)のフィードをElementorのウェブサイトに埋め込む準備が整いました。

その前に、ステップ4に進みましょう。ここでは、新しいX(Twitter)フィードのデザインをカスタマイズできます。

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

X(Twitter)のフィードは、サイトのデザインを自動的に反映するため、導入したその日から見栄えの良い状態になります。しかし、デザインをより細かくカスタマイズしたい場合は、「X(Twitter)Feed Pro」が役立ちます。

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

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

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

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

左側には、フィードのレイアウト、Xの投稿スタイル、色、ヘッダーのスタイル、「さらに表示」ボタンなどを変更するためのオプションが用意されています。

ライブフィードエディタ

左側で変更を加えるたびに、右側のライブプレビューを使って、X(Twitter)のフィードがどのように表示されるかを確認できます。

Elementor サイトでの X の投稿の表示方法を変更するには、左側の「フィードレイアウト」オプションをクリックしてください。

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

「X (Twitter) Feed Pro」には、新しいフィードの表示形式として、「リスト 」、「メイソンリー」、「 カルーセル 」 の3つのオプションが用意されています。

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

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

リストレイアウトを使用すると、ウェブサイト上で1列にX件の投稿を表示することができます。

そうすることで、訪問者にXの投稿を明確に表示させることができます。

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

他にも試してみることができる方法として、メーソンリーレイアウトを採用し、X件の投稿を複数の列に並べて表示するという方法があります。

この方法を使えば、Xの投稿を一度にたくさん簡単に表示できます。

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

X(Twitter)のカルーセルレイアウトを選択すれば、サイト上でXの投稿をフィードカルーセルとして表示できます。

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

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

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

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

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

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

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

配色オプション twitter feed pro

「X (Twitter) Feed Pro」では、フィードの配色を4種類の中から選択できます:

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

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

最後に、残りのオプションを使って、X投稿のスタイル、X投稿の数、タイポグラフィ、ヘッダーのスタイルなどを変更することができます。

Elementor X(Twitter)フィードの表示に満足したら、「保存」をクリックしてください。

これで、ステップ5でX(Twitter)のフィードを埋め込むことができます。

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

いよいよ、このX(Twitter)フィードをWordPressサイトに埋め込む段階です。このプラグインを使えば、ページや投稿に埋め込むほか、サイドバーやフッターにX(Twitter)ウィジェットとして表示させることもできます。

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

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

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

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

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

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

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

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

代わりに、WordPressの投稿にElementor X(Twitter)フィードを埋め込みたいですか?

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

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

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

X(Twitter)のフィードを埋め込むには、左上の検索バーを見つけて、「shortcode」と入力してください。

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

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

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

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

最後に、先ほど用意したX(Twitter)フィードのショートコードを、「ショートコードを入力してください」という欄に貼り付けてください。

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

次に「公開 」をクリックすると、 Elementor X(Twitter)フィードが公開されます。

ご覧のとおり、このプラグインを使えばX(Twitter)のフィードを埋め込むのはとても簡単です。さあ、ウェブサイトを開いて、訪問者にはページがどのように表示されるか確認してみましょう。

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

これで完成だ!

これで、ウェブサイトにElementorのX(Twitter)フィードを表示する方法がわかりました。ご覧の通り、「X(Twitter)Feed Pro」を使えば、X(Twitter)とElementorの連携がとっても簡単に行えます。

そうすれば、訪問者の関心を引いたり、X(Twitter)のフォロワーを増やしたり、売り上げを伸ばしたりなど、さまざまなことを簡単に実現できます。

ElementorにX(Twitter)のフィードを追加したいですか?今すぐ「X(Twitter)Feed Pro」を手に入れましょう!

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

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

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

コメントを追加する

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