ウェブサイトにTwitterカードを追加する方法(ステップバイステップガイド)
クリック・ソーシャル

ClickSocialを使ってWordPressから直接ソーシャルメディア投稿をスケジュールする

無料トライアル開始 アングルライト
ホーム ブログ ウェブサイトにTwitterカードを追加する方法(ステップバイステップガイド)

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

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

もしあなたがビジネスやブログ、オンラインプレゼンスを成長させようと努力しているなら、おそらくソーシャルメディアを利用していて、ツイッターもその一部だろう。

デジタルマーケッターとして、ツイッターのようなプラットフォームで自分のコンテンツに注目してもらうことが常に目標であることを知っている。

Twitterであなたのウェブサイトへのリンクをシェアするとき、そのリンクを目立たせて人々の注目を集めたいものです。そこでTwitterカードの出番です。 Twitterカードは、通常のツイートリンクを画像、タイトル、説明文付きのリッチなプレビューに変身させます。

Twitterのリンクをより効果的かつ視覚的にアピールしたいのであれば、うってつけの場所です。

このステップバイステップガイドでは、ウェブサイトにTwitter Cardsを追加する方法をご紹介します。私がWordPressにTwitter Cardsを設置するために使った簡単な手順をご紹介しますので、Twitterで共有するすべてのリンクをより効果的に活用することができます。

この記事で

ウェブサイトにTwitterカードを使う理由

ブランドのために多くの新しい人々にアプローチしたいのであれば、ツイッターは素晴らしい場所になる。

結局のところ、ソーシャルメディア・マーケティングの統計に関する我々の調査によると、ツイッターのユーザー数は3億3000万人を超えており、潜在的な顧客を大量に抱える巨大なソーシャルメディア・プラットフォームである。

しかし、ツイッターを始めるのは大変なことです-特に、あなたのブランドがすでに多くのソーシャルメディア・フォロワーを持っていない場合は。

シンプルで効果的な方法は、ウェブサイトにツイッターカードを追加することです。そうすれば、ウェブサイトの訪問者は簡単にあなたのツイートをチェックし、フォローすることができます。

ツイッターカードをウェブサイトに活用する方法をいくつかご紹介しましょう:

  • 関連性の高いツイートを埋め込むことで、人々の注目を集め、ウェブサイトへの関心を維持することができる。
  • あなたのブランドに関する最新ニュースやお知らせをツイートして、訪問者に簡単に知らせることができます。
  • また、Twitterのタイムラインを表示することで、あなたがTwitterに積極的に投稿していることをアピールすることができます。これは、より多くのリツイートを得るのにも役立ちます。
  • もっと売上を上げたいなら、Twitterカードを使って商品のレビューを埋め込み、より多くの人に買ってもらうことができます。
twitterレビューフィードの例

そして、それはスタートに過ぎない。Twitterカードは、ソーシャルメディアマーケティングを始め、フォロワーに参加してもらい、ビジネスを成長させる素晴らしい方法です。

ツイッターのコンテンツをウェブサイトに表示する最も簡単な方法を紹介しよう。

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

ウェブサイト訪問者にツイッターカードを表示したい場合、WordPressプラグインを使うのが一番です。

コーディングは一切不要で、好きなだけTwitterのコンテンツを埋め込むことができる。

そして、ツイートをウェブサイトに表示するのに最適なプラグインがTwitter Feed Proだ。

ツイッター・フィード・プロ ホームページ

このプラグインを使用すると、簡単にあなたのウェブサイトにTwitterカードを追加し、すぐにあなたの訪問者を魅了し始めることができます。

Twitter Feed ProはWordPressに最適なTwitterフィードプラグインです。魅力的なツイッターコンテンツを簡単に表示し、ウェブサイトの訪問者があなたのソーシャルメディアプレゼンスに興味を持ち続けられるように設計されています。

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

Twitterカードの設定が簡単なように、Twitter Feed Proの使い方も簡単です。どちらも複雑なコーディングは必要ありません。

さらに、表示したいツイッターコンテンツの種類に関しては、豊富なオプションが用意されている。

ユーザーのタイムラインからのツイートを表示したり、選択したTwitterのハッシュタグを埋め込んだり、Twitterの検索結果を表示したり、他にもいろいろできます。

一番の特徴は?プラグインを使えば、Twitterカードが自動的にウェブサイトのデザインにマッチします。そうすれば、Twitterのコンテンツはあなたのブランディングに完璧にフィットします。

Twitter Feed Proで本当にありがたいのは、ビジュアルなフィードカスタマイザーだ。

Twitterフィードの見た目や表示するコンテンツを簡単にカスタマイズできるので、Twitterカードでリンクの見た目をコントロールするのと同じように、ウェブサイトのTwitter連携をコントロールできます。

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

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

このように、Twitter Feed ProはTwitterのコンテンツをウェブサイトに埋め込むのに最適なプラグインです。

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

ウェブサイトにTwitterカードを追加する準備はできましたか?Twitter Feed Proはこちらから

それでは、このプラグインを使ってウェブサイトにTwitterカードを追加する方法を紹介しよう。

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

まずは、Twitter Feed Proプラグインをダウンロードしてください。

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

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

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

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

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

そのフィードを使えば、大量のTwitterカードを一度に表示できる。

ダッシュボードエリアから、Twitterフィード " すべてのフィード メニューに移動して開始します。

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

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

その後、カードに表示するTwitterコンテンツの種類を選択できます。以下はそのオプションです:

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

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

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

フィードタイプを選択 twitterr

ご覧の通り、このプラグインを使えば数クリックでTwitterフィードを作成できる、

ステップ3では、このフィードをツイッターに接続し、ウェブサイトにツイッターカードを表示できるようにします。

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

Twitterカードを埋め込むには、この新しいフィードをあなたのTwitterアカウントに接続します。

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

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

プラグインがTwitterを開くので、アカウントの接続を完了させることができる。その際、プラグインに読み取り専用 アクセス権を与えるだけでよい。

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

Twitterアカウントに接続するには、こちらのAuthorizeアプリをクリックしてください。

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

Twitterアカウントとの接続が完了したら、次はソースを追加する番だ。

ソースには、ウェブサイトに表示したいTwitterのプロフィール、ハッシュタグ、リスト、検索語、Twitterのカスタムコンテンツを指定できます。

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

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

twitterフィードを埋め込む

これでステップ4に進み、ウェブサイト上でのツイッターカードの見栄えをカスタマイズすることができます。

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

Twitterカードを始めるには、あらかじめ用意されたデザインをインポートすることができます。以下は6つのオプションです:

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

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

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

そうすると、Twitter Feed Proがライブフィードエディターに移動します。ここから、Twitterカードのレイアウト、色、ボタンデザイン、ライトボックス、ヘッダーデザインなどを変更できます。

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

ライブフィードエディタ

カスタマイズを始めるには、ウェブサイト上のTwitterカードのレイアウトを変更します。

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

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

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

以下、見ていこう:

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

リストレイアウトを 使えば、Twitterの公式サイトのレイアウトのように、Twitterカードを1列に表示することができます。

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

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

次に、Twitterカードを複数の列で表示できるメイソンレイアウト です。

一度に大量のツイッターカードを見せるには最高の方法だ。

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

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

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

横型ツイッターフィードの例

Twitterフィードのレイアウトを選択したら、上部にある「保存」ボタンをクリックします。

次に、上部のカスタマイズ ボタンをクリックして、Twitterフィードのデザインを設定します。

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

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

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

配色オプション twitter feed pro

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

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

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

ツイッターで配色を選ぶ

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

最後に、保存 ボタンをクリックして、Twitterフィードの新しいデザインを確認します。

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

ステップ5: ツイッターカードをウェブサイトに埋め込む

ツイッターカードの見栄えをカスタマイズしたら、いよいよワードプレスのウェブサイトに埋め込みます。

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

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

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

WordPressページにTwitterカードを埋め込む

ライブフィードエディタを使用すると、数回のクリックで簡単にTwitterカードを埋め込むことができます - コーディングは必要ありません。

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

ツイッターフィードを埋め込む

そうすると、Twitterカードの場所を選択するポップアップが表示されます。

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

ページに追加する

次に、ウェブサイト上のすべてのWordPressページのリストが表示されます。Twitterカードを埋め込むページを選択することができます。

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

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

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

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

上部の検索バーに"twitter feed "と入力して、適切なコンテンツブロックを探してください。

次に、下のオプションからTwitter Feedブロックをクリックします。

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

最後に「更新」 ボタンをクリックすると、あなたのウェブサイトにツイッターカードが掲載されます。

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

ウェブサイト上のツイッターフィードの例

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

WordPressのサイドバーやフッターにTwitterフィードを埋め込む

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

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

まず、WordPressのダッシュボードエリアからTwitter Feed " All Feedsメニューに移動します。

すると、あなたのウェブサイトにあるすべてのTwitterフィードのリストが表示されます。埋め込みたいTwitterフィードをクリックしてください。

すべてのフィードを開く ツイッターフィード

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

ツイッターフィードボタンを埋め込む

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

これでWordPressのウィジェットページに移動し、Twitterウィジェットを追加できる。

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

ここから、Twitterカードのサイドバーとフッターを選択できます。

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

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

サイドバーパネルを開く

また、Twitterカードをフッターに表示することもできます。

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

フッターパネルを開く

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

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

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

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

これで、ウェブサイトのウィジェット対応エリアにTwitterカードが追加されました。あなたのウェブサイトを開いて見てください。

ウェブサイトにtwitterフィードウィジェットを埋め込む

簡単にTwitterのコンテンツをウェブサイトに追加したいなら、Twitter Feed Proが最適なプラグインだ。

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

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

また、プラグインを使わずに手動でTwitterカードを追加することもできます。

その結果、この方法を選ぶと、より多くの時間がかかります。結局のところ、あなたは手動でTwitterの埋め込みコードを生成し、あなたのウェブサイトに追加する必要があります。

その上、カスタマイズオプションがないので、あなたのTwitterカードはあなたのブランディングに合わないかもしれない。

ツイッターカードの見た目を変更したい場合は、自分でコードを修正するか、開発者にお金をかける必要がある。

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

それではさっそく、手動でTwitterカードを追加する方法を見ていきましょう。

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

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

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

ここでは、Twitterカードジェネレーターを使って、TwitterコンテンツのHTML埋め込みコードを作成することができます。

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

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

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

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

ステップ 3: ツイッターのURLを貼り付ける

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

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

TwitterタイムラインのURLをポップアップに貼り付けたらプレビューボタンをクリックして次に進みます。

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

最後に、TwitterカードのHTMLコードを見ることができます。また、Twitterカードがあなたのウェブサイトでどのように表示されるかのプレビューを見ることもできます。

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

ツイッターフィードを埋め込むためのコードをコピーする

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

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

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

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

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

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

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

新しい投稿を追加する

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

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

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

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

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

コピーしたTwitterの埋め込みコードをHTMLブロックに貼り付けます

そうすることで、あなたのウェブサイトにツイッターカードが埋め込まれます。

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

最後にPublishを クリックして変更を保存すると、Twitterカードがオンラインになります。

あなたのウェブサイトを開くだけで、ツイッターカードがどのように見えるかを見ることができます。

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

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

まず、TwitterのURLをコピー し、WordPressのウェブサイトに戻ります。その後、URLを投稿やページに貼り付けるだけ です。

ウェブサイトにツイッターカードを埋め込む

以前と同じように、変更を確認するためにPublishをクリックすると、新しいTwitterカードがオンラインになります。

これで完成だ!

このように、WordPressプラグインを使えば、Twitterカードをウェブサイトに追加するのはとても簡単です。Twitter Feed Proを使えば、WordPress初心者でも数回クリックするだけで、Twitterのコンテンツを表示させることができます。

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

ツイッターをあなたのブランドで最大限に活用したい方は、ツイッターでお金を稼ぐベストな方法のリストをご覧ください。

Elementorのウェブサイトをお持ちですか?ElementorサイトにTwitterフィードを埋め込む方法をご紹介します。

このチュートリアルが役に立ったなら、Facebookや Twitterでソーシャルメディア・マーケティングに関する役立つヒントをもっと得よう。

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

コメントを追加する

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