ウェブサイトにTwitterカードを追加する方法(ステップバイステップガイド)
ホーム ブログ ウェブサイトにX(Twitter)カードを追加する方法(ステップバイステップガイド)

ウェブサイトにX(Twitter)カードを追加する方法(ステップバイステップガイド)

ウェブサイトにツイッターカードを追加

ビジネスやブログ、あるいはオンラインでの存在感を高めようとしているなら、おそらくソーシャルメディアを活用していることでしょう。その一環として、X(Twitter)も利用しているはずです。

デジタルマーケターとして、Xのようなプラットフォームでコンテンツに注目してもらうことが、常に目指すべき目標であることは承知しています。

Xで自分のウェブサイトへのリンクを共有する際は、そのリンクを目立たせて、人々の注目を集めたいものです。そこで役立つのが、X(Twitter)カードです。Xカードを使えば、通常のツイート内のリンクが、画像やタイトル、説明文などを含む魅力的なプレビューに変身します。

X上のウェブサイトのリンクをより効果的で、見た目にも魅力的なものにしたいとお考えなら、ここがぴったりです。

このステップバイステップガイドでは、ウェブサイトにXカードを追加する方法を詳しくご紹介します。私がWordPressでXカードを設定する際に用いた簡単な手順を共有しますので、Xでシェアするすべてのウェブサイトリンクをより効果的に活用できるようになります。

この記事で

ウェブサイトにX(Twitter)カードを導入する理由

ブランドの認知を広め、多くの新しいユーザーにリーチしたいなら、X(Twitter)は絶好の場となるでしょう。

何と言っても、ソーシャルメディアマーケティングの統計に関する当社の調査によると、Xのユーザー数は3億3000万人を超えており、膨大な数の潜在顧客を抱える巨大なソーシャルメディアプラットフォームなのです。

しかし、Xの運用を始めるのは難しい場合があります。特に、ブランドがまだソーシャルメディアで多くのフォロワーを持っていない場合はなおさらです。

そのためのシンプルで効果的な方法は、ウェブサイトに「Xカード」を追加することです。そうすれば、ウェブサイトの訪問者はあなたのツイートを簡単に確認したり、あなたをフォローしたりできるようになります。

ウェブサイトでXカードを活用するための、さらにいくつかの方法をご紹介します:

  • 関連性の高いツイートを埋め込むことで、人々の注目を集め、ウェブサイトへの関心を維持することができる。
  • あなたのブランドに関する最新ニュースやお知らせをツイートして、訪問者に簡単に知らせることができます。
  • Xのタイムラインを表示することで、あなたがXで積極的に投稿していることが他の人に伝わり、その結果、その場で連絡をくれる可能性が高まります。また、これによりリツイート数も増えるでしょう
  • 売り上げを伸ばしたい場合は、X Cardsを使って商品のレビューを掲載し、より多くの人に購入を促すことができます
twitterレビューフィードの例

そして、これはほんの始まりに過ぎません。Xカードは、ソーシャルメディアマーケティングを始め、フォロワーとの関わりを深め、ビジネスを成長させるための素晴らしい手段となり得ます。

ウェブサイト上でXのコンテンツを表示し始める最も簡単な方法を見てみましょう。

ウェブサイトにX(Twitter)カードを追加する方法(簡単な方法)

ウェブサイトの訪問者にXカードを表示したい場合は、WordPressプラグインを利用するのが最善の方法です。

そうすれば、コーディングを一切行わなくても、X(Twitter)のコンテンツを好きなだけ埋め込むことができます。

そして、ウェブサイトにツイートを表示するのに最適なプラグインは「X (Twitter) Feed Pro」です。

X(Twitter)Feed Proのホームページ

このプラグインを使えば、ウェブサイトにXカードを手軽に追加でき、すぐに訪問者との関わりを深めることができます。

「X (Twitter) Feed Pro」は、WordPress向けの最高のX (Twitter) フィードプラグインです。魅力的なXのコンテンツを簡単に表示し、ウェブサイトの訪問者にソーシャルメディアでの活動への関心を維持してもらうよう設計されており、Xカードの利用など、X戦略の改善に向けた取り組みと相乗効果を発揮します。

ほんの数回の簡単なクリックだけで、Xカードのフィードを作成・カスタマイズし、ウェブサイトに埋め込むことができます。

Xカードのセットアップが簡単であるのと同様に、X(Twitter)Feed Proの導入も素早く簡単です。どちらも複雑なコーディングは必要ありません。

さらに、表示したいXコンテンツの種類についても、数多くの選択肢が用意されています。

ユーザーのタイムライン上のツイートを表示したり、選択したXのハッシュタグを埋め込んだり、Xの検索結果を表示したりなど、さまざまな機能を利用できます。

一番の魅力は?プラグインを使えば、Xカードのデザインが自動的にウェブサイトのデザインに合わせられます。そうすることで、X上のコンテンツがブランドイメージに完璧にマッチします。

X(Twitter)Feed Proについて、私が特に気に入っている点の1つは、そのビジュアルフィードカスタマイザーです。

これにより、X(Twitter)フィードの表示方法や表示されるコンテンツを簡単にカスタマイズでき、Xカードを使ってリンクの外観を制御するのと同じように、ウェブサイトへのXの統合を自由に管理できるようになります。

わずか数クリックで、レイアウト、配色、ボタンデザイン、ヘッダースタイルなどを設定できます。

さらに、このプラグインにはWordPressの専門家チームが付属しており、いつでもあなたをサポートする準備ができている。

ご覧の通り、「X (Twitter) Feed Pro」は、ウェブサイトにXのコンテンツを埋め込むのに最適なプラグインです。

実際、世界的な大企業の中には、スマッシュバルーンを使ってソーシャルメディアフィードをウェブサイトに埋め込んでいるところもある。

ウェブサイトにXカードを追加する準備はできましたか?こちらから「X (Twitter) Feed Pro」を入手してください

それでは、このプラグインを使ってウェブサイトにXカードを追加する方法を見ていきましょう。

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

まずは、X(Twitter)Feed Proプラグインを入手し、お使いのパソコンにダウンロードしてください。

その後, あなたは、単にインストールし、あなたのウェブサイトにプラグインを有効にすることができます.

WordPressのプラグインをステップバイステップでインストールする方法については、こちらのチュートリアルをご覧ください。

プラグインのインストールと有効化が完了したら、以下のステップ2に進んでください。

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

プラグインの準備が整ったので、これを使ってウェブサイトに新しいX(Twitter)フィードを作成できます。

そのフィードを使えば、大量のX(Twitter)カードを一度に表示できます。

ダッシュボード画面から、「X(Twitter)フィード」»「すべてのフィード」メニュー に移動して、操作を開始してください。

新規追加 ボタンをクリックして、新しいフィードを作成します。

新しいX(Twitter)フィードを追加する

その後、カードに表示したいX(Twitter)コンテンツの種類を選択できます。選択可能なオプションは以下の通りです:

  • ユーザーのタイムライン: ウェブサイトにXのタイムラインを埋め込む
  • ハッシュタグ: 選択したハッシュタグが付いた投稿をX件表示する
  • ホームタイムライン ホームページのツイートを表示
  • 検索:検索語を選んで、その語を含むツイートを埋め込む
  • メンション あなたのプロフィールをタグ付けしたツイートを表示
  • リスト: ウェブサイトにXのリストを埋め込む
フィードタイプのオプション twitter

このリストからお好みのオプションを選択し、[Next] ボタンをクリックします。

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

フィードタイプを選択 twitterr

ご覧の通り、このプラグインを使えば、わずか数回のクリックでX(Twitter)のフィードを作成することができます。

手順 3 では、このフィードを X に連携させ、ウェブサイト上に X カードを表示できるようにします。

ステップ3:X(ツイッター)アカウントに接続する

X(Twitter)カードを埋め込むには、この新しいフィードをXアカウントに連携させてください。

そのためには、Connect ボタンをクリックしてください。

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

その後、プラグインがXを起動し、アカウントの連携を完了できるようになります。その際、プラグインに読み取り専用のアクセス権限を 付与するだけで済みます。

そうすれば、このプラグインはXの情報を見るだけで、一切の変更を行うことはできないため、あなたのXアカウントは完全に安全です。

Xアカウントを連携するには、こちらの「アプリを承認」をクリックしてください。

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

Xアカウントの連携が完了したので、次はソースを追加しましょう。

ソースとしては、Xのプロフィール、ハッシュタグ、リスト、検索キーワード、およびウェブサイトに表示したいXのカスタムコンテンツなどが挙げられます。

ここでは、ソースとして「@starbucksX」のプロフィールを追加しました。これにより、そのユーザーのプロフィールにあるXカードが表示されます。

ポップアップにソースを入力したら、「Next」 ボタンをクリックします。

X(Twitter)フィードのユーザータイムラインを埋め込む

これで、ステップ4に進み、ウェブサイト上のXカードの表示方法をカスタマイズすることができます。

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

まずは、X(Twitter)カード用にあらかじめ作成されたデザインをインポートすることから始めましょう。選択できる6つのオプションは以下の通りです:

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

テンプレートを選択したら、Nextをクリックして次に進みます。

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

その操作を行うと、X (Twitter) Feed Pro によってライブフィードエディタが表示されます。ここから、Xカードのレイアウト、色、ボタンのデザイン、ライトボックス、ヘッダーのデザインなどを変更できます。

右側には、X Cardsがお客様のウェブサイトでどのように表示されるかを示すライブプレビューがあります。

ライブフィードエディタ

カスタマイズを始めるには、ウェブサイト上のXカードのレイアウトを変更することができます。

フィードレイアウトオプションをクリックしてください。

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

その後、Xカードのレイアウトとして、「リスト」、「メイソンリー」、「 カルーセル の3種類から選択できます。

以下、見ていこう:

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

リストレイアウト を使用するとX(Twitter)の公式サイトのレイアウトと同じように、Xカードを1列で表示することができます

こうすることで、各Xカードがウェブサイト上ではっきりと見えるようになります。

リスト X(Twitter)のフィードレイアウト

次に、X枚のカードを複数列で表示できるマージンレイアウト があります。

一度にたくさんのXカードを展示するのに最適な方法です。

例:Masonry X(Twitter)フィード WordPress

また、カルーセルレイアウトを選択して、Xカードのスライドショーをウェブサイトに埋め込むこともできます。

このレイアウトは、あなたのウェブサイトをさらにインタラクティブにするのに役立ちます。

横向きのX(Twitter)フィードの例

X(Twitter)のフィードレイアウトを選択したら、上部にある「保存」ボタンをクリックしてください。

次に、上部の「カスタマイズ」ボタンを クリックして、X(Twitter)フィードのデザイン設定を続行できます。

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

これで、ライブフィードエディタを使って、X(Twitter)のフィードの色を変更できるようになりました。

左の配色 オプションをクリックしてください。

配色オプション X (Twitter) Feed Pro

色を変えるには、ここで4つの異なる配色から選ぶだけだ:

  • テーマから継承する: WordPressテーマの色をコピーする
  • 明るい: 明るい背景に暗い文字色
  • Dark:明るい文字色の上に暗い背景色
  • カスタム: 手動ですべての色を選ぶ

配色を選択したら、保存ボタンをクリックしてください。

ツイッターで配色を選ぶ

残りのカスタマイズオプションを使って、ヘッダー、ボタンデザイン、フィードサイズなどを数クリックで変更できる。

最後に、「保存」ボタンを クリックして、X(Twitter)フィードの新しいデザインを確定してください。

その後、最後のステップに進み、ウェブサイトにXカードを埋め込み始めることができます。

ステップ5:ウェブサイトにX(Twitter)カードを埋め込む

Xカードの表示方法をカスタマイズできたので、次はWordPressサイトにXカードを埋め込みましょう

このプラグインを使えば、2つの方法がある:

  • WordPressのページにXカードを埋め込む
  • WordPressのサイドバーやフッターにXカードを埋め込む

以下、両方の方法を見てみよう。

WordPressのページにX(Twitter)カードを埋め込む

ライブフィードエディタを使えば、コーディングの必要はなく、わずか数回のクリックでXカードを簡単に埋め込むことができます。

まずは、上部の埋め込み ボタンをクリックしてください。

X(Twitter)のフィードを埋め込む

その操作を行うと、X Cardsの保存先を選択できるポップアップが表示されます。

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

ページに追加する

次に、ウェブサイト上のすべてのWordPressページの一覧が表示されます。ここで、Xカードを埋め込みたいページを選択してください。

そうしたら、Addをクリックして続ける。

新しいページにX(Twitter)フィードを追加する

X(Twitter)Feed Proが、そのページをWordPressエディタで開くようになりました。ここで、プラス(+)アイコンをクリックして、新しいコンテンツブロックを追加できます。

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

上部の検索バーに「X(Twitter)フィード」と入力して、ここで適切なコンテンツブロックを探してください。

次に、下のオプションから「X(Twitter)」フィードブロックをクリックしてください。

WordPressサイトにX(Twitter)フィードを埋め込む

最後に、「更新」ボタンを クリックすると、Xカードがウェブサイトに公開されます。

どのように見えるかは、ウェブサイトを開いて自分で確認すればいい。

ウェブサイト上の「例 X(Twitter)」フィード

それでは、X (Twitter) Feed Pro を使って、ウェブサイトに X カードを追加する別の方法を見てみましょう。

WordPressのサイドバーまたはフッターにX(Twitter)のフィードを埋め込む

この方法を使えば、WordPressのサイドバーやフッターに、X(Twitter)カードをX(Twitter)ウィジェットとして埋め込むことができます。

ライブフィードエディターを使うこともできる。

まず、WordPressのダッシュボード画面から、「X(Twitter)フィード」»「すべてのフィード」メニューに移動します。

すると、ウェブサイト上のすべてのX(Twitter)フィードの一覧が表示されます。次に、埋め込みたいX(Twitter)フィードをクリックしてください。

すべてのフィードを開く ページ X(Twitter)のフィード

そうすると、ライブフィードエディタが再び開きます。「埋め込み」ボタンを クリックするだけで、Xカードの埋め込みを開始できます。

X(Twitter)フィードの埋め込みボタン

ポップアップで、ウィジェットに追加を クリックして続行する。

これでWordPressのウィジェットページに移動し、Xウィジェットを追加できるようになります。

ウィジェットにX(Twitter)フィードを追加する

ここから、Xカードの表示場所をサイドバーかフッターかから選択できます。

ウェブサイトのサイドバーに「X Cards」を表示したいですか?

サイドバーパネルを クリックするだけです。

サイドバーパネルを開く

あるいは、フッターにX枚のカードを表示するように設定することもできます。

その場合は、代わりにフッターパネルをクリックする。

フッターパネルを開く

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

その後、オプションから「X(Twitter)フィード」ウィジェットを選択してください。

WordPressにX(Twitter)フィードウィジェットを追加する

最後にUpdateをクリックして変更を保存します。

これで、ウェブサイトのウィジェット設置可能エリアにXカードが追加されました。ウェブサイトを開いて確認してみてください。

ウェブサイトにX(Twitter)フィードウィジェットを埋め込む

総じて言えば、X(Twitter)のコンテンツをウェブサイトに簡単に追加したいなら、「X (Twitter) Feed Pro」が最適なプラグインです。

それでは、プラグインを使わずにXカードを埋め込む方法を見ていきましょう。

ウェブサイトに X(Twitter)カードを手動で追加する

また、プラグインを一切使用せずに、手動でウェブサイトにXカードを追加することもできます。

そのため、この方法を選ぶと、かなり時間がかかってしまう可能性があります。何しろ、X(Twitter)の埋め込みコードを手動で生成し、それをウェブサイトに追加しなければならないからです。

さらに、ここではカスタマイズオプションが用意されていないため、Xカードが自社のブランドイメージに合わない可能性があります。

Xカードの見た目を変更したい場合は、自分でコードを修正するか、開発者に依頼して費用を支払う必要があります。

さらに、「X(Twitter)Feed Pro」のようなサポートチームも利用できません。サイトに埋め込みコードを追加した際にエラーが発生しても、サポートチームに助けを求めることはできません。

それでは、さっそく始めて、サイトにXカードを手動で追加する方法を見ていきましょう。

ステップ1: ツイッターにアクセスする

ツイッター公開ホームページ

まずは、ブラウザでpublish.twitter.comを開き、Twitter Publishのウェブサイトにアクセスしてください。

ここでは、Twitterカードジェネレーターを使用して、X(Twitter)のコンテンツ用のHTML埋め込みコードを作成できます。

ステップ2:埋め込みタイプを選択する

下にスクロールすると、3種類の埋め込みオプションがあります:

  • Twitterの埋め込み:サイトに1つのX(Twitter)カードを追加する
  • 埋め込みタイムライン:特定のタイムラインからX枚のカードを表示する
  • Twitterボタン:X(Twitter)ボタンを埋め込む
ツイッターでウェブサイトを公開するオプション

この例では、埋め込みTimelineオプションを使います。

ステップ3:X(Twitter)のURLを貼り付ける

その後、Twitterカード生成ツールのポップアップが表示されます。そこで、埋め込みたいXのタイムラインのURLを入力するだけです。

ツイッターのタイムラインのURLを追加

ポップアップにXのタイムラインのURLを貼り付けたら、「プレビュー」ボタンをクリックして次に進んでください。

ステップ4:HTMLコードをコピーする

これで、X(Twitter)カードのHTMLコードを確認できます。また、ウェブサイト上でXカードがどのように表示されるかのプレビューも確認できます。

続行するには、「コードをコピー 」ボタンをクリックします。

X(Twitter)フィードを埋め込むためのコードをコピーする

最後に、このコードを使って、次のステップでXカードを埋め込むことができます。

ステップ5:HTMLコードをWordPressに追加する

これで、HTML埋め込みコードをWordPressのページや投稿に貼り付けることができます。

WordPressのページを使用するには、ダッシュボードからページ " 新規追加 メニューをクリックします。

新しいワードプレスページを追加する

または、ダッシュボードから投稿 " 新規追加 メニューを開き、WordPressの投稿を使用することもできます。

この例では、WordPressのページを使うことにする。

新しい投稿を追加する

次に、プラス(+)アイコンをクリックして、ページまたは投稿にコンテンツブロックを追加します。

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

最後に、上部にある検索バーを探し、そこに「カスタムhtml」と 書く。

次に、下のオプションからカスタムHTMLブロックを選択します。

カスタムhtmlウィジェットをワードプレスサイトに追加する

これで、コピーしたX(Twitter)の埋め込みコードをHTMLブロックに貼り付けることができます。

そうすることで、X(Twitter)カードがウェブサイトに埋め込まれます。

手動でtwitterウィジェットを埋め込む.jpg

最後に、「公開 」をクリックして変更を保存すると 、Xカードがオンラインで公開されます。

ウェブサイトにアクセスすれば、Xカードの見た目が確認できます。

twitterウィジェット手動埋め込み例

しかし、Xカードを1枚だけ埋め込みたい場合は、もう少し簡単です。

まず、XのURLをコピーしてから 、WordPressのサイトに戻ってください。その後、その URL投稿やページに貼り付ける だけです。

ウェブサイトにXカードを埋め込む

前回と同様に、「公開」をクリックして変更内容を確定すると、新しいXカードがオンライン上に公開されます。

これで完成だ!

ご覧のとおり、WordPressプラグインを使えば、ウェブサイトにXカードを追加するのはとっても簡単です。「X (Twitter) Feed Pro」を使えば、WordPress初心者の方でも、ほんの数回のクリックでXのコンテンツを表示できるようになります。

そうすれば、ソーシャルメディアのフォロワーを増やし、ウェブサイトの訪問者を引きつけ、売り上げも伸ばすことができる。

自社のブランドでXを最大限に活用したいとお考えなら、Xで収益を上げるための最良の方法を紹介した当サイトのリストをご覧ください。

Elementorで作成したウェブサイトをお持ちですか?ここでは、ElementorサイトにX(Twitter)のフィードを埋め込む方法をご紹介します

このチュートリアルがお役に立ちましたら、FacebookXで私たちをフォローして、ソーシャルメディアマーケティングに関する役立つヒントをぜひチェックしてください。

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

コメントを追加する

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