あなたのサイトにX(Twitterフィード)を集約する方法:ステップバイステップガイド
ホーム ブログ あなたのサイトにX(Twitterフィード)を集約する方法:ステップバイステップガイド

あなたのサイトにX(Twitterフィード)を集約する方法:ステップバイステップガイド

ツイッターのフィードをサイトに集約する方法

ウェブサイトを運営している人の多くは、さまざまなアイデアや意見を表現したいと考えています。私がウェブサイト制作やオンラインマーケティングに携わってきた経験から、異なる視点を融合させることで、サイトがより生き生きとして、時代を感じさせるものになると実感しています。

X(ツイッター)は多様な会話で盛り上がるプラットフォームだ。

もし、ウェブサイト上で、例えば異なるチームメンバーやイベントの登壇者、関連団体などからの複数のTwitterフィードを表示することでメリットが得られるのであれば、それらのフィードを集約することは素晴らしい解決策となります。

簡単な答え: サイト上でTwitterのフィードをまとめて表示する最も 簡単な方法は 、「Smash Balloon Twitter Feed Pro」のようなWordPressプラグインを利用することです。このプラグインを使えば、3ステップのガイドに沿った設定を行うだけで、複数のアカウント、ハッシュタグ、リストからのツイートを1つのフィードにまとめることができます。

Twitterのフィードを集約して表示することで、複数の情報源からのツイートを、サイト上で一元的に配信することができます。これにより、訪問者は関連するTwitter上の議論について、より豊かで包括的な情報を得ることができます。

この記事では、さまざまなアカウントのXコンテンツを1つのダイナミックな表示にまとめる手順を順を追って説明する。

この記事で

X/Twitterアグリゲーターとは?

Twitterアグリゲーターは、Twitterの投稿をウェブサイトに表示するためのツールです。

X専用のソーシャルメディアフィードアグリゲーターを使えば、Twitterのコンテンツをフィードにまとめ、ページやサイドバー、フッターにフィードを埋め込むことができる。

複数の情報源からコンテンツを収集するフィードは、単一のアカウントだけでは到底及ばないほど、訪問者にスクロールを続ける動機を与えます。その結果、ページ滞在時間が長くなり、検索エンジンがクロールできる新鮮でキーワード豊富なコンテンツも増えることになります。

これはほんの始まりに過ぎない!X(Twitter)アグリゲーターがあなたのビジネスに役立つ方法は他にもいくつかあります:

  • ブランドアカウントとブランドハッシュタグを組み合わせることで、訪問者は自社の投稿だけでなく、誰が自社について話しているのかという全体像をより明確に把握できるようになります。
  • 自社製品のレビューや体験談を掲載することで、Twitterを本格的なUGCギャラリーに変え、より多くの人々に購入を促すことができます。
twitterレビューフィードの例
  • Twitterの画像集約ツールを使えば、一目で人々の注目を集める美しいビジュアルコンテンツを掲載することもできます。
  • 単一のアカウントのフィードは、単にあなたがアクティブであることを示すに過ぎません。一方、自分のアカウントとコミュニティからのメンションをまとめたフィードは、人々が実際にあなたと交流していることを証明するものです。

このように、X(ツイッター)アグリゲーターはあなたのウェブサイトにとって大きな助けとなります。より多くの売上を獲得し、ソーシャルメディアでの存在感を高め、より多くの顧客にリーチするなど、多くのことが可能になります。

将来的には、TwitterとInstagram、Facebook、YouTubeのフィードも統合したいという場合、Social Wallならそれらを1つの画面にまとめて表示できますが、ひとまず今は、Twitterのフィードを集約することに焦点を当てましょう。

ソーシャルメディア・アグリゲーターを使ってTwitterフィードを表示する準備はできていますか?

WordPressウェブサイトにTwitterフィードを集約する最も簡単な方法を見てみましょう。

X(ツイッター)フィードをWordPressに集約する最も簡単な方法

市場に出回っているTwitterアグリゲーターのほとんどを試してみました。そのほとんどは、何かを犠牲にしなければなりません。ブランド管理の主導権を失ったり、1つのアカウントに縛られたり、あるいは無料プランは一見良さそうに見えても、実際に複数のフィードが必要になると不便を感じたりします。

Smash Balloon Twitter Feed Pro」は、そうしたトレードオフを強いないため、私が何度も利用し続けているアプリです。

Twitter Feed Proの比較

Native X 埋め込みウィジェット無料のアグリゲーター(Curator、Juicerなど)Twitter Feed Pro ⭐ おすすめ
1つのフィードに、複数のアカウント、ハッシュタグ、またはリストをまとめて表示することはできますか?❌ いいえ — 情報源は1つだけ⚠️ 通常、無料プランでは1~3つの情報源が利用可能です✅ はい — ソース数に制限なし、フィードの種類を自由に組み合わせ可能
サイトのデザインに合っていますか?❌ いいえ — Xのスタイルは固定されています⚠️ 無料プランでは、色やレイアウトのカスタマイズに制限があります✅ はい — 7つのテンプレート、ライブカスタマイザー、テーマの設定を継承
フィードにブランド関連のコンテンツや広告はありますか?✅ なし❌ ほとんどの無料プランでは、ツール独自のブランドロゴや広告が表示されます✅ なし
最適埋め込み投稿が1つあるだけで、それ以外は何もありません導入を決める前に、無料でコンセプトを試してみるブランドイメージを徹底した、信頼性の高い集約フィード

単に1つのツイートを掲載したいだけなら、Xの標準ウィジェットで十分です。サイトの一部のように見える集約フィードが欲しい場合は、「Twitter Feed Pro」を使う方が手っ取り早いでしょう。

実際、このプラグインでは3つのステップで設定を順を追って案内してくれます。コードエディタを開く必要も、埋め込みコードを管理する必要も一度もありませんでした。

WordPressにTwitterフィードを集約する最も簡単な方法は、Smash Balloon Twitter Feed Proを使用することです。

Twitterフィードをより魅力的にするために、あらかじめ用意された美しいテンプレートのコレクションから選ぶことができます。お好みのテンプレートを選ぶだけで、あなたのTwitterフィードが即座にそのデザインをコピーできます。

さらに、ライブフィードエディタを使えば、リアルタイムプレビューでTwitterフィードの見栄えをカスタマイズできる。

レイアウト、配色、ツイート数、フィードのサイズ、ヘッダーのスタイルなどを素早く簡単に変更できる。

ツイッター・ライブ・ストリームで利用可能なレイアウト

さらに、「Twitter Feed Pro」を使えば、TwitterのハッシュタグフィードやTwitterリスト、詳細検索の結果など、さまざまな方法でTwitterのコンテンツを集約することができます。 

実際、Twitter Feed Proは現在、15万人以上のユーザーから 4.9/5の評価を得ており、このアプリを信頼できると感じているのは私だけではないことがわかります。

ツイッターフィードプロのレビュー

Twitterフィードを集約してビジネスを成長させる準備はできましたか?Twitter Feed Proはこちらから。

では、チュートリアルを始めて、最も簡単な方法でツイッターのフィードを集約する方法を紹介しよう。

ウェブサイトでX(Twitter)のフィードを簡単に集約する方法

簡単に説明すると、次の手順です。「Twitter Feed Pro」をインストールし、新しいフィードを作成してコンテンツの種類を選択し、アカウントを連携させ、ライブエディタでデザインをカスタマイズし、ページ、サイドバー、またはフッターに埋め込みます。

この一連の作業は、ほとんどの人にとって10分もかかりません。さっそく始めましょう!

ステップ1: Smash Balloon Twitter Feed Proをインストールします。

こちらからTwitter Feed Pro」プラグインを入手し、他のWordPressプラグインと同じようにインストールしてください。

これまでインストールしたことがないという方のために、WPBeginnerのガイドでは、2分足らずでその手順を解説しています。

プラグインをインストールして有効化したら、ステップ2でTwitterのコンテンツを集約することができる。

ステップ2:Twitterの集約フィードを作成する

Twitter Feed Proを使って、あなたのサイトに新しいフィードを作成することができます。

そのためには、WordPressのダッシュボードからTwitter Feed " All Feeds メニューに移動します。新しいページで、一番上の新規追加ボタンをクリックします。

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

これで、あなたのウェブサイトに新しいTwitterフィードが作成されます。次に、このフィードを使って集約したいTwitterコンテンツの種類を選択します。

4種類のフィードタイプから選択でき、それぞれが異なる種類のTwitterコンテンツを集約します:

  • ユーザーのタイムライン Twitterユーザーのプロフィールからのツイートを表示
  • ハッシュタグ: 特定のハッシュタグが付いたツイートを埋め込む
  • 検索する Twitterの検索結果を表示する
  • リスト 特定のTwitterリスト内のアカウントが投稿したツイートを表示する

ここで実際に集約が行われます。さらに、複数のオプションを選択した場合、Twitter Feed Pro はそのすべてを1つのフィードにまとめます。

1つ以上のフィードの種類を選択し、「次へ」をクリックしてください。

オプションとしてTwitterのハッシュタグフィードを選択してください

このチュートリアルでは、実演としてTwitterのハッシュタグフィードを選んでみたいと思います。

これで、あなたのウェブサイトに新しいツイッターフィードができました。次のステップでは、このフィードをあなたのTwitterアカウントに接続します。

ステップ3:Twitterアカウントに接続する

Twitter Feed Proを使えば、数回のクリックで新しいフィードをTwitterに接続できます。

始める準備はできましたか?ポップアップで「接続」 ボタンをクリックしてください。

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

読み取り専用アクセスを求める権限画面が表示されます。これは、このプラグインがあなたのツイートを取得することはできますが、あなたに代わって投稿したり、フォローしたり、何かを変更したりすることはできないことを意味します。

アプリを承認」をクリックすれば、接続が完了します。

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

そうすると、ワードプレスのウェブサイトに戻ります。ここから、Twitterフィードのソースを選択できます。

つまり、Twitterのハンドルネーム、ハッシュタグ、検索ワード、Twitterリストなどをポップアップに入力できる。すると、フィードにそのソースからのツイートが表示されるようになります。

先ほどハッシュタグフィードタイプを選んだので、この例ではハッシュタグを入力します。

その後、[Next]ボタンをクリックして続行します。

ツイッターフィードのハッシュタグを選択する

Twitterアカウントと接続し、ソースを選択すると、Twitterのコンテンツを集約するフィードの準備が整います。

フィードをウェブサイトに追加する前に、ステップ4で見た目をカスタマイズすることができます。

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

Twitter Feed Proを使えば、フィードは自動的にあなたのウェブサイトのデザインをコピーし、箱から出してすぐに驚くほど見栄えが良くなります。

また、自分のTwitterフィードをもっとコントロールしたい場合は、使えるカスタマイズオプションがたくさんある。

まず、Twitterフィードに使用するテンプレートを選択します。ここでは7種類のフィードテンプレートから選ぶことができます:

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

お好みのフィード・テンプレートを選択し、「次へ」ボタンをクリックします。

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

テンプレートを選んだら、ライブフィードエディターを使ってTwitterフィードをさらにカスタマイズすることができます。

左側には、カスタマイズパネルがあります。そこにあるオプションを使って、フィードのレイアウト、配色、ヘッダーのスタイル、ボタンのデザインなどを設定することができます。

ライブフィードエディタ twitterフィードプロ ビジュアルプレビュー

これらのオプションを使用すると、右側に変更のライブプレビューを見ることができます。あなたのTwitterフィードがどのように見えるかをリアルタイムで見ることができます。

始めるには、左側にあるフィードレイアウトオプションを探して クリックします。

フィードレイアウトオプションを選択し、Twitterフィードを作成する

ここから、Twitterフィードのレイアウトを3種類から選ぶことができます:リスト、メイソンリー カルーセルの3種類です。

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

各ツイートがあなたのページでより多くのスペースを確保したいですか?

すべてのツイートを1列に表示するリストレイアウトを 選ぶことができます。

ツイッター・リスト・レイアウト・アグリゲーター

一度に多くのTwitterコンテンツを集約したい場合は、メイソンレイアウトが 役立ちます。

このオプションは、あなたのツイートを一度にたくさんの異なる列で表示します。

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

最後に、カルーセルレイアウト です。美しいTwitterスライドショーのカルーセルを使ってツイートを表示します。

その結果、ページのスペースを取らずに多くのツイートを表示することができる。

カルーセルレイアウト

使いたいTwitterフィードのレイアウトを選んだら、「保存」をクリックする。

Twitterフィードのデザインの編集を続けるには、上部にある小さなカスタマイズ ボタンをクリックします。

メインメニューに戻る ライブフィードエディター

次に、左側の配色 オプションをクリックして、Twitterフィードの色を設定します。

配色を選ぶ twitterフィード

このプラグインを使えば、配色を選ぶだけで、Twitterフィードのすべての色を瞬時に一度に変更することができる:

  • テーマからの継承: ウェブサイトのテーマと同じ色を使用する。
  • ライト明るい背景と暗いフォントでフィードを表示します。
  • 暗い:暗い背景と明るいフォントを選ぶ。
  • カスタム: 手動で色を選択
ツイッターフィードの配色オプション

好みの配色を選択し、もう一度「保存」をクリックする。

全体として、ライブフィードエディタは、フォント、ヘッダーのスタイル、テキストの長さ、そして「さらに表示」ボタンなど、ほとんどのユーザーが実際に気にする詳細を網羅しており、編集するにつれてプレビューもリアルタイムで更新されます。

最後にSave ボタンをクリックして変更を確定します。

Twitterフィードのスタイリングが終わったら、次はそれをWordPressのウェブサイトに埋め込みましょう。

ステップ5:WordPressサイトにTwitterフィードを埋め込む

収集したTwitterのコンテンツをサイトに表示するには、次の2つの方法から選択できます:

  • WordPressページにTwitterフィードを集約する
  • WordPressのサイドバーやフッターにTwitterフィードを集約する

この2つの方法の使い方を以下に見てみよう。

WordPressページにTwitterフィードを集約する

この方法を使えば、ページ上にTwitterのコンテンツを表示して、それをメインの注目ポイントとして訪問者の関心を引くことができます。さらに、ライブフィードエディタから直接その設定を行うことも可能です。

上部の埋め込み ボタンをクリックするだけで、すぐに始められます。

ライブフィードエディタ埋め込みボタン

そうすると、Twitter Feed Proがポップアップを表示し、Twitterフィードをどこに埋め込むかを尋ねます。

続行するには、「ページに追加」をクリックします。

ページに追加する

その後、あなたのウェブサイトにあるページのリストを見ることができます。

リストから、Twitterコンテンツを集約したいページを選択し、下の追加 ボタンをクリックします。

新しいページにツイッターフィードを追加する

このプラグインは、WordPressエディターを使ってTwitterフィードを埋め込むことができるように、そのページにあなたを送ります。

まず、プラス(+)アイコンをクリックして、エディターにコンテンツブロックを追加します。

新しいワードプレスブロックを追加する

検索バーを使って「twitter feed」ブロックを探します。そして、下の検索結果からTwitter Feedをクリックします。

ワードプレスサイトにツイッターフィードを埋め込む

最後に、Publish またはUpdateを クリックして変更を確認すると、Twitterフィードがオンラインになります。

これで、フィードがツイッターのコンテンツを集約し、訪問者に表示する。WordPressのページを開いて見てみてください。

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

ウェブサイトにツイートを表示するもう1つの方法は、Twitterフィードウィジェットを表示することです。

まず、ダッシュボードからTwitter Feed " All Feedsメニューに進みます。このページで作成したすべてのTwitterフィードを見ることができます。

作成したTwitterフィードをクリックして、ライブフィードエディターで開きます。

オープン・ハッシュタグ

ライブフィードエディターから、右上の埋め込み ボタンをクリックして開始します。

ライブフィードエディタ埋め込みボタン

ポップアップで、ウィジェットに追加 オプションをクリックして続行します。

そうすると、Twitter Feed ProがWordPressのウィジェットページに移動します。

ウィジェットにtwitterフィードを追加

ここで、Twitterウィジェットを埋め込む場所を選択できます。

サイドバーにTwitterのコンテンツを表示するには、サイドバーパネルを 選択します。

サイドバーパネルを開く

ツイートをフッターに表示したい場合は、「フッター」をクリックしてください。

この例では、ウェブサイトのサイドバーを使います。

フッターパネルを開く

下部のプラスアイコン(+)を クリックして、新しいTwitterウィジェットを追加します。

最後に、オプションからTwitterフィードウィジェットを選択します。

ワードプレスにツイッターフィードウィジェットを追加

上部の更新ボタンをクリックすると、新しいTwitterウィジェットがオンラインになります。

さて、あなたのウェブサイトを開けば、フッターやサイドバーに集約されたツイッターのコンテンツをチェックすることができる。

ワードプレスのサイドバーにツイッターフィードを埋め込む

インストールからライブの集約フィードの表示まで、設定は以上です。この仕組みの真価は、時間が経つにつれて明らかになります。新しいツイートを手動で貼り付ける必要はなく、そのハッシュタグで新しい投稿があるたびに、フィードが自動的に更新されるのです。

後で2つ目や3つ目のソースを追加しても、追加の設定は一切必要なく、これまでとまったく同じように動作し続けます。

ここからは、ユーザーが改めて操作しなくてもフィードは自動的に最新の状態に保たれます。これこそが、静的なツイートを1つずつ手動で埋め込むのではなく、そもそもフィードをまとめて表示する意味なのです。

Twitterのフィードを集約する準備はできましたか?こちらから「Twitter Feed Pro」を入手してください

この機会に、Twitterで稼ぐためのベストな方法のリストもぜひご覧ください。

また、サイトに追加できるおすすめのTwitterウィジェットの事例を紹介した次の記事もぜひご覧ください。

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

コメントを追加する

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