ウェブサイトにX(Twitter)のプロフィールタイムラインを埋め込む方法【簡単ガイド】
ホーム ブログ ウェブサイトにX(Twitter)のプロフィールタイムラインを埋め込む方法【簡単ガイド】

ウェブサイトにX(Twitter)のプロフィールタイムラインを埋め込む方法【簡単ガイド】

ツイッターのタイムラインをウェブサイトに埋め込む方法

ウェブサイトにX(Twitter)のプロフィールを埋め込みたいですか?

X(Twitter)のプロフィールを表示することは、ウェブサイトから「いいね」、返信、フォロワーを新たに獲得するための最も簡単な方法です。

このチュートリアルでは、コーディング不要でX(Twitter)のプロフィールを簡単に埋め込む方法をご紹介します。

このガイドの内容は以下の通りです。スキップしたい場合は、セクションをクリックしてください。

始めよう!

なぜサイトにX(Twitter)のプロフィールを埋め込むのか?

自分のプロフィールから最近のXの投稿を埋め込むことで、ウェブサイトの訪問者を簡単に新しいフォロワーに変えることができます。

あなたのサイトを訪れている人たちは、すでにあなたのコンテンツに興味を持っているため、あなたのX(Twitter)アカウントをフォローしてくれる可能性が高くなります。

さらに、他のX(Twitter)ユーザーのコンテンツを自分のウェブサイトに埋め込むこともできます。そうすることで、サイトに関連性の高いXの投稿や写真、動画を掲載し、訪問者の興味を引き続けることができます。

また、X(Twitter)のプロフィールから、最新のニュースやお知らせを目立たせることもできます。そうすることで、サイト訪問者全員が貴社の最新情報を入手できるようになります。

さらに、他のユーザーのX(Twitter)プロフィールから、レビュー、体験談、製品デモなどのユーザー生成コンテンツを表示することもできます。これは「ソーシャルプルーフ」として機能し、訪問者に購入を促すことができます。

twitterレビューフィードの例

そして、人々があなたのウェブサイトに多くの時間を費やすようになれば、SEO対策も格段に向上します。そのため、あなたのウェブサイトはさらに多くの潜在顧客に簡単にアプローチできるようになるのです。

X(Twitter)のコンテンツを埋め込むべき理由がわかったところで、次はX(Twitter)のプロフィールを簡単に埋め込む方法を見ていきましょう。

WordPressにX(Twitter)のプロフィールを埋め込む最も簡単な方法

X(Twitter)のプロフィールを埋め込む際には、次の2つの方法があります:

  • 手動での方法:X(Twitter)の公式埋め込みコード生成ツールを使用し、コードを調整してから、ウェブサイトに直接追加します。
  • 簡単な方法: X(Twitter)のプラグインを使えば、X(Twitter)のプロフィールをサイトに自動的に埋め込むことができます。

手動で行う場合は、ブラウザで publish.twitter.com を開き、X(Twitter)のプロフィールを埋め込むためのHTMLコードを生成する必要があります。

そのHTMLコードをウェブサイトに挿入すれば、そのプロフィールからのX件の投稿をようやく表示できるようになります。

お分かりのように、この方法は複雑な埋め込みコードを管理しなければならないので、混乱するかもしれません。

さらに、自分のサイトに埋め込んだX(Twitter)のプロフィールを追跡する方法が一切なくなります。

さらに、X(Twitter)のプロフィールはウェブサイトのテーマのデザインと一致しないため、ブランディングと調和しない可能性があります。

また、Xの投稿の表示方法をカスタマイズしたい場合は、コードを手動で編集するか、開発者に依頼して対応してもらう必要があります。

朗報なのは、X(Twitter)のプロフィールをウェブサイトに埋め込む簡単な方法があるということです。それが「X(Twitter)Feed Pro」です。

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

このプラグインを使えば、HTML、CSS、JavaScript、さらにはiFrameさえも使わずに、わずか数分でWordPressサイトにX(Twitter)のコンテンツを表示することができます。

さらに、埋め込んだX(Twitter)のコンテンツはすべて、自動的にウェブサイトのデザインに合わせられます。そのため、X(Twitter)のプロフィールも、ブランドのイメージに完璧にマッチするようになります。

X(Twitter)Feed Proには、ウェブサイト上でX(Twitter)のフィードをどのように表示するかを設定できる、詳細なカスタマイズオプションも備わっています。さらに、ウェブサイト上でX(Twitter)のプロフィールがどのように表示されるかを確認できるライブプレビュー機能も利用できます。

X(Twitter)Feed Proのもう一つの優れた機能は、X(Twitter)フィードのキャッシュコピーを自動的に保存してくれることです。これにより、サイトでは毎回フィードを最初から読み込むのではなく、保存されたコピーを表示することができます。

その結果、ウェブサイトの読み込みが格段に速くなり、SEO対策も万全になる。

最大の魅力は?「X (Twitter) Feed Pro」には、いつでもサポート体制を整えている専門家チームによる、質の高い専任サポートが付いています。

15万人以上のアクティブユーザーから 4.9/5の星評価を獲得している「X (Twitter) Feed Pro」は、まさに市場で最高のX (Twitter) フィードプラグインです。

これだけで、X(Twitter)のソーシャルメディアコンテンツを埋め込み、訪問者の関心を引いたり、X(Twitter)のフォロワーを大幅に増やしたり、コンバージョン率を向上させたりなど、さまざまな効果が期待できます。

サイトにX(Twitter)のプロフィールを埋め込む準備はできましたか?今すぐ「X(Twitter)Feed Pro」を入手しましょう!

X(Twitter)のプロフィールを埋め込む最も簡単な方法がわかったところで、以下のチュートリアルを始めましょう。

ウェブサイトにX(Twitter)のプロフィールタイムラインを埋め込む方法

X(Twitter)Feed Pro を使って X(Twitter)のプロフィールを埋め込むには、以下の手順に従うだけです:

始めよう!

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

まず、こちらから「X (Twitter) Feed Pro」を入手し、WordPressサイトにプラグインをインストールしてください。

方法がわからない場合は、WordPressプラグインのインストール方法をご覧ください。

プラグインをインストールして有効化したら、ステップ2に進んで「X (Twitter) Feed Pro」を使い始めましょう。

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

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

一番の利点は?プラグインのガイドフローに従うだけで、それができるのだ。

まず、ダッシュボードから「X(Twitter)フィード」»「すべてのフィード」メニュー を開き、上部にある「新規追加」ボタンを クリックします。

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

その後、ウェブサイトに掲載したいX(Twitter)フィードの種類を選択できます。続行するには、「ユーザータイムライン」を選択し、「次へ」ボタンをクリックしてください。

フィードタイプを選択 twitterr

このプラグインを使ってX(Twitter)のフィードを作成したところで、次はそれを自分のX(Twitter)アカウントに連携させます。

ステップ3:フィードをX(Twitter)に連携する

X(Twitter)のフィードに、ご自身のウェブサイトのプロフィールを埋め込みたい場合は、X(Twitter)アカウントと連携させるだけで済みます。

こちらの接続ボタンをクリックしてください。

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

次に、「X (Twitter) Feed Pro」は、Xの投稿を取得してウェブサイトに表示するために、アカウントへの読み取り専用アクセス権を要求します。

このプラグインは、お客様のアカウントに変更を加えることはできず、X(Twitter)上の情報を閲覧することしかできません。したがって、Smash Balloonの「X(Twitter)Feed Pro」プラグインは安心してご利用いただけます。

「X (Twitter) Feed Pro」への読み取り専用アクセス権を付与するには、「アプリを承認」ボタンをクリックしてください。

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

X(Twitter)アカウントを連携すると、ウェブサイトに表示したいX(Twitter)のプロフィールを選択できるようになります。

「ユーザータイムライン」フィールドに、選択したX(Twitter)のプロフィールを入力してください。

最後に「Next」ボタンをクリックして進みます。

twitterフィードを埋め込む

X(Twitter)のプロフィールフィードのソースを追加したところで、ステップ4に進む準備が整いました。そこで、新しいフィードのデザインをカスタマイズできます。

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

このプラグインはウェブサイトのデザインに自動的に合わせてくれるため、X(Twitter)のフィードもブランドイメージにぴったりと馴染みます。

さらに、X(Twitter)のプロフィールフィードを細かくカスタマイズすることもできます。

まず、このプラグインには7つのフィードテンプレートが用意されています。フィードに使いたいものを選んでください:

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

フィードテンプレートを選択したら、「次へ」をクリックします。

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

これで、プラグインがライブフィードエディタを開き、X(Twitter)のフィードをさらにカスタマイズできるようになります。

エディタの左側にカスタマイズオプションが表示されます。そこから、X(Twitter)フィードのレイアウト、背景、色、ヘッダーのスタイル、ボタンのデザインなど、さまざまな設定を行うことができます。

エディタの右側には、X(Twitter)のフィードがリアルタイムでプレビュー表示されます。これにより、変更内容を簡単に確認することができます。

ライブフィードエディタ

ライブフィードエディタを使って、ウェブサイト上のXの投稿のレイアウトを変更できるようになりました。

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

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

その後、このプラグインは、X(Twitter)のフィードで使用できる3種類のレイアウトを表示します:

  • リスト
  • 石工
  • カルーセル

以下、それぞれのレイアウトを見ていこう:

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

リストレイアウトを選択すると、Xの投稿が、公式のX(Twitter)フィードのような1列のレイアウトで表示されます。

さらに、このレイアウトなら、ウェブサイト上で「X」の投稿がより際立つようになります。

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

Xの投稿を複数列で表示したい場合は、代わりに「メゾニー」レイアウト を選択してください。

おまけとして、このレイアウトを使えば、X(Twitter)の投稿を一度に大量に表示することができます。

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

次に、X(Twitter)のコンテンツをスライドショー形式のカルーセルに表示する「カルーセルレイアウト」があります。

このレイアウトなら、インタラクティブであるだけでなく、スペースをあまり取らずに大量のXの投稿を表示することができます。

カルーセル・ツイッター・フィード

お好きなレイアウトを選択したら、「保存」ボタンをクリックしてください。

X(Twitter)のフィードをさらにカスタマイズしてみませんか? その場合は、上部にある「カスタマイズ」ボタンをクリックしてください。

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

これで、X(Twitter)のプロフィールフィードの色を変更する準備が整いました。ライブフィードエディタを使えば、これはとても簡単に行えます。

まず、左側の配色 オプションをクリックします。

配色オプション twitter feed pro

次に、フィードの色を簡単に変更できる4種類の配色をご覧ください:

  • テーマから継承する: WordPressテーマの色をコピーする
  • 明るい: 明るい背景色と暗いフォントを表示
  • ダーク:背景に濃い色を選び、文字色を薄くする。
  • カスタム: すべての色を手動で選択

配色を選択したら、変更を保持するために保存を クリックすることを忘れないでください。

ツイッターで配色を選ぶ

残りのカスタマイズオプションを使って、X(Twitter)フィードのヘッダーデザインを変更したり、ボタンの追加表示、Xの投稿数、ライトボックスの設定などを変更したりできるようになりました。

フィードの見た目に満足したら、もう一度「保存 」をクリックします。

これで、ステップ5でこのX(Twitter)のプロフィールをウェブサイトに埋め込む準備が整いました。

ステップ5:ウェブサイトにX(Twitter)のプロフィールを埋め込む

「X (Twitter) Feed Pro」では、WordPress サイトで X (Twitter) のプロフィールを表示する 2 つの方法を提供しています:

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

以下、この2つの方法を見ていこう。

WordPressのページにX(Twitter)のプロフィールを埋め込む

X(Twitter)Feed Proは非常に使いやすいので、ライブフィードエディタから直接フィードの埋め込みを開始することができます。

埋め込みボタンをクリックするだけです。

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

新しいポップアップ画面では、X(Twitter)のフィードをサイトに追加するさまざまな方法をご覧いただけます。

今回はページに埋め込むので、Add to a Pageを クリックして続けます。

ページに追加する

ポップアップには、ウェブサイト上のすべてのWordPressページのリストが表示されます。

オプションからページを選択したら、追加 ボタンをクリックします。

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

これで、そのページがWordPressの公式エディタで開かれているのが確認できます。ここでは、コンテンツブロックを使ってX(Twitter)のフィードを埋め込むことができます。

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

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

上部の検索バーを使って「twitter feed」ブロックを探すことができる。

最後に、下の検索結果から「X(Twitter)」フィードウィジェットをクリックしてください。

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

X(Twitter)のタイムラインウィジェットを公開する準備ができたら、「更新」ボタンをクリックしてください。

今すぐこのウェブページを開いてみると、あなたのウェブサイトの訪問者にはX(Twitter)のプロフィールがどのように表示されるかを確認できます。

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

このX(Twitter)のプロフィールをWordPressのページに埋め込んだところで、次はX(Twitter)のコンテンツを埋め込む別の方法を見ていきましょう。

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

また、X(Twitter)ウィジェットを使用すれば、指定したX(Twitter)プロフィールからの投稿を埋め込むこともできます。前のオプションと同様、これはライブフィードエディタから行うことができます。

まず、WordPressのダッシュボードから「X(Twitter)フィード」»「すべてのフィード」メニューに移動し、先ほど追加したX(Twitter)フィードをクリックします。

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

ご覧の通り、ライブフィードエディタでフィードを再度開くのはとても簡単です。以前と同じように、ここでX(Twitter)のフィードを自由にカスタマイズできます。

上部にある「埋め込み」ボタンを クリックすると、X(Twitter)のフィードの埋め込みを開始できます。

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

ポップアップから、X(Twitter)のプロフィールを埋め込みたい場所を選択できます。

続行するには、そこで「ウィジェットに追加」ボタンをクリックする。

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

その操作を行うと、X (Twitter) Feed Pro によってサイトの「ウィジェット」ページ に移動します。このページでは、WordPress のウィジェットの追加、削除、管理を行うことができます。

まずは、X(Twitter)のプロフィールを埋め込みたい場所を選択してください。

サイドバーエリアに埋め込みたい場合は、サイドバーパネルを クリックしてください。

サイドバーパネルを開く

以下、WordPressのサイドバーを例に説明する。

サイトのフッター部分にX(Twitter)のプロフィールを表示したい場合は、代わりに「フッター」パネルをクリックしてください。

フッターパネルを開く

サイドバーまたはフッターに新しいウィジェットを追加するには、下部にあるプラスアイコン(+)をクリックします。

最後に、オプションから「X(Twitter)」フィードウィジェットをクリックして、X(Twitter)のプロフィールを埋め込みます。

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

「更新」ボタンを クリックすると、X(Twitter)のプロフィールウィジェットがウェブサイトに表示されます。

どんな感じか見てみたいですか? サイトを開くだけで、X(Twitter)のプロフィールが埋め込まれており、誰でも閲覧できるようになっています。

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

それで終わりだ! 

これで、わずか数回のクリックでウェブサイトにX(Twitter)のプロフィールを埋め込む方法がわかりましたね。「X (Twitter) Feed Pro」を使えば、WordPressサイトにXの投稿を表示するのがこれまで以上に簡単になります。

X(Twitter)のプロフィールフィードを埋め込みたいですか?「X (Twitter) Feed Pro」はこちらから入手できます。

X(Twitter)をウェブサイトに組み込む方法をさらに知りたい場合は、ウェブサイトに埋め込むのに最適なX(Twitter)ウィジェットのリストをご覧ください。

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

コメントを追加する

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