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

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

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

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

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

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

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

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

この記事で

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

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

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

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

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

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

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

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

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

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

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

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

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

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

このプラグインを使えば、ウェブサイトにX(Twitter)カードを簡単に追加でき、すぐに訪問者とのエンゲージメントを高めることができます。

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

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

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

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

ユーザーのタイムラインからX件の投稿を表示したり、選択したX(Twitter)のハッシュタグを埋め込んだり、X(Twitter)の検索結果を表示したりするなど、さまざまな機能が利用できます。

最大のメリットは?このプラグインを使えば、X(Twitter)カードが自動的にウェブサイトのデザインに合わせて表示されます。そうすることで、X(Twitter)のコンテンツが貴社のブランディングに完璧にマッチします。

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

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

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

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

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

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

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

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

ステップ 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(Twitter)のタイムラインを埋め込む
  • ハッシュタグ: 選択したハッシュタグが付いた投稿をX件表示する
  • ホームのタイムライン :ホームページからX件の投稿を表示する
  • 検索:検索語句を選択し、その語句を含むX件の投稿を埋め込む
  • メンション: あなたのプロフィールにタグ付けされた投稿をX件表示する
  • リスト: ウェブサイトにX(Twitter)のリストを埋め込む
フィードタイプのオプション twitter

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

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

フィードタイプを選択 twitterr

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

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

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

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

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

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

その後、プラグインがX(Twitter)を開くので、そこでアカウントの連携を完了させることができます。その際、プラグインに読み取り専用のアクセス権限 を与えるだけで結構です。

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

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

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

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

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

ここでは、ソースとして@starbucksのX(Twitter)プロフィールを追加しました。これにより、そのユーザーのプロフィールからX(Twitter)カードが表示されます。

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

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

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

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

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

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

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

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

設定が完了すると、X (Twitter) Feed Pro からライブフィードエディタへ遷移します。ここから、X (Twitter) カードのレイアウト、色、ボタンのデザイン、ライトボックス、ヘッダーのデザインなどを変更できます。

右側には、あなたのウェブサイトでX(Twitter)カードがどのように表示されるかを示すライブプレビューが表示されています。

ライブフィードエディタ

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

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

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

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

以下、見ていこう:

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

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

こうすることで、各X(Twitter)カードがウェブサイト上ではっきりと表示されるようになります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ツイッターで配色を選ぶ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ページに追加する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ここから、X(Twitter)カードについて、サイドバーとフッターのどちらにするかを選択できます。

ウェブサイトのサイドバーにX(Twitter)カードを表示したいですか?

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

サイドバーパネルを開く

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

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

フッターパネルを開く

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

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

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

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

これで、ウェブサイトのウィジェット配置可能な領域にX(Twitter)カードが追加されました。ウェブサイトを開いて、確認してみてください。

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

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

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

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

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

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

さらに、ここではカスタマイズ機能がないため、X(Twitter)カードが自社のブランドイメージと合わない可能性があります。

X(Twitter)カードの表示を変更したい場合は、自分でコードを調整するか、開発者に依頼して費用を支払う必要があります。

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

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

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

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

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

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

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

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

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

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

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

その後、X(Twitter)カードジェネレーターのポップアップが表示されます。そこで、埋め込みたいX(Twitter)のタイムラインのURLを入力するだけで完了です。

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

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

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

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

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

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

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

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

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

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

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

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

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

新しい投稿を追加する

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

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

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

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

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

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

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

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

最後に、「公開 」をクリックして変更を保存すると 、X(Twitter)カードが公開されます。

ウェブサイトを開いて、X(Twitter)カードがどのように表示されるか確認してみてください。

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

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

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

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

前回と同様、「公開」をクリックして変更を確定すると、新しいX(Twitter)カードが公開されます。

これで完成だ!

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

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

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

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

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

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

コメントを追加する

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