HTMLにTwitter feedを埋め込みたいなら、公式の方法はシンプルです。コードをコピーし、HTMLページに貼り付ければ完了です。しかし、それで話の半分しか終わっていません。
ほとんどのウェブサイトに必要なのは、レスポンシブでリアルタイムに更新され、ブランドに合わせて調整でき、読み込みが速く、コントロールできるTwitterウィジェットです。つまり、スニペットを単にコピーするだけでは不十分なのです。
この記事では、Twitter feedを埋め込む正確なHTMLの手順を紹介し、現実の制約を説明したうえで、EmbedSocialを使ったよりスケーラブルな方法を順を追って解説します。
まずはネイティブな方法から始めましょう。
HTMLにTwitter feedを埋め込む公式の方法
Twitter（X）は、投稿、プロフィール、ハッシュタグ、タイムラインの埋め込みコードを生成するTwitter PublishというWebツールを提供しています。手順は次のとおりです。
- publish.twitter.comにアクセスする
- Twitterプロフィールのアドレスを貼り付ける
- 「Embedded Timeline」を選ぶ
- 生成されたHTMLスニペットをコピーする
1. Twitter Publishのサイトにアクセスする
ブラウザでhttps://publish.twitter.comを開きます。これは埋め込みコードを生成するTwitterの公式ツールで、APIキーや開発者向けの設定は不要です。
2. Twitterプロフィールのアドレスを貼り付ける
公開されているTwitterのアドレス（例：https://twitter.com/yourusername）をコピーし、入力欄に貼り付けます。アカウントが公開されていることを確認してください。非公開のままだとfeedは生成されません。
3. 「Embedded Timeline」を選ぶ
「Embedded Timeline」を選択すると、自動で更新されるライブのTwitterタイムラインfeedが作成できます。このオプションを選べば、新しい投稿が自動的にウェブサイトに表示されます。
4. 生成されたHTMLスニペットをコピーする
「Copy Code」をクリックし、提供されたHTMLコードをページの<body>内のfeedを表示したい場所に貼り付けます。同梱のスクリプトがタイムラインを自動的に描画します。
コードは次のようなものになります。
<a class="twitter-timeline" href="https://twitter.com/yourusername">
Tweets by yourusername
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>注意： 上記の方法で埋め込めるのは公開されているTwitterのコンテンツのみです。そのため、非公開アカウントの投稿はこの方法には対応していません。
単一のtweet埋め込みとTwitterタイムライン全体の埋め込みの違い
1件のtweetを埋め込むことと、ライブfeedを埋め込むことには大きな違いがあります。
単一のtweetを埋め込む場合は、静的な参照を追加することになります。これはコンテキストが重要となるブログ記事、事例紹介、製品の発表などに適しています。
一方、Twitterタイムライン全体を埋め込む場合は、投稿に合わせて自動的に更新される、サイトの動的なセクションを作ることになります。
ほとんどのビジネスにとっては、タイムライン全体のほうが強力です。なぜなら、手動で更新しなくてもページを常に新鮮に保てるからです。ただし、その分、デザインやパフォーマンスについて考慮すべき点も増えます。
生のHTMLを使ってウェブサイトにTwitter feedを埋め込む方法
埋め込みコードのコア部分はプラットフォームが変わっても変わりません。変わるのは、CMSがスクリプトをどう扱うかです。静的なHTMLサイトでは、コードをページファイルに貼り付けるだけです。
- WordPressでは、カスタムHTMLブロックを使います。
- Webflowでは、Embed要素を追加します。
- Shopifyでは、カスタムセクションまたはテーマファイル内に配置します。
開発者向けフォーラムで繰り返し見かける、つまずきやすいポイントがスクリプトの除去です。一部のサイトビルダーは、セキュリティ上の理由から<script>タグを自動的に削除してしまいます。
それが起こると、タイムラインは描画されません。ただのリンクが表示されるだけです。そのため、Twitterの埋め込みが読み込まれない場合は、まずここを確認してください。
HTMLにTwitter feedを埋め込むときによくある5つの問題
ほとんどのチュートリアルは、スニペットを示したところで終わってしまいます。しかし、実際の運用では次のような問題が発生します（これらに限りません）。
1. feedが読み込まれない
リンクは表示されるのにタイムラインが出ない場合は、widgets.jsスクリプトが実行されていません。原因として、プラットフォームが外部スクリプトをブロックしている、広告ブロッカーが干渉している、JavaScriptが無効になっている、などが考えられます。
2. モバイルでレイアウトが崩れて見える
これはほぼ確実に、コンテナの幅かCSSの競合の問題です。カスタムスタイルを一時的に外して、具体的な原因を切り分けてください。
3. 非公開アカウントは埋め込めない
埋め込めるのは公開されているTwitterアカウントのみです。非公開プロフィールは描画されません。
4. ページ速度が低下する
Twitter feedを埋め込むと、サードパーティのスクリプトを読み込むことになります。これにより、追加のHTTPリクエストと外部依存が発生します。
小規模なブログであれば問題にならないかもしれません。しかし、パフォーマンスを最適化したSaaSのホームページでは影響が出る可能性があります。幸い、この問題を解決する遅延読み込みスクリプトを備えたサードパーティのソリューションもあります。EmbedSocialの高度なAI UGCウィジェットはその一例です。
5. ウェブサイトが厳格なContent Security Policy（CSP）を使っている
サーバーが外部スクリプトを制限していて、https://platform.twitter.com を明示的に許可していない場合は、HTMLスニペットが正しくてもfeedは描画されません。
CSPの設定でTwitterのドメインをホワイトリストに追加するか、サードパーティのスクリプトへの直接的な依存を最小限に抑えるEmbedSocialのようなマネージド型の埋め込みソリューションを使う必要があります。
これらは対処可能な問題ですが、趣味のサイト以上の本格的なものを作ろうとすると、あっという間に積み重なります。常に目を配っておく必要があります。
ネイティブなTwitter埋め込みウィジェットの制約
公式のTwitter埋め込みは、意図的にシンプルに作られています。そのため、高度なコントロールではなく、手軽な共有を目的に設計されています。具体的には次のような制約があります。
- コンテンツのモデレーションができません。
- レイアウトを作り直すことができません。
- 複数のアカウントを統合できません。
- TwitterをInstagramや他のプラットフォームと組み合わせられません。
- パフォーマンスを深く最適化できません。
サイドバーにfeedを置きたいだけなら、それで十分です。しかし、ブランドの一貫性、コンバージョンへの影響、自動化を考え始めると、ネイティブウィジェットは窮屈に感じられてきます。
ここでマネージド型のソリューションを使うと、状況が一変します。
EmbedSocialを使ってHTMLにTwitter feedをより良く埋め込む方法
Twitterの生のスクリプトをHTMLに貼り付ける代わりに、TwitterアカウントをEmbedSocialに接続すれば、完全にカスタマイズ可能なfeedを生成できます。
違いはシンプルです。「スクリプトの描画」から「コンテンツの管理」へと移行するのです。そのために設計されたソーシャルメディアアグリゲーターを使えば、すべてが変わります。公式のAPI連携を通じてTwitterアカウントを接続するので、新しい投稿が自動的に同期されます。
何より、EmbedSocialはコード不要のツールを提供しており、Twitterから取得したいものを何でも収集し、カスタマイズ可能なTwitterウィジェットとして好きな場所に表示できます。
進める前に、まずEmbedSocialアカウントを作成してください。そのうえで、次の手順に従ってHTMLウェブサイトにTwitter feedを埋め込みましょう。
- X（旧Twitter）のウェブサイトウィジェットを定義する
- Twitterアカウントをコンテンツのソースとして連携する
- Twitter feed用のレイアウトテンプレートを選ぶ
- X（Twitter）ウィジェットのデザインと設定を調整する
- 生成された埋め込みコードをコピーする
- コードをウェブサイトに挿入する
ハッシュタグ、mentions、キーワードを含むあらゆる種類のX（Twitter）コンテンツを収集して埋め込みたい場合は、Twitter APIキーが必要です。
1. X（Twitter）のウェブサイトウィジェットを定義する
まずは、AIウィジェットエディター内で理想のX（Twitter）ウィジェットを説明することから始めます。説明に納得したら「Generate」をクリックして、クレジットを1つ使い、最初のウィジェットを作成します。
2. Twitterアカウントをコンテンツのソースとして連携する
次に「Sources」タブに移動し、X（Twitter）アカウントを連携して、EmbedSocialがコンテンツを自動的に取得できるようにします。接続後、表示したい特定のTwitterの@handleを選択します。
3. Twitter feed用のレイアウトテンプレートを選ぶ
用意済みのテンプレートから1つを選んでfeedを構成します。AIを活用したテンプレートを選び、プロンプトを使って引き続き調整することもできます。
4. X（Twitter）ウィジェットのデザインと設定を調整する
ウィジェットを調整するには、色、レイアウト、余白の変更など、加えたい変更を説明するだけです。エディターがそれに応じてデザインを更新します。
5. 生成された埋め込みコードをコピーする
すべてが整ったら、EmbedSocialウィジェットエディター内の**「Embed」タブを開き、「Copy code」**をクリックして、ウェブサイトに追加する準備をします。
6. コードをウェブサイトに挿入する
サイトビルダーに空のHTMLブロックを挿入し、ウィジェットコードを貼り付けて、ページを保存するとfeedが公開されます。完了すると、次のような結果が期待できます。
覚えておいてください： サイトに表示される内容はコントロールできます。公開前に投稿を承認したり非表示にしたりできます。ハッシュタグでフィルタリングできます。複数のTwitterアカウントを1つのfeedにまとめられます。TwitterとInstagramを統合して、ひとつのsocial wallを作ることさえできます。
手動のHTML埋め込みとEmbedSocial：何が違うのか？
ここで、違いが戦略的な意味を持ち始めます。
機能
ネイティブなTwitter埋め込み
EmbedSocial
ブランディングのコントロール
最小限
フルカスタマイズ
モデレーション
不可
可能
複数アカウントのfeed
不可
可能
クロスプラットフォーム集約
不可
可能
レイアウトの柔軟性
固定
多彩なテンプレート
パフォーマンスのコントロール
外部依存
最適化された埋め込み
スケーラビリティ
限定的
成長に対応
手早く使い捨てできるものが必要なら、ネイティブで十分です。
ブランド資産を構築するのであれば、自動化とコントロールが重要になります。
Twitter feedの埋め込みが本当に成果を生むユースケース
Twitter feedの埋め込みは、意図的に行えば単なる装飾ではありません。信頼、エンゲージメント、コンバージョンに直接影響します。実際にどう機能するのかを見ていきましょう。
SaaSのホームページ：製品アップデートをライブの信頼性に変える
ほとんどのSaaSのホームページは透明性をうたっています。それを証明できているところはわずかです。
毎週製品アップデートを出荷しているB2Bスタートアップを想像してみてください。彼らは変更履歴、顧客の成功事例、ロードマップの予告を定期的にTwitterに投稿しています。その活動をフッターのソーシャルリンクの奥に隠す代わりに、ライブのTwitter feedをホームページに直接埋め込みます。
すると、すべての訪問者が次のものを目にします。
- 継続している製品の勢い
- 実際の顧客とのやり取り
- 創業者の存在感
- 公開されたサポート対応
これには2つの効果があります。信頼を築くこと（見込み客が活動の証拠を目にする）と、摩擦を減らすこと（サイトを離れることなくソーシャルな裏付けが得られる）です。
EmbedSocialを使えば、企業は投稿をモデレートし、機能の発表を目立たせ、feedを自社のUIに合わせてデザインできます。そうすることで、feedは気を散らす要素ではなく、信頼性を強化する存在になります。
ECの商品ページ：顧客のmentionsをソーシャルプルーフに変える
ソーシャルプルーフ（社会的信用）は売上につながります。
顧客にTwitterでタグ付けを促しているDTCファッションブランドを想像してみてください。お客様の声を手動でスクリーンショットする代わりに、ライブのハッシュタグfeedを商品ページに埋め込みます。
すると、買い物客は洗練された商品写真だけを見るのではありません。実際にあなたのTwitterフォロワーがその商品を身につけている様子を目にします。それが行動を変えます。
これは、口には出されない次のような疑問に答えてくれます。
- 「実物でも見た目はいいのかな？」
- 「他の人も買っているのかな？」
- 「このブランドは信頼できるのかな？」
EmbedSocialを使えば、ブランドは関連性のないmentionsを除外し、ポジティブな投稿を目立たせ、複数のソーシャルメディアサイトを組み合わせて、ひとつのUGCウォールを作ることさえできます。
その結果、購入時の確信度が高まります。
イベントのランディングページ：ライブの盛り上がりを増幅する
イベントは熱量で盛り上がります。
新製品を発表するテックカンファレンスを想像してみてください。参加者がリアルタイムで引用、写真、リアクションをツイートしています。そのコンテンツがTwitter上だけにとどまっていると、ウェブサイトの訪問者はその勢いを見逃してしまいます。
イベントのハッシュタグに紐づくfeedを埋め込むことで、イベントページは動的なものになります。
すると、訪問者は次のものを目にします。
- 参加者の生のリアクション
- 登壇者の発言のリアルタイム表示
- コミュニティの参加
- 参加状況のビジュアルな証拠
これによりFOMOが高まり、今後のイベントへの登録が促されます。
EmbedSocialを使えば、主催者はフィルタリングされていないストリームをそのまま見せる代わりに、最も良い投稿をキュレーションでき、feedをプロフェッショナルでブランドに安全な状態に保てます。
創業者主導のブランド：公の場での存在感を通じて権威を築く
ひとり起業家や創業者主導の企業にとって、Twitterは多くの場合、主要なコンテンツチャネルです。
業界のインサイトを毎日シェアしているコンサルタントを想像してみてください。彼らのウェブサイトにはサービスが掲載されていますが、Twitter feedには思考が実際に動いている様子が映し出されます。
ホームページやアバウトページに戦略的に埋め込まれたとき、feedは次のものを示します。
- 一貫性
- 専門性
- 同業者との交流
- リアルタイムの関連性
権威を主張するのではなく、実際に示すのです。
EmbedSocialを使えば、創業者はfeedを汎用的なソーシャルウィジェットのように見せるのではなく、自社サイトのブランドに溶け込んでいるように感じられるデザインにできます。
権威が目に見える形になります。
代理店とコンサルタント：クライアントの成功を公の場で示す
代理店はクライアントの成果やお客様の声をTwitterでシェアすることがよくあります。
パフォーマンス改善のスクリーンショットやクライアントからの称賛をツイートしているグロース代理店を想像してみてください。そのTwitter feedを事例紹介ページに埋め込むことで、彼らは生きたポートフォリオを作り出します。
訪問者は静的な主張を読むだけではありません。公の場での裏付けを目にします。
これにより懐疑心が和らぎ、意思決定までのサイクルが短くなります。
EmbedSocialのモデレーションとレイアウトのカスタマイズを使えば、代理店は成功を目立たせつつ、関連性のない雑談を非表示にでき、ストーリーの焦点を保てます。
専門家が語る、Twitter（X）コンテンツをウェブサイトに埋め込む7つのメリット
ブランドや企業のウェブサイトにTwitter（X）コンテンツを埋め込むメリットについて尋ねたとき、7人のソートリーダーが語った内容を紹介します。
埋め込まれたUGCはオンサイトの信頼とコンバージョンを高める
Xにリンクを張るとき、あなたは本質的にトラフィックを購入しておきながら、それがもともと発生した場所へと送り返していることになります。私たちの調査結果が示すのは、コンテンツを埋め込むことでユーザーが自社のエコシステム内にとどまり、同時に静的なウェブサイトとは異なる「リアルタイム」のシグナルを与えられるということです。これは信頼性のレベルを高めます。なぜなら、ユーザーがリアルタイムで起こっているやり取りを目にでき、そのやり取りの真正性を測る基準を持てるからです。これは従来のお客様の声のブロックよりもはるかに偽装が難しいものです。
したがって、ユーザー生成コンテンツ（UGC）がもたらす最大の効果は、UGCの結果としてのコンバージョン率の向上です。NostoはUGCがWeb上のコンバージョン率を最大29%高め得ることを明らかにしており、私たちは何度も繰り返し、ライブfeedのUGCが信頼の架け橋として機能し、ブランドが今まさに活動していて反応もよいことを裏付ける様子を見てきました。測定可能な成果として、自社のマーケティング素材だけを使うのではなく、コミュニティの声から生まれた実際のユーザー生成コンテンツに基づいて、あなたの主張を裏付けてくれます。ただし、技術的な側面には注意してください。埋め込みが最適化されていないと、ページの読み込み速度に悪影響が及び、ソーシャルプルーフを使って売上を伸ばすことで得られるはずのSEO上のメリットが損なわれてしまいます。
デジタルの信頼構築は、マーケティングにおける懐疑心との絶え間ない戦いです。フィルタリングされていないリアルタイムのコミュニティ活動のデジタルfeedを持つことは、あなたに隠し事がないことを示す証拠になります。これは、一方通行のマーケティングメッセージを、取引と同じ地点で行われる双方向の会話へと変える機会を提供してくれます。
Amit Agrawal、Founder & COO、Developers.dev
-——————————————
Xの埋め込みは購入までの時間を17%短縮した
Xを自社のウェブサイトに埋め込んだところ、最初の商品ページ訪問から購入までの時間が17%短縮しました。ユーザーがまず商品ページを訪問するというパターンに気づいたのです。その後、FAQセクションに移動し、いくつかのブログを読み、カバレッジマップを見て、ウェブサイトを離脱していました。
旅行用接続サービスの購入者は感情で買い物をしないことを踏まえると、彼らのためらいは不確実性に関するものでした。SIMはすぐに有効化されるのか、地方ではどれくらいきちんと使えるのか。フライトが遅延したらどうなるのか。
私たちのブログやリソースセクションの情報は、こうした疑問に、規約のように読める硬いコピーで答えていました。Xに投稿した内容と顧客からのコメントが、彼らの疑問を解消してくれたのです。顧客がより早く決断するようになったことで、コンバージョンまでの時間が17%短縮しました。また、FAQとウェブサイト以外に追加の情報を探すのをやめたことにも気づきました。
Oleksii Sosnovenko、Digital Marketer、Mobal
-——————————————
埋め込みで訪問者の集中を保つ
訪問者を、訪問の目的であるコンテンツとコンテキストに集中させ続けるために、Xのコンテンツをウェブサイトに埋め込みましょう。ソーシャルネットワークへの外部リンクを提供すると、顧客の注意が自社サイトのコンテンツから、インターネット上の他のあらゆるものへとそれてしまいます。埋め込むことで会話は自社サイト内にとどまり、顧客がビジネスに関連するコンテンツに確実に関与してくれるようになります。
したがって、ソーシャルな会話を統合し、フィードバックがソーシャルメディアプラットフォーム上に別々に存在するのではなく、あなたが伝えたい全体的なメッセージを支えるようにしましょう。
埋め込みコンテンツを取り入れることで、訪問者はサイトにより長く滞在し、コンテンツと構造的なかたちで関われるようになると私は考えています。マーケティングの観点からは、可視性、ソートリーダーシップ、メッセージの単一の源を作るシンプルな手法を提供してくれると考えています。
John Karsant、Founder and CEO、LevelUp Leads
-——————————————
Xの埋め込みは信頼を築き、エンゲージメントに火をつける
Twitter（X）コンテンツの埋め込みは、最も重要な要素のひとつ、すなわち信頼と信頼性をもたらします。以前は、コンテンツ内にTwitterの投稿を埋め込まないと、閲覧者はソーシャルプルーフを得るために現在のタブを離れ、ソーシャルメディアプラットフォームに切り替えなければなりませんでした。
外部のソーシャルメディアリンクを含めることで、閲覧画面を離れることなく、ライブのリアクションやコメントを得られます。これはまた、ページでの滞在時間の延長にもつながり、現在のトラフィックがそのコンテンツを付加価値のあるものと認識していることを示しています。
ソーシャルプルーフの透明性を人々が好むことを私たちはクライアントから学んできましたが、これは自然とオーディエンスにコメントやリアクションといったエンゲージメントを促します。これもまた一石二鳥、いわば一本の矢で二羽の鳥を射るようなものです。簡単に言えば、これはソーシャルメディアプラットフォーム上でのより高いエンゲージメントももたらします。
Tyler Denk、Co-founder & CEO、beehiiv
-——————————————
スクリーンショットのtweetを目立たせて信頼性を高める
Dr. Aditi Nerurkarのソーシャルメディアコンテンツストラテジストとして働いていたとき、Twitterの投稿をそれに対応するエンゲージメントとともに埋め込むことが、あまり活発でないソーシャルメディアチャネルでの信頼性構築に役立つことがわかりました。これはウェブサイトでも機能し得ますが、ウェブサイト上で取り上げるアクティブなユーザーからのお客様の声としての「tweet」として使うほうが効果的だとわかりました。Xのプロフィール（あるいは一般的なリンク）をリンクするのはエンゲージメントを下げるためあまりうまくいきませんが、スクリーンショットを使って信頼性を示すのは機能します。最近ではXはほぼ完全に姿を消してしまいましたが、同じ考え方をThreadsで使うことができます。
Michelle Gean、Marketing Coordinator、Achievable
-——————————————
ライブfeedは滞在時間とリードを増やす
ライブのTwitter（X）コンテンツをウェブサイトに埋め込むと、訪問者との信頼が築かれ、他のサイトへ誘導するのではなく、自社サイトにより長くとどまってもらえるようになります。これを実現する良い方法は、ライブ投稿、レビュー、あるいはビジネスに関するハッシュタグの会話を通じて、顧客基盤からのライブで最新の会話を、重要なランディングページすべてで訪問者に見せることです。これにより即座にビジュアルな信頼性も生まれます。
意図の高い商品ページにライブの顧客ハッシュタグfeedを埋め込んだところ、それらのページでの滞在時間が20%以上増加し、オンライン問い合わせフォームから送信される問い合わせが15%増加しました。顧客はサイトを離れることなく本物のユーザー生成コンテンツに関われたため、直帰率が低下し、意思決定サイクルの長さも短くなりました。
実際の顧客が自身の体験を公の場に投稿することは、静的なお客様の声では提供できないレベルの透明性を示しました。これまでに私たちが学んだことは次のとおりです。ソーシャルプルーフは自社のウェブサイトに置いておきましょう。埋め込まれたライブfeedは信頼性を築き、測定可能なエンゲージメントの増加をもたらし、外部サイトにトラフィックを奪われることなく、受け身の閲覧者を能動的なリードへと変えることができます。
Kellon Ambrose、Managing Director、Electric Wheelchairs USA
-——————————————
ライブのXのfeedはSEOとリテンションを強化する
ライブのTweet（X）を埋め込むことで、顧客とのエンゲージメントと、ユーザーが検索結果を通じて会社を見つけられる度合いの両方が劇的に向上しました。プロジェクトについて投稿しているソーシャルメディアやブログに単にリンクを張るだけでは、新鮮でクローラーに優しいコンテンツは生まれませんが、それとは対照的に、ライブfeedはリアルタイムの情報と顧客のお客様の声をサービスページに直接統合する機会を提供します。これによってGoogleがサイトをクロールする頻度が高まり、SEOのパフォーマンスも向上します。
最近の例として、完了したプロジェクトを目立たせ、クライアントからのフィードバックを含めるために、あるサービスページにライブのtweet feedを追加したことがあります。それ以来、直帰率が18%低下し、そのページへのオーガニックトラフィックが継続的に増加しています。訪問者は自社の「ライブで」最新のバージョンを見ているように感じるため、ウェブサイトをより長く閲覧し、より多くのページを見る傾向があります。私たちの戦略はシンプルです。それぞれのソーシャルメディア投稿を、絶えず更新されるクローラーに優しいウェブサイトコンテンツへと変え、会社にとっての信頼と発見されやすさの両方を生み出すことです。
Andrew Bates、COO、Bates Electric
まとめ：Twitter feedを正しいやり方で埋め込もう
目的が単にHTMLにTwitter feedを埋め込むことだけなら、公式の方法で数分のうちに公開できます。しかし、わずかな手間でそれよりもずっと多くのことが実現できるのです。
さらに、ブランディング、コンテンツのモデレーション、マーケティングのパフォーマンス、そして長期的な柔軟性を重視するなら、ただ動くスニペット以上のものが必要になります。
どのシナリオにおいても、Twitter feedの埋め込みが効果を発揮するのは、ある1つのことを実現したときです。それは、主張と証拠のあいだのギャップを縮めることです。しかし、生の埋め込みは受け身です。
生のスクリプトの先へと進み、EmbedSocialのようなUGCプラットフォームで動かすことで、Twitter feedを構造化された、コンバージョンに直結する資産へと変えましょう。
