X(ツイッター)リストをウェブサイトに埋め込む5つのステップ
ホーム ブログ X(ツイッター)リストをウェブサイトに埋め込む5つのステップ

X(ツイッター)リストをウェブサイトに埋め込む5つのステップ

X(ツイッター)リストをウェブサイトに埋め込む方法

ソーシャルメディア・マーケティングの経験から、X(ツイッター)コンテンツがサイトのエンゲージメントを高めるのにどれほど効果的かを身をもって体験してきた。

もしあなたのゴールが、厳選された投稿のストリームで訪問者をあなたのウェブサイトに釘付けにすることであれば、X(ツイッター)リストを埋め込むことは完璧な解決策となる。

関連性の高いX(ツイッター)のコンテンツを直接ウェブサイトに持ち込むために、私はこのステップバイステップのガイドをまとめました。

わずか数分で、X(ツイッター)リストをウェブサイトに埋め込む方法を学ぶことができます。

この記事の中で

ウェブサイトにX(ツイッター)リストを追加する理由

  • X(Twitter)の魅力的なビジュアルや動画を紹介することで、訪問者の興味を引き、滞在時間を伸ばす。
  • X(Twitter)リストからの本物の顧客のフィードバックを表示することで、製品を直接宣伝し、売上を伸ばすことができます。
  • ホームページやランディングページの目立つところに掲載することで、重要なお知らせや常設の投稿を増幅させましょう。
  • リストから、キーワードを豊富に含んだ最新のX投稿を埋め込むことで、SEOを強化し、より多くの人々にリーチしましょう。
  • X(ツイッター)でアクティブに活動していることを示し、サイト訪問者にフォローを促して、より多くのコンテンツを得よう。

X(ツイッター)リストをウェブサイトに埋め込む最も簡単な方法

X(Twitter)のあらゆる種類のコンテンツを埋め込むという点では、X(Twitter)Feed Proが断然、最良のソリューションとして際立っています。

ツイッターフィード埋め込みプラグイン

このツールを使えば、たった数分でダイナミックなX(ツイッター)リストフィードを構築し、デザインをカスタマイズし、サイトに追加することができます。しかも、コードを一行も触ることなく、そのすべてを行うことができます!

X(Twitter)Feed Proが、あなたのウェブサイトにとって画期的なツールとなり得る理由は次のとおりです:

  • リストの表示に加え、「X (Twitter) Feed Pro」を使用すれば、ユーザーのタイムライン、ハッシュタグフィード、検索結果を表示することもできます。
  • 直感的な3ステップのガイド付きセットアップにより、わずか数クリックで完全なX(ツイッター)フィードを立ち上げる準備ができます。
  • プロがデザインしたテンプレート集にアクセスし、すぐにインポートしてフィードを洗練された外観にすることができます。
  • モデレーションやフィルタリング機能を使えば、リストにあるXの投稿のうち、どの投稿をサイトに表示するかを完全に制御できます。
  • このプラグインには便利なライブエディターが搭載されており、X(ツイッター)リストの外観をあらゆる角度から調整することができます。
ライブフィードエディター twitterフィードプロ

さらに、「X (Twitter) Feed Pro」は驚くほど軽量です。これを使って写真や動画付きのXの投稿を大量に埋め込みましたが、どれもこれまでと変わらず素早く読み込まれました。

このツールを実際に試してみたいですか?こちらから「X(Twitter)Feed Pro」を入手してください

ステップバイステップガイドX(ツイッター)リストをサイトに埋め込む

さあ、始めましょうか?ここでは、「X (Twitter) Feed Pro」プラグインを使って、X(Twitter)のリストをウェブサイトに直接埋め込む方法をご紹介します。

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

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

ダウンロードしたら、次はWordPressのウェブサイトにインストールして有効化します。

このステップの詳細については、WordPressプラグインをステップバイステップでインストールする方法についてのガイドを参照してください。

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

それでは、あなたのX(Twitter)リストを紹介するために特別に設計された新しいフィードの作成を始めましょう。

まずは、WordPressのダッシュボードにアクセスし、「X(Twitter)フィード」»「すべてのフィード」メニュー へ移動してください。

そこから、新規追加 ボタンをクリックして、フィードの作成を開始することができます。

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

X(Twitter)Feed Pro では、表示したい X(Twitter)コンテンツの種類を選択できます。以下のオプションから選ぶことができます:

  • ユーザータイムライン:特定のX(Twitter)アカウントからのX件の投稿を表示するのに最適です。
  • ハッシュタグ:選択したハッシュタグが付いた投稿をX件表示したい場合。
  • 検索:特定の検索キーワードに基づいた結果を埋め込むのに便利です。
  • リスト:公開されているX(Twitter)リストの投稿の埋め込みを開始します。

それでは、Listオプションを選択し、Nextをクリックします。

twitterフィードのリストフィードタイプを選択する

ステップ3:X(Twitter)のリストを連携する

新しいフィードを作成したら、次は、埋め込みたいX(Twitter)のリストとそれを連携させましょう。

ポップアップに表示される接続ボタンをクリックするだけです。

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

そうすると、ウェブブラウザでX(Twitter)が開き、そこで「X(Twitter)Feed Pro」プラグインに読み取り専用アクセス権を付与することができます。

心配しないでください。"読み取り専用 "とは、プラグインがあなたのコンテンツを見ることはできるが、絶対に変更を加えることはできないという意味です。

アプリの認証ボタンをクリックします。

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

次に、ウェブサイトに掲載したいX(Twitter)のリストを選択できます。

まず、ブラウザでX(Twitter)のリストを開き、URLの末尾にあるリストID をコピーしてください。

あなたのウェブサイトに戻り、「次へ」をクリックする前にIDを貼り付けます

twitterリストのリストIDを貼り付ける

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

ウェブサイト上でX(Twitter)のリストフィードをどのように表示するか、設定する段階です。まず、あらかじめ用意されたテンプレートをインポートして、デザインを素早く変更することができます。

7つのユニークなオプションからテンプレートを選び、「次へ」をクリックする。

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

テンプレートを選択すると、「X (Twitter) Feed Pro」がライブフィードエディタへ遷移します。

ここでは、左側のカスタマイズオプションを使用して、X(Twitter)のリストがウェブサイト上でどのように表示されるかを設定できます。

右側には、X(Twitter)リストのフィードがリアルタイムでプレビュー表示されるため、変更を加えるたびにその都度確認することができます。

ビジュアルカスタマイザーのtwitterリストフィード

ここで作業するオプションはたくさんあるので、カスタマイザーがどのように機能するかをお見せするために、主要なものをいくつか見ていくことにしよう。

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

X(Twitter)のリストでは、3種類の異なるフィードレイアウトから選択できるようになりました:

  • リスト: コンテンツを1列で表示し 、リストに含まれるX件の投稿がそれぞれはっきりと見えるようにします。
  • Masonry:Xの投稿を複数の列に並べて一度に多数表示します。写真や動画のギャラリーを作成するのに最適なレイアウトです。
  • カルーセル:X(Twitter)のリストをインタラクティブなスライドショーに変え、ウェブサイトに躍動感をもたらしましょう。

レイアウトを選んだら、「保存」をクリックすると、変更が保存されます。

twitterリストフィードのレイアウトオプション

これらのレイアウトオプションの下には、リストフィードに表示される記事の数をコントロールする設定もあります。

レイアウトが完成したら、左上のカスタマイズ ボタンをクリックします。

メイン・カスタマイズのTwitterリスト・フィードに戻る

この後、メインのカスタマイズ・オプションに戻ります。今回はフィードの色を変えてみましょう。

左側にある配色オプションを探し、クリックする。

twitterリストフィードの配色オプションを開く

レイアウトオプションと同様に、さまざまな配色から選ぶことができる:

  • テーマからの継承: WordPressテーマと同じ配色を使用する。
  • 明るい色:フィードの背景を明るい色にし、フォントを暗い色に合わせる。
  • ダーク: X(Twitter)のフィードにぴったりの、暗い背景と明るいフォント色
  • カスタマイズ: X(Twitter)のリストフィードの色をすべて自分で選ぶ

配色を選び(またはカスタムで作成し)、先ほどと同じように「保存」をクリックする。

ツイッターのリストフィードの配色

それが終わったら、残りのオプションを使って、X(Twitter)のリストフィードをさらにカスタマイズできます。Xの投稿デザインやヘッダー、ボタンのデザインなど、自由に調整してみてください。

変更が完了したら、「保存」をクリックして確認することを忘れないでください。

ステップ5:X(ツイッター)リストをウェブサイトに公開する

ライブフィードエディタを使えば、WordPressに不慣れな方でも、X(Twitter)のコンテンツを埋め込むのはとても簡単です。

まず、エディター上部の埋め込みボタンをクリックします。

ツイッターのリストフィードを埋め込む

その操作を行うと、このX(Twitter)フィードを埋め込む方法を示すポップアップが表示されます:

  • ページに追加: 選択したWordPressページにX(Twitter)のフィードを表示する
  • ウィジェットに追加: 代わりに、サイドバーやフッター領域にX件の投稿を表示する
  • コピーしてください: 手動でショートコードをコピーして、サイトの任意の場所にこのフィードを追加します。

この例では、ページに追加するので、「ページに追加」ボタンをクリックしてみよう。

ツイッターのリストをページに追加する

次に、プラグインは利用可能なWordPressページの完全なリストを表示します。

使用したい特定のページを選択し、「追加」をクリックします。

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

X (Twitter) Feed Pro は、選択したページを WordPress エディタ内で自動的に開きます。

プラス(+)アイコンをクリックして、ここに新しいコンテンツブロックを追加します。

新しいブロック・コンテンツ・ブロックを追加する

検索バーを使って「twitter feed」ブロックを探す。

次に、検索結果から「X(Twitter)フィード」ブロックを選択して、このページにX(Twitter)のリストを埋め込みます。

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

最後に、「更新」 をクリックすると、 このX(Twitter)のリストフィードが公開され訪問者が閲覧できるようになります。

また、そのページを開けば、自分のX(Twitter)のフィードが他のユーザーにはどのように表示されるかを確認することもできます。

サイト上のtwitterリストフィードの例

最終的な感想

これで完成です!以上のステップを踏めば、ほんの数クリックでX(ツイッター)リストをウェブサイトに表示できるようになります。

X(Twitter)Feed Proプラグインを使用している場合、その手順は非常に簡単です。埋め込むX(Twitter)リストを正しく選択すれば、ウェブサイトでのエンゲージメントを簡単に高めることができます。

X(Twitter)のリストをアピールする準備はできましたか?今すぐ「X(Twitter)Feed Pro」を使い始めましょう

また、X(Twitter)での収益化に興味がある方は、X(Twitter)で稼ぐ方法に関するガイドをご覧ください。

ソーシャルメディア・マーケティングのヒントとガイド

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

コメントを追加する

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