ウェブサイトにX(Twitter)の投稿を埋め込む方法(初心者向け)
ホーム ブログ ウェブサイトにX(Twitter)の投稿を埋め込む方法(初心者向け)

ウェブサイトにX(Twitter)の投稿を埋め込む方法(初心者向け)

ウェブサイトにツイートを埋め込む方法

WordPressサイトにXの投稿を埋め込みたいと考えているけれど、どこから手をつければいいかわからない?

Xの投稿をX件埋め込むことで、実際の会話を紹介したり、利用者の声を共有したり、サイトのコンテンツを常に新鮮で魅力的なものに保つことができます。

また、X(Twitter)で視聴者とつながり、フォロワーを増やす効果的な方法でもあります。

自分のサイトにXの投稿を初めて追加してみたとき、X(Twitter)の標準的な埋め込みツールは分かりにくいと感じました。特に、始めたばかりの頃はなおさらです。

Smash Balloonでは、これまでに数百万人のWordPressユーザーがソーシャルメディアのフィードをシームレスに表示できるよう支援し、誰でも簡単にX(Twitter)のコンテンツを自分のウェブサイトに追加できるようにしてきました。

この記事では、サイトにXの投稿を埋め込むための、初心者にもわかりやすい手順を順を追って解説します。

何より素晴らしいのは、技術に詳しくない方でも、ほんの数ステップでウェブサイトにXの投稿を埋め込む方法を学べることです。

この記事で

なぜウェブサイトにXの投稿を埋め込むべきなのか?

X(旧Twitter)は、現存する最大のソーシャルメディアプラットフォームの一つであり、ビジネスを宣伝したいブランドにとって人気の場となっています。

X(Twitter)のユーザー数は2億3700万人を超えており、そこでは自社のビジネスにとって数多くの潜在顧客を見つけることができます。

しかし、すでに多くのマーケターが毎日X(Twitter)を利用しているため、自分自身のフォロワーを増やすのは難しいかもしれません。

その解決策とは? X(Twitter)のソーシャルメディアコンテンツをウェブサイトに組み込むことで、サイトへのトラフィックをエンゲージメントやフォロワーへと転換することができます。

ソーシャルメディアでの存在感を高めることに加え、Xの投稿を埋め込むことがブランドにどのようなメリットをもたらすか、さらにいくつかの例をご紹介します:

ご覧の通り、X(Twitter)のフォロワー数を簡単に増やし、より多くの顧客にリーチし、売上を伸ばし、ブランドを成長させ、X(Twitter)で収益を上げることができます。

それでは、X(Twitter)をウェブサイトに連携させる方法を見ていきましょう。

WordPressサイトにXの投稿を埋め込む2つの方法

WordPressサイトにXの投稿を埋め込みたい場合、その方法は2つあります:

  • 手順: X(Twitter)の投稿用の埋め込みコードを生成し 、そのコードを調整してから、手動でウェブサイトに挿入します。
  • 自動:X(Twitter)のコンテンツを自動的に埋め込むことができるWordPressプラグインを使用する

最初の方法を選ぶと、複雑なHTMLコードをたくさん扱うことになります。さらに、手動でX(Twitter)のフィードを埋め込むには、かなり時間がかかってしまう可能性があります。

また、サイトにコードを挿入している間に何か問題が発生しても、サポートチームが助けてくれることはない。

結局のところ、手作業は多くのユーザーにとって困難である。

ウェブサイトにXの投稿を埋め込む最も簡単な方法は何ですか?

一方、自動設定を選択すれば、X(Twitter)フィードプラグインを使うだけで、すべてのXの投稿を手間なく埋め込むことができます。コーディングは一切必要ありません。

そして、X(Twitter)フィード用プラグインの中で最も優れたものは、「Smash Balloon X(Twitter)Feed Pro」です。

スマッシュバルーン ツイッターフィード プロ ホームページ

このプラグインには、X(Twitter)のコンテンツフィードを作成・カスタマイズし、ウェブサイトに埋め込むまでの全プロセスを案内する、シンプルな3ステップのガイド機能が搭載されています。

さらに、埋め込みたいX(Twitter)のコンテンツの種類に関しては、非常に多くの選択肢があります。

特定のプロフィールからのXの投稿を表示したり、X(Twitter)の検索結果をX件表示したり、選択したX(Twitter)のハッシュタグを表示したり、X(Twitter)でのメンションを埋め込んだり、リポストを表示したりなど、さまざまな機能が利用できます。

テキスト投稿や写真に加え、このプラグインを使えば、X(Twitter)の動画をウェブサイトに埋め込むことができ、訪問者の関心をより長く引きつけることができます。

X (Twitter) Feed Pro を使えば、ウェブサイト上で X の投稿がどのように表示されるかを完全に制御することもできます。

素敵なテンプレートをインポートし、ライブフィードカスタマイザーを使って、わずか数回のクリックでX(Twitter)フィードのデザインを変更することができます。

ツイッター用ライブフィードエディタ

ご覧の通り、X(Twitter)の投稿をウェブサイトに簡単に追加したいなら、「X (Twitter) Feed Pro」が最良の選択肢です。また、このX(Twitter)プラグインを使えば、DiviのウェブサイトにXの投稿を埋め込める点も気に入っています。

これらの素晴らしい機能により、このプラグインは15万人以上の アクティブユーザーから4.9/5つ星の評価を得ている!

ユーザーレビュー カスタムツイッターフィードプロ

それでは、このプラグインを使って、わずか数回のクリックでX(Twitter)のコンテンツをウェブサイトに埋め込む方法を見ていきましょう。

技術に詳しくなくても、Xの投稿をウェブサイトに追加する準備はできていますか?

今すぐ「X (Twitter) Feed Pro」を使い始めましょう!

ウェブサイトにXの投稿を埋め込む方法(簡単な方法)

ウェブサイトにXの投稿を簡単に埋め込むには、以下の手順に従ってください。

ステップ 1: Smash Balloon X (Twitter) Feed Pro のインストールと有効化

まず、こちらから「X (Twitter) Feed Pro」プラグインを入手してください。次に、ご自身のウェブサイトにプラグインをインストールして有効化するだけです。

もし方法がわからない場合は、WordPressプラグインのインストール方法に関するステップバイステップのガイドをご覧ください。

これで、ステップ2に進み、プラグインを使ってX(Twitter)のフィードを作成し始めることができます。

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

X(Twitter)のフィードを利用すれば、ウェブサイト上でXの投稿を簡単に表示できるようになります。

フィードを作成するには、管理ダッシュボードから「X(Twitter)フィード」→「すべてのフィード」メニュー に移動し、「新規追加」をクリックしてください。

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

その後、「X (Twitter) Feed Pro」を使って、ウェブサイトに表示したいX (Twitter)フィードの種類を選択できます。選択できるオプションは6つあります:

  • ユーザーのタイムライン: X(Twitter)のアカウントを1つ選び 、そのユーザーが投稿したXの投稿を表示する
  • ハッシュタグ:選択したX(Twitter)のハッシュタグが付いたすべてのXの投稿を表示する
  • ホームのタイムライン: 自分のX(Twitter)タイムラインの投稿X件を表示する
  • 検索:検索キーワードを選択し、そのキーワードを含むX件の投稿を埋め込む
  • メンション:あなたのX(Twitter)アカウントをメンションしているXの投稿を埋め込む
  • リスト: 特定のX(Twitter)リストをサイトに埋め込む

X(Twitter)のフィードを1種類以上使いたいですか? ここでは、複数のオプションを選択して、フィードの種類を組み合わせることができます。

X(Twitter)のフィードタイプを選択したら、「次へ 」をクリックして次に進みます 。

ハッシュタグツイッターフィード

ウェブサイト上でX(Twitter)のフィードの例を表示する際は、ハッシュタグフィードタイプ を使用します。

X(Twitter)のフィードを作成したところで、次はステップ3でこのフィードをX(Twitter)に連携させましょう。

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

X(Twitter)アカウントを連携させることで、新しいフィードがX(Twitter)のコンテンツを取得し、サイト上に表示できるようになります。

まず、ポップアップの接続 ボタンをクリックする。

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

そうすると、X(Twitter)のウェブサイトが開き、そこでプラグインがアカウントへの読み取り専用アクセス権 を要求してきます。

「X (Twitter) Feed Pro」は、このアクセス権限を使用してX (Twitter)上のコンテンツを表示しますが、アカウントに変更を加えることはありません。したがって、このプラグインは安全にご利用いただけます。

続行するには、こちらのAuthorize app ボタンをクリックしてください。

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

その後、「X (Twitter) Feed Pro」はあなたのウェブサイトに戻りますので、X (Twitter) フィードのソースの追加を完了してください。

この情報源は、フィードの種類に応じて、X(Twitter)のプロフィール、ハッシュタグ、検索キーワード、X(Twitter)のリストなどになります。

ポップアップにソースを入力し、「Next」をクリックするだけです。

ツイッターフィードのハッシュタグを選択する

ハッシュタグX(Twitter)のフィードを作成するため、ここではハッシュタグ「KEEB_PD」をソースとして使用します。

それでは、次のステップに進み、ウェブサイト上でXの投稿がどのように表示されるかをカスタマイズしましょう。

ステップ4:Xの投稿をカスタマイズする

X(Twitter)のフィードを手軽にカスタマイズするには、ワンクリックでインポートできるフィードテンプレートを選択してください。

ユニークなデザインの7つのフィードテンプレートから選ぶことができます:

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

お好みのX(Twitter)フィードテンプレートを選択し、「次へ」をクリックしてください。

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

これで、ライブフィードカスタマイザーを使って、わずか数回のクリックでX(Twitter)のフィードのデザインを変更できるようになりました。

左側のオプションを使って、フィードレイアウト、ヘッダーデザイン、ライトボックスオプション、カラースキームなどを選択できます。

また、右側にはX(Twitter)のフィードがリアルタイムでプレビュー表示され、変更内容を確認しやすくなっています。

ライブフィードエディタ twitterフィードプロ ビジュアルプレビュー

Xの投稿をカスタマイズする準備はできましたか?

左側のフィードレイアウトオプションを 探し、それをクリックしてカスタマイズを開始する。

フィードレイアウトオプションを選択し、Twitterフィードを作成する

ここでは、さまざまなフィードレイアウトから選択して、WordPress サイト上で X の投稿がどのように表示されるかを設定できます。

ここには、リスト、カルーセル、メイソンの3つのレイアウトがある。

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

リストレイアウト を使用すると、Xの投稿は、X(Twitter)の公式ウェブサイトと同様に、1列で表示されます。

おまけとして、この方法ならあなたのXへの投稿がより目立つようになります。

リストレイアウト・ツイッターフィード・プロ

次に、「メゾニー」レイアウト を選択できます。このレイアウトでは、異なる列を使用したX個の投稿が表示されます。

その結果、サイトに大量のXの投稿を一度に埋め込むことができます。

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

最後に、カルーセルレイアウト があります。これを使えば、Xの投稿をX(Twitter)のカルーセルやスライダーとして表示できます。

そうすれば、ウェブサイトをより魅力的でインタラクティブなものにすることができる。

カルーセルレイアウト

フィードレイアウトオプションを選択したら、上部の保存 ボタンをクリックします。

そうしたら、カスタマイズ・ ボタンをクリックして、メインのカスタマイズ・オプションに戻ってください。

メインメニューに戻る ライブフィードエディター

ここから、X(Twitter)のフィードのデザインを変更し続けることができます。

Xの投稿の色を変更するには、左側の「カラースキーム」オプション をクリックしてください。

配色を選ぶ twitterフィード

ここでは、Xの投稿で選択できる4つの配色を確認できます:

  • テーマからの継承: WordPressテーマと同じ色を使用する
  • 明るい:明るい背景と暗い文字色を表示
  • 暗い:暗い背景とともに明るい文字色を選択する。
  • カスタム: すべての色を手動で選ぶ
ツイッターフィードの配色オプション

このリストから好みの配色を選び、「保存」をクリックします。

これで、残りのカスタマイズオプションを使って、X投稿のデザインを選択できるようになりました。ヘッダーのスタイルやボタンのデザインを設定したり、X投稿の表示数やフィードのサイズを制限したりなど、さまざまな設定が可能です。

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

その後、いよいよ最後のステップに進み、これらのXの投稿をウェブサイトに追加しましょう。

ステップ5:Xの投稿をウェブサイトに埋め込む

「X (Twitter) Feed Pro」を使用すると、Xの投稿をウェブサイトに埋め込む方法は2つあります:

  • WebページにXの投稿を埋め込む
  • ウェブサイトのサイドバーやフッターにXの投稿を埋め込む

WebページにXの投稿を埋め込む

ライブフィードエディタを使えば、わずか数回のクリックでXの投稿を埋め込むことができます。コードを1行も書く必要はありません。

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

ライブフィードエディタ埋め込みボタン

次に、X(Twitter)のフィードを埋め込むためのすべてのオプションが記載されたポップアップが表示されます。

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

ページに追加する

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

X件の投稿を表示したいページを選択し、「追加」をクリックしてください。

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

そうすると、WordPressのエディターでページが開きます。

そこからプラスアイコン(+)をクリックして、新しいコンテンツブロックを追加することができます。

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

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

最後に、下の「X(Twitter)」フィードブロックをクリックして、Xの投稿を埋め込んでください。

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

変更内容を確認するには、上部にある「更新」ボタンをクリックすれば完了です!

さあ、さっそくウェブサイトを開いてみてください。Xの投稿がどのように表示されるか確認できます。

ウェブサイト上のtwitterフィードの例

それでは、ウェブサイトにXの投稿を埋め込む次の方法を見ていきましょう。

ページにXの投稿を追加するだけでなく、サイドバーやフッターにX(Twitter)ウィジェットとしてXの投稿を表示することもできます。

これまでと同様に、ライブフィードエディタを使ってXの投稿を埋め込むことができます。

X(Twitter)フィードをライブフィードエディタで再度開くには、WordPressダッシュボードから「X(Twitter)フィード」→「すべてのフィード」メニュー に移動してください。

次に、埋め込みたいX(Twitter)のフィードをクリックします。

オープン・ハッシュタグ

ライブフィードエディタで、Xの投稿が再び表示されるようになりました。

続けるには、上部にある埋め込み ボタンをクリックする。

ライブフィードエディタ埋め込みボタン

ポップアップ画面で、Xの投稿を埋め込みたい場所を選択できます。

今回は、「ウィジェットに追加 」ボタンをクリックして続行する。

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

そうすると、WordPressサイトのウィジェットページが開き、新しいX(Twitter)ウィジェットを埋め込むことができます。

Xの投稿をサイドバーに追加するには、「サイドバー」パネル をクリックしてください。

サイドバーパネルを開く

フッターにX件の投稿を表示したい場合は、フッターパネル をクリックしてください。

このX(Twitter)フィードの例では、WordPressのサイドバーを使用することにします。

フッターパネルを開く

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

次に、「X(Twitter)フィード」をクリックして、新しいX(Twitter)フィードを埋め込みます。

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

最後に、「更新」ボタンをクリックして、新しいX(Twitter)フィードウィジェットを設定し、これで完了です。

ウェブサイトにアクセスすると、ウィジェットエリアにXの投稿が表示されるようになりました。

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

そうだ!

これで、ウェブサイトにXの投稿を簡単に埋め込む方法がわかりましたね。これを使えば、X(Twitter)のフォロワー数を簡単に増やし、訪問者の関心を高め、売上を伸ばすことができます。

一番の魅力は?「X (Twitter) Feed Pro」プラグインを使えば、たった数回の簡単なクリックでこれらすべてを実行できます。コードを1行も書く必要はありません。

Xの投稿を埋め込み始めたいですか?こちらから「X (Twitter) Feed Pro」を入手してください。

この機会に、X(Twitter)のエンゲージメントを高めるための最良の方法を紹介した記事もぜひご覧ください。

この記事がお役に立ちましたら、X(Twitter)とFacebookでフォローし、ソーシャルメディアマーケティングのコツやテクニックを今後もご期待ください。

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

コメントを追加する

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