プラグインを使わずに、WordPressにX(Twitter)フィードを簡単に追加する方法をお探しですか?
X(Twitter)のコンテンツをサイトに埋め込むことは、説得力のあるソーシャルプルーフを示し、読者の関心を維持するための優れた方法です。
私はここ数年、ソーシャルフィードの埋め込みに携わるデジタルマーケターとして働いてきましたが、X(Twitter)のフィードを手動で追加するのは、特に技術に詳しくない人にとっては難しい作業であることを知っています。
さらに、X(Twitter)のフィードを埋め込む方法に関するWordPressのチュートリアルの多くは、初心者にとっては技術的すぎて、なかなか始められない場合があります。
この記事では、プラグインを使わずにWordPressにX(Twitter)のフィードを追加する方法をご紹介します。さらに、時間や手間、コーディングの量をさらに抑えられる「おまけ」の方法もご紹介します。
この記事の中で
X(Twitter)のフィードは、プラグインを使って追加すべきか、それとも使わずに追加すべきか?
WordPressのプラグインは少ない方が良いという話を聞いたことがあるかもしれない。
お粗末にコーディングされたプラグインはサイトの速度を低下させますが、専門的なプラグインは、あなたのウェブサイトを高速に保ちながら、実際に時間を節約することができます。
実は、WordPressサイトのプラグインの数は、サイトのスピードやパフォーマンスにほとんど直接影響しません。最も重要なのはプラグインの質なのです。
優れたWordPressプラグインは、速度面でのテストと最適化が行われています。つまり、Smash Balloon社の「X (Twitter) Feed Pro」プラグインを使用してサイトにX(Twitter)フィードを追加しても、サイトのパフォーマンスに悪影響を与えることはありません。

プラグインを使わない場合、次のような課題に直面することになります:
- タイムラインの埋め込み機能は信頼性が低い。X(Twitter)では依然としてこの機能を提供しているが、表示されないことが多く、まったく機能しないと感じる人も大勢いる。
- 埋め込みは1投稿につき1つです。個別の投稿を埋め込む方法が確実な選択肢であり、特定の投稿を表示することができます。投稿を追加するごとに、コードのブロックが1つ増えます。
- 自動的に更新されることはありません。新しいコンテンツを投稿しても、手動でサイトに埋め込まない限り、サイトには表示されません。
- カスタマイズはほとんどできません。X(Twitter)が提供する機能そのままを利用することになり、それ以上の変更を行うには開発者の手が必要になります。
- コードは失くしやすいものです。 WordPressのテーマを切り替えると、ウィジェットエリアに埋め込まれたコンテンツが、以前のテーマとともに消えてしまうことがあります。
WordPressサイトにX(Twitter)のフィードを追加する最も簡単な方法
もっと簡単な方法をお探しですか?「Smash Balloon X (Twitter) Feed Pro」を使えば、フィードが自動的に生成・更新されるため、手動で投稿を埋め込む必要がありません。

「X (Twitter) Feed Pro」プラグインを使えば、X (Twitter) のコンテンツをサイトに簡単に埋め込むことができ、以下の機能を活用してフィードを自由にカスタマイズできます:
- X(Twitter)フィードの数に制限なし:このカスタムX(Twitter)フィードプラグインを使えば、同じページ内やウェブサイト全体で、制限なく好きなだけフィードを表示できます。
- 使いやすさ:このプラグインはとても使いやすいので、WordPressの初心者でも、わずか数分でX(Twitter)のフィードを作成できます。
- 豊富なフィードの種類: ユーザーのタイムライン、ハッシュタグフィード、リスト、さらには高度な検索条件から、最新のX件の投稿やリポストを、見事なX(Twitter)フィードとして表示します。

- 複数のフィードレイアウト:複数カラムのメーソンリーレイアウト、スクロールカルーセル、またはシングルカラムのリストでフィードを表示します。
- SEO対策済み:関連キーワードを含むカスタムX(Twitter)フィードを表示することで、検索エンジンの検索結果で上位に表示され、より多くのユーザーにリーチできます
- コード不要のカスタマイズ:このX(Twitter)プラグインのビジュアルカスタマイザーを使えば、コードを1行も書くことなく、フィードの色、フォント、ボタン、Xの投稿スタイル、パディングなどを自由に設定できます。
他にもたくさんの機能があります。X(Twitter)フィードの全機能一覧はこちらをご覧ください。
実際、世界有数の大企業も、スマッシュ・バルーンのソーシャルメディア・フィード・プラグインを使って、ソーシャルメディア・コンテンツをウェブサイト上で紹介しています:

WordPressにX(Twitter)のフィードを埋め込む準備はできましたか? コーディングは一切不要です。「X(Twitter)Feed Pro」で今すぐ始めましょう。
それでは、WordPressサイトにX(Twitter)のフィードを追加する最も簡単な方法を見ていきましょう。
X(Twitter)を埋め込む最良の方法:X(Twitter)のWordPressプラグインを使用する
もっと簡単な方法をお望みなら、プラグインを使った手順を順を追ってご紹介します。ほんの数分で、ウェブサイトに自動更新されるフィードが設置できます。
ステップ 1: 「Smash Balloon X (Twitter) Feed Pro」をダウンロードして有効化する
まずは、こちらをクリックして、Smash Balloonの「X (Twitter) Feed Pro」を使い始め、プラグインをお使いのコンピュータにダウンロードしてください。
その後、WordPressウェブサイトにプラグインをアップロードする必要があります。プラグインのアップロードについては、WordPressプラグインのインストールガイドをご覧ください。
ステップ2:X(ツイッター)フィードの作成
このプラグインを使えば、ガイドに従うだけで、ご自身のウェブサイト用に新しいX(Twitter)フィードを作成できます。
まず、WordPressのダッシュボードから「X(Twitter)フィード」»「すべてのフィード」メニュー に移動してください。
新しいページで、新規追加 ボタンをクリックする。

その設定が完了したら、ウェブサイトに表示したいX(Twitter)フィードの種類を選択できます:
- ユーザーのタイムライン:特定のX(Twitter)アカウントによる最近のXの投稿
- ハッシュタグ: X(Twitter)の公開ハッシュタグのフィード
- 検索:X(Twitter)の高度な検索機能に基づいたフィード
- リスト: 公開されているX(Twitter)リストのコンテンツを表示する
作成したいフィードタイプをクリックし、「次へ」ボタンをクリックします。
このチュートリアルでは、ユーザーのタイムラインフィードを作成します。

これで、あなたのウェブサイトにX(Twitter)のフィードが表示されるようになりました。
ステップ3:X(Twitter)アカウントを連携する
次のステップとして、X(Twitter)アカウントをこのプラグインに連携させることができます。
そうすることで、「X (Twitter) Feed Pro」は、あなたのウェブサイト上にX(Twitter)のコンテンツを表示できるようになります。
開始するには、接続 ボタンをクリックします。

これで、プラグインがX(Twitter)を開き、X(Twitter)アカウントへの読み取り専用アクセス権 を要求します。
このアクセス権限を使用することで、「X (Twitter) Feed Pro」はX (Twitter)上の情報を閲覧するのみであり、ユーザーのアカウントに変更を加えることは一切できません。
読み取り専用アクセスを許可するには、ポップアップの「Authorize app」 ボタンをクリックします。

そうすると、自分のウェブサイトに戻り、ウェブサイトにどのX(Twitter)のコンテンツを表示するかを選択できるようになります。
ポップアップ画面で、埋め込みたいX(Twitter)のユーザー名、ハッシュタグ、または検索キーワードを入力してください。
この例では、ここに「@starbucks」というX(Twitter)のハンドル名を入力します。
そうしたら、「次へ 」をクリックして進みます。

ステップ4:カスタマイズの選択
今すぐX(Twitter)フィードを公開すれば、そのままでも見栄えが抜群です。これは、「X(Twitter)Feed Pro」が現在のウェブサイトのデザインに合わせて自動的に調整されるためです。
さらに、ワンクリックでインポートできる、あらかじめデザインされたX(Twitter)フィードのテンプレートも用意されています。
美しいX(Twitter)のフィードを手軽に作成できるよう、7種類のテンプレートからお選びいただけます:
- デフォルト
- 石工
- シンプルなカルーセル
- シンプルなカード
- ショーケース・カルーセル
- 最新のXの投稿
- ウィジェット
お好みのフィード・テンプレートを選択し、「次へ」 ボタンをクリックします。

その設定が完了したら、ライブフィードエディタを使って、X(Twitter)のフィードをさらに細かく設定することができます。
HTMLやCSSなどのコードは一切不要で、フィードのカラースキーム、レイアウト、ヘッダースタイル、ロードモアボタンなどを変更するオプションがすぐに表示されます。
右側には、新しいX(Twitter)のフィードのライブプレビューが表示されています。

フィードのカスタマイズを始める準備はできましたか?
まず、左のパネルにあるフィードレイアウトオプションを クリックします。

ここから、フィードのレイアウトを選択し、ウェブサイト上でXの投稿をどのように表示するか決めることができます。
「X (Twitter) Feed Pro」では、「リスト」、「メイソンリー」、「カルーセル」の3つの表示形式から選択できます。

リストレイアウト を使用すると、Xの投稿リストを1列に並べて表示できます。そうすることで、ウェブサイト上でXの投稿をより大きく表示できるようになります。

2つ目のオプションは、X(Twitter)のコンテンツを複数列に配置できる「メーソンリーレイアウト 」です。さらに、一度に大量のXの投稿を表示することもできます。

また、カルーセルレイアウトを選択して、X(Twitter)のコンテンツをスライド式のカルーセルとして表示することもできます。これにより、サイトの魅力を高めることができます。

使用したいレイアウトを選択し、「保存」をクリックするだけです。
投稿数、行数、列数などもここから変更できます。変更を保存する前に、自由に変更してください。
その後、上部にあるカスタマイズ ボタンをクリックして、もう一度メインのカスタマイズオプションに戻ります。

次に、ライブフィードカスタマイザーを使って、X(Twitter)のフィードの色を設定できます。
左の配色オプションをクリックして、始めることができます。

これで、X(Twitter)のフィードの色をすばやく変更できる4つのカラースキームが利用可能になりました:
- テーマからの継承: ウェブサイトのテーマの色をコピーする
- 明るい: 背景には明るい色を使い、フォントには暗い色を使う。
- 暗い: 暗い背景と明るいフォントでフィードを表示します。
- カスタム: 手動ですべての色を自分で選択

こちらのオプションを確認し、お好みの配色を選択してください。個人的には、「テーマから継承」という配色 が好きで、そうすればX(Twitter)のフィードがサイトとすぐに統一されます。以前と同様に、「保存」ボタンを クリックして変更を確定してください。
その後、ライブフィードエディタを使用して、ヘッダー、ライトボックス、ボタン、Xの投稿ボックス、フィードのサイズなどを自由にカスタマイズできます。X(Twitter)のフィードに満足したら、もう一度「保存」をクリックしてこのデザインを確定してください。
ステップ5:X(Twitter)のフィードを公開する
このプラグインを使って、WordPressにX(Twitter)のフィードを追加するには、以下の2つの方法があります。具体的には:
- X(Twitter)フィードのWordPressブロック:これを使用すると、WordPressのブロックエディタを使って、ページにフィードを追加することができます。
- X(Twitter)フィードウィジェット:この組み込みウィジェットを使用すると、WordPressのサイドバーやフッター領域にフィードを追加できます。
これら2つの方法のいずれかを使ってX(Twitter)のフィードを埋め込むには、ライブフィードエディタを利用できます。
上部の埋め込み ボタンをクリックしてください。

ここで、「X (Twitter) Feed Pro」からポップアップが表示され、X (Twitter) フィードの埋め込み方法を選択できるようになります。ここからショートコードをコピーすることも可能です。
WordPressのページに埋め込むには、こちらの「ページに 追加」ボタンをクリックしてください。

次に、サイト上のWordPressページのリストが表示されます。
フィードを埋め込むページを選択し、下の追加 ボタンをクリックしてください。

そうすると、ブロックエディターでワードプレスのページが開きます。
新しいWordPressブロックを追加するには、 プラス(+)アイコンをクリックします。

上部の検索バーで「twitter feed」 ブロックを探す。
検索結果から、「X(Twitter)フィード」WordPressブロックをクリックして、ページに追加してください。

最後に、「公開」または「更新」ボタンを クリックすると、X(Twitter)のフィードがオンラインになります。
これで、WordPressのページを開くと、公開済みのX(Twitter)フィードが次のように表示されます:

WordPressのサイドバーにX(Twitter)フィードを追加するには、ライブフィードエディタでX(Twitter)フィードを開きます。
WordPressのダッシュボードから「X(Twitter)フィード」»「すべてのフィード」メニュー に移動すると、利用可能なすべてのX(Twitter)フィードを表示できます。
次に、先ほど作成したフィードをクリックする。

こうすることで、X(Twitter)のフィードをどれでも、ライブフィードエディタで再度開くことができます。
ここから、上部にある埋め込み ボタンをクリックして開始します。

前回と同様、X(Twitter)のフィードの表示場所を選択できるポップアップが表示されます。
X(Twitter)のフィードをウィジェットとして埋め込むには、こちらの「ウィジェットに追加」オプション をクリックしてください。

ウィジェットページが開き、WordPressウィジェットの追加、削除、編集ができます。
サイドバーにX(Twitter)のフィードウィジェットを表示したいですか?サイドバーパネル をクリックするだけです。

代わりにフッターパネル をクリックして、そこにX(Twitter)のフィードを埋め込むこともできます。

新しいウィジェットを追加するには、下部にあるプラス(+)アイコンをクリックします。
そこで、「X(Twitter)」フィードウィジェットを見つけて、それをクリックしてください。

設定を保持するには、忘れずに「更新」をクリックしてください。
最後に、ウェブサイトを開いて、新しいX(Twitter)フィードウィジェットがどのように表示されるか確認できます。

これで、あなたのサイト上にリアルタイムでフィードが表示され、投稿するたびに自動的に更新されます。
投稿を1つずつではなく、フィードで閲覧したいですか?
アカウントを一度連携するだけで、最新の投稿がテーマに合わせたフィードに自動的に表示されます。
「Smash Balloon X (Twitter) Feed Pro」を入手する手動での方法を試す前に
まず知っておくべきことが一つあります。それは、どの選択肢を選ぶべきかに影響するからです。
X(Twitter)の埋め込みツールには3つの選択肢がありますが、その信頼性は均一ではありません:
| オプション | その信頼性はどの程度ですか? | 内容 |
|---|---|---|
| Embedded Xの投稿 | ✅ 通常は問題ない | 1つの投稿を個別に埋め込む |
| X(Twitter)ボタン | ✅ 通常は問題ない | 「フォロー」ボタン |
| 埋め込みタイムライン | ⚠️ 一貫性がない | フィードは、レンダリングされる際に |
「Embedded Timeline」は実際のフィードを表示する機能ですが、これが問題の原因となっています。多くの場合、コードは正常に生成されるものの、ページ上には何も表示されず、フィードが表示されるはずの場所に青いリンクだけが現れることがあります。
その青いテキストは、埋め込みコードに組み込まれているフォールバックです。したがって、それが表示されているということは、タイムラインが読み込まれなかったことを意味します。

これは、X(Twitter)のコンテンツを埋め込む際によく寄せられる不満の一つです。開発者たちは2023年からX(Twitter)の公式フォーラムでこの問題を指摘しており、今年もなお報告が寄せられています。
あなたにとっては問題なく機能するかもしれません。X(Twitter)はこの機能を削除しておらず、いずれ修正される可能性もあります。しかし、今日は正常に表示されていても、来月にはいつの間にか内容が消えてしまうような埋め込みコンテンツを、ページの基盤として使うのは得策ではありません。ですから、作業を始める前にこの点を把握しておく価値があります。
もし自分の埋め込みコンテンツが表示されなくなってしまった場合、X(Twitter)の埋め込みが機能しなくなる原因と、その解決方法をご紹介します。
以下の手順は、どちらのオプションでも有効です。より確実な方法なので、まずは1つの投稿から始めることをお勧めします。
プラグインを使わずにWordPressにX(Twitter)フィードを追加する
ご覧の通り、WordPressのプラグインを使ってX(Twitter)のフィードを設定するのは賢い方法です。しかし、WordPressのX(Twitter)プラグインを使わずにフィードを追加したい場合は、以下の簡単な手順に従ってください。
ステップ1: Twitter Publishのウェブサイトにアクセスする

最初のステップは、Twitter Publishの公式サイトにアクセスすることです。
ここから、ウェブサイトに埋め込むことができるX(Twitter)の埋め込みコードを生成できます。
ステップ 2: 埋め込みオプションの選択
次に、ページを下にスクロールすると、さまざまな埋め込みオプションが表示されます:
- 埋め込みX投稿:1つのX投稿、またはX(Twitter)のスレッド
- 埋め込みタイムライン:X(Twitter)プロフィールからのユーザーの全タイムライン
- X(Twitter)ボタン:X(Twitter)のフォローボタン

ご希望のオプションをクリックしてください。フィード版をご希望の場合は、「埋め込みタイムライン」を試すこともできますが、前述の信頼性の問題にはご注意ください。
ステップ3:X(Twitter)のURLを入力してください
ご希望の埋め込みオプションをクリックすると、ライトボックスのポップアップが表示され、URLを貼り付けるよう求められます。
この欄に、ウェブサイトに表示したいX(Twitter)フィードのURLを入力し、「プレビュー」ボタンをクリック してください。

ステップ 4:X(Twitter)の埋め込みコードをコピーする
プレビューに何も表示されない場合は、それが問題の現れです。
別の投稿を試してみるか、タイムラインを作成しようとしていた場合は、単一の投稿の埋め込みに切り替えてみてください。どの方法がうまくいくかは、あらかじめ判断できません。
プレビューが正常に表示される場合は、「コードをコピー」ボタンをクリックしてください。

ステップ 5:WordPress に X(Twitter)の埋め込みコードを追加する
最後のステップは、X(Twitter)の埋め込みコードをWordPressサイトに貼り付けることです。これは、新しい投稿、ページ、またはウィジェットにコードを追加することで行えます。
X(Twitter)のフィードを新しいページに追加するには、WordPressのダッシュボードから「ページ」→「新規追加」に進んでください。

代わりにWordPressの投稿を使用するには、ダッシュボードから「投稿」»「新規作成」メニュー に進んでください。

WordPressのブロックエディターで新しいページまたは投稿を開きます。
ここから、X(Twitter)のフィードの埋め込みを開始できます。まず、プラス(+)アイコンをクリックして、新しいWordPressブロックを追加してください。

検索結果のカスタムHTMLブロックをクリックする前に、検索ボックスで「カスタムHTML」を 検索してください。

新しいブロック内に、先ほどコピーしたX(Twitter)の埋め込みコードを貼り付けてください 。

最後に、「公開」ボタンを クリックして、このページを保存してください。
さあ、このページを開いて、X(Twitter)のウィジェットが正常に動作しているかどうかを確認してみてください。

また、X(Twitter)ウィジェットを使用することで、WordPressのサイドバーやフッターにX(Twitter)のフィードを手動で埋め込むこともできます。
これを行うには、ダッシュボードから外観 " ウィジェットメニューに移動します。

このページから、WordPressウィジェットを簡単に管理することができます。
それでは、サイドバーパネル をクリックして、そこにX(Twitter)のウィジェットを埋め込んでください。

フッター領域にX(Twitter)のコンテンツを表示したい場合は、代わりに「フッター」パネル をクリックすることもできます。

最後に、プラス(+)アイコ ンをクリックして新しいウィジェットを追加し、オプションからカスタムHTML ウィジェットをクリックします。

以前と同様に、先ほどコピーしておいたX(Twitter)の埋め込みコードを貼り付けると、WordPressがX(Twitter)のフィードをウィジェットとして埋め込んでくれます。

更新] をクリックして、設定を保存することを忘れないでください。公開されたウィジェットをプレビューすると、次のようになります:

ご覧の通り、この方法はかなり制限が多く、カスタマイズオプションもあまりありません。さらに、サイト上で異なるXの投稿を表示したい場合は、多数の埋め込みコードを管理する必要があります。
そうだ!
プラグインを使わずに、WordPressにX(Twitter)のフィードを追加する方法を学びました。これで、X(Twitter)の関連コンテンツを活用して、ウェブサイトの訪問者の関心を引くことができるようになります。
しかし、WordPressサイトにXの投稿を簡単に埋め込みたい場合は、プラグインを使えばはるかに簡単になります。そうすれば、コーディングは一切必要なく、ほんの数回のクリックで済みます。
WordPressサイトにX(Twitter)のフィードを簡単に埋め込みたいとお考えですか?今すぐ「X (Twitter) Feed Pro」を使い始めましょう。
予算が限られている方へ。「Smash Balloon Custom X(Twitter)Feeds」なら、「X(Twitter)Feed Pro」の無料版として、一切費用をかけずに利用できます。
「X(Twitter)Feeds Lite」を無料で試してみませんか?
WordPressサイトのURLを入力して、Custom X(Twitter)フィードを無料でインストールしましょう
なお、この無料プラグインでは、公開されているX(Twitter)アカウント1つからのフィードしか作成できませんのでご注意ください。複数のユーザーのX投稿を埋め込みたい場合は、今すぐ「X(Twitter)Feed Pro」をご利用ください。
X(Twitter)のフォロワーをあっという間に簡単に増やしたいですか?X(Twitter)のフォロワーを増やすための簡単なガイドをご覧ください。
X(Twitter)アカウントのフォロワーを増やすためのソーシャルメディアのヒントをお探しなら、今すぐX(Twitter)のエンゲージメントを高める方法をご紹介します。
