※購入先、ダウンロードへのリンクにはアフィリエイトタグが含まれており、それらの購入や会員の成約、ダウンロードなどからの収益化を行う場合があります。

X Buttonsの使い方｜publish.x.comで最短設置とシェア・フォロー・埋め込みまで迷わない

X、Twitter

「WebサイトにXボタンを付けたい」と思って調べたのに、情報が古かったり、ボタンと埋め込みが混ざっていたりして、結局どれを貼ればいいのか分からなくなる――そんな経験はありませんか。しかも、コードを貼ったのに表示されない、サイドバーで崩れる、急に挙動が変わったなど、導入後に不安が増えるケースも少なくありません。

本記事では、Xのシェア（ポスト）ボタン・フォローボタン・投稿/タイムラインの埋め込みを、目的別にきれいに整理したうえで、publish.x.comで最短設置する手順を分かりやすく解説いたします。さらに「表示されない」「崩れる」といったつまずきに対して、原因を一気に探すのではなく、再現性の高い切り分け手順とチェックリストで迷いを減らします。

「最短で正しく設置して、安心して運用したい」という方は、まずはこのページの手順どおりに進めてください。途中で詰まっても、次に何を確認すべきかが分かるように設計しています。

※本コンテンツは「記事制作ポリシー」に基づき、正確かつ信頼性の高い情報提供を心がけております。万が一、内容に誤りや誤解を招く表現がございましたら、お手数ですが「お問い合わせ」よりご一報ください。速やかに確認・修正いたします。

目次

X buttonsでできることを目的別に整理する

Xボタンはpublish.x.comで生成したコードをHTMLに貼れば最短で設置できます。
表示不具合は、埋め込みの幅制約（最小180px/最大520px）やCMSのscript制限、CSP、広告ブロッカーで切り分け可能です。
目的別にボタンと埋め込みを使い分けるのが成功の近道です。

Xボタンと埋め込みの違いを一言で理解する

  • ボタン：クリックした人が、X上で行動する（投稿する・フォローする）

  • 埋め込み：ページ内にXの内容を表示し、ページ滞在中に情報を見せる

この違いは公式ドキュメントでも機能別に整理されています。

目的別に選ぶ機能（対応表）

あなたの目的 選ぶ機能 期待できる効果 向いている場所
記事・LPを拡散したい ポストボタン（シェア） 共有数が増えやすい 記事末尾、商品詳細、LPの訴求直後
公式アカウントを伸ばしたい フォローボタン フォロー導線が増える ヘッダー、フッター、会社概要、採用
最新情報を見せたい タイムライン埋め込み 更新感・信頼感 トップ、サイドバー（幅注意）、記事下
1投稿を見せたい 投稿の埋め込み 主張を固定表示 キャンペーン、実績紹介、告知

X buttonsを最短で設置する手順（publish.x.com）

最短で成功するルートは次の通りです。

  1. publish.x.comでコード生成

  2. HTMLに貼る

  3. 実機（スマホ含む）で確認

  4. 問題があれば「詰まり別チェック」へ進む

公式ヘルプでも同様に「publish.x.com → カスタマイズ → コード貼り付け」の流れが示されています。

事前準備チェックリスト（設置前）

  • ボタンを置きたいページを編集できる（カスタムHTMLを貼れる）

  • どのページに置くか決めた（記事末尾／ヘッダー／フッター等）

  • フォローボタンの場合、対象アカウントの@ユーザー名が確定している

  • シェアボタンの場合、シェアさせたいURL（通常はそのページURL）が確定している

  • サイトがHTTPSで配信されている（混在コンテンツの事故を避ける）

ポストボタン（シェア）の作り方と貼り付け場所

公式手順の骨格は非常に単純です。

  1. publish.x.comにアクセスします。

  2. ポストボタンを選び、必要であれば「投稿テキスト」「おすすめアカウント」などを設定します（設定項目は画面の案内に従ってください）。

  3. 生成されたコードをコピーします。

  4. HTMLの任意位置に貼り付けます。おすすめは次の通りです。

  • ブログ：本文の直後、関連記事の前

  • LP：訴求の直後か、CTAの手前（押し付け感が出ない位置）

  • 商品ページ：レビューや特徴を読んだ後、購入導線を邪魔しない位置

貼り付け位置のUX上の注意点

  • シェアボタンは「読了の瞬間」に押されやすいため、本文末尾は最優先です。

  • CTA（購入/問い合わせ）より上に置きすぎると、主目的のコンバージョンを妨げる場合があります。

  • モバイルでは“誤タップ”が発生しやすいので、ボタン周辺の余白を十分に取ることが重要です。

フォローボタンの作り方と貼り付け場所

公式ヘルプでは、フォローボタンも「publish.x.com → カスタマイズ → コード貼り付け」の流れです。

  1. Xにログインします。

  2. publish.x.comにアクセスします。

  3. フォローボタンを選び、表示オプションを設定します。

  4. 生成コードを貼り付けます。おすすめは次の通りです。

  • ヘッダー付近：常に視界に入る

  • フッター：サイト全体で共通導線にできる

  • 会社概要/プロフィール：信頼形成と相性が良い

  • 採用ページ：カルチャー発信導線として機能しやすい

フォローボタンが“増える”設置のコツ

  • 「フォローしてください」だけでなく、何が得られるかを短く添えると効果が上がりやすいです。
    例：更新情報、キャンペーン告知、制作裏話、メンテナンス情報など。

  • ただし文言は過剰に煽らず、自然なトーンで問題ありません。

設置後の動作確認チェックリスト（公開前後）

  • PC（Chrome等）で表示・クリックできる

  • スマホ（iOS/Androidどちらか）で表示・クリックできる

  • クリックで投稿画面（またはフォロー導線）が開く

  • ボタンの周りが窮屈で押しにくくない

  • 表示崩れ（はみ出し、極端な改行、余白の欠落）がない

  • 主要ページの表示速度に悪影響がない（体感でよいので遅くなっていない）

X buttonsを自作リンクで軽量に実装する方法

公式ボタンは分かりやすく導入も簡単ですが、次のような理由で「リンク方式」を選びたい方もいます。

  • 表示が重い、レイアウトが崩れる、依存を減らしたい

  • デザインをサイトのUIに完全に合わせたい

  • CMSがscriptを許可しない

  • プライバシーやブロッカー影響を最小化したい

X Developer Platformのドキュメントでは、ボタンが「web intentへのリンク＋X for Websites JavaScript」で構成されることが説明されています。言い換えると、リンクだけでも機能は成立します。

シェア（ポスト）をリンクで作る基本（web intent）

代表的な方法は「投稿作成（intent）」へ誘導するリンクです。Developer Docs上の例では https://twitter.com/intent/tweet が示されます。実運用ではURLが変わる可能性もあるため、最新は公式導線で確認しつつ、考え方として「intentに必要パラメータを渡す」ことを理解してください。

HTML例（リンク方式の最低限）

<a href="https://twitter.com/intent/tweet?text=%E8%A8%98%E4%BA%8B%E3%82%92%E8%AA%AD%E3%81%BF%E3%81%BE%E3%81%97%E3%81%9F&url=https%3A%2F%2Fexample.com%2Farticle"
target="_blank" rel="nofollow noopener">
Xでシェア
</a>
運用上のポイント

  • text と url はURLエンコードして渡すと安全です。

  • target="_blank" を使う場合は rel="noopener" を付け、脆弱性リスクを減らします。

  • SEO観点で nofollow を付けるかはサイト方針で決めれば問題ありません（“必須”ではありません）。

フォローをリンクで作る（フォローintent）

フォローボタンについても、Developer Docsでは「フォローintentへのリンク＋JavaScriptで公式見た目に変換」と説明されています。したがって、リンク方式でもフォロー導線として成立します。

リンク方式に向くケース

  • ノーコードでscriptが消える

  • 表示安定性を優先したい

  • ボタンUIは自分で作れる（CSSで整える）

自作リンク方式のデザイン・UXチェック

  • ボタンのタップ領域が44px以上

  • 押した後に何が起きるかが分かる文言（例：Xで共有、Xでフォロー）

  • アイコンを入れる場合は誤解がない（公式提携を匂わせない）

  • ロゴ利用はブランドガイドライン参照（次章）

ロゴや表記を使うときのブランド注意点

自作ボタンで「Xロゴ」「Xという表記」をUIに組み込む場合は、Brand ToolkitおよびBrand Guidelinesの参照が推奨されます。ロゴは最も保護される資産であり、加工や誤用は避けるべきです。

X buttonsと一緒に投稿やタイムラインを埋め込む方法

「ボタンで行動させる」だけでなく、「ページ内に情報を見せて信頼を作る」ために埋め込みを選ぶケースは多いです。特に企業サイトやサービスサイトでは、トップページにタイムラインを置くことで更新感が出ます。

ただし埋め込みは、ボタンよりも表示崩れ・制約・ブロッカー影響を受けやすい傾向があるため、最初に“制約”を把握しておくことが成功の近道です。

埋め込みタイムラインの作り方（基本フロー）

  • publish.x.comで埋め込みコードを生成し、HTMLに貼り付けます。
    （埋め込みタイムラインはX Developer Platform上でも仕様・寸法が説明されています。）

“最短で動かす”コツ

  • まずは「本文下など広い領域」に入れて動作確認し、動いたらサイドバー等に移す

  • いきなり狭いカラムに入れると、寸法制約に引っかかって崩れる可能性が上がります

埋め込み寸法の制約（最重要）

埋め込みタイムラインは、親要素幅に合わせて自動調整されますが、最小幅180px・最大幅520pxという制約があります。グリッド表示では最小幅が220pxです。

実務でよく起きる失敗

  • サイドバーが180px未満のとき、表示が崩れる/出ない

  • 520pxを超える広い領域で「思ったより小さい」表示になる（最大幅に張り付く）

  • モバイルの余白込み実測幅が足りず、はみ出す

対策（先回り）

  • サイドバー設計時点で「実測180px以上」を確保する

  • data-width や data-height を使い、枠を設計してから埋め込む

  • どうしても幅が取れない場合は、タイムライン埋め込みを諦めて「投稿リンク」「フォロー導線」「最新3件の固定リンク」などへ置き換える

oEmbed APIを使うケース（開発者向け）

CMSやバックエンドで埋め込みHTMLを取得したい場合、oEmbed APIが選択肢になります。ここでは実装詳細までは踏み込みませんが、パラメータとして maxwidth や maxheight などが用意されていることが示されています。

oEmbedを検討する場面

  • 記事本文にURLを貼るだけで自動埋め込みしたい

  • サニタイズやscript制限がある環境で、サーバー側で埋め込みHTMLを制御したい

  • 複数ページへ同一ルールで埋め込みを適用したい

X buttonsが表示されないときの原因と対処法

ここからは「貼ったのに出ない」「崩れる」「急に表示が変わった」を解消するための、再現性のある切り分け手順です。ポイントは、いきなり深追いせず、原因を層で分けることです。

まず最初にやるべき切り分け（最短）

  1. 別の素のHTMLページ（余計なCMSがない状態）に同じコードを貼る

  2. 表示されるなら、原因はCMS/テーマ/セキュリティ設定側

  3. 表示されないなら、原因は**コード/寸法/外部要因（ブロッカー等）**側

この切り分けだけで、解決までの時間が大きく短縮されます。

症状別のトラブルシューティング表

症状 原因候補 確認 対処
何も表示されない scriptが消えている／CSPで拒否 ページソースにscript/anchorが残るか カスタムHTML機能に貼る、CSP許可、リンク方式へ切替
表示が崩れる 幅制約（180〜520px）未満/超過 親要素の実測幅 置き場所変更、幅確保、data-width調整
モバイルだけおかしい 余白込み幅不足／CSS干渉 devtoolsの実測 コンテナpadding見直し、カード化
一部ユーザーだけ出ない 広告ブロッカー／追跡防止 別ブラウザ/別端末で比較 自作リンク方式へ、代替導線追加
急に表示が変わった 仕様変更／外部側更新 公式情報を確認 publish.x.comで再生成、表示設計を見直す

CMSでscriptが消える（WordPress/ノーコードで多い）

原因

  • エディタが <script> を安全のため削除する

  • セキュリティ系プラグインやWAFが外部スクリプトを弾く

  • “テキスト”ではなく“ビジュアル”入力に貼ってHTMLが壊れる

対処（成功率が高い順）

  1. WordPressの「カスタムHTMLブロック」へ貼る

  2. ウィジェット（カスタムHTML）へ貼る

  3. それでも消えるなら「リンク方式」へ切り替える（script依存をなくす）

  4. サイト全体の方針として、埋め込みよりボタン中心へ寄せる

寸法制約で崩れる（埋め込みの最頻原因）

埋め込みタイムラインには、最小180px・最大520pxの制約があります。これを知らずに狭いサイドバーへ入れると、崩れやすくなります。

対処の型

  • まず本文下など広い場所で動作確認

  • 次にサイドバーへ移動

  • 崩れるなら、サイドバー幅（padding含む）を再設計

  • どうしても無理なら、埋め込みを諦めて「フォロー導線＋最新投稿リンク」へ置換

広告ブロッカー／追跡防止の影響

埋め込みや公式ウィジェットは、ユーザー環境によってブロックされる場合があります。
この問題はサイト運営側では完全に制御できないため、UXとしては「見えない人がいても目的が達成できる導線」を用意するのが現実的です。

代替導線の設計例

  • タイムラインが見えない場合：

    • 「Xで最新情報を見る」リンク

    • 「フォロー」リンク

    • 最新投稿の固定リンク（テキストで3件程度）

  • シェアボタンが変換されない場合：

    • 自作リンク方式の「Xでシェア」ボタン（テキスト/アイコン）

X buttonsの最適な使い分け（公式と自作の判断基準）

「公式が正解」「自作は邪道」という話ではありません。目的と制約に応じて正解が変わります。ここでは、迷いを減らすための判断基準を明確にします。

公式ウィジェットが向くケース

  • とにかく早く設置したい

  • 公式見た目で信頼感を出したい

  • HTMLに貼れる環境がある

  • 運用はシンプルでよい

根拠として、公式ヘルプは publish.x.com を入口に設置手順を示しています。

自作リンク方式が向くケース

  • CMSやノーコードでscriptが消える

  • パフォーマンスや安定性を優先したい

  • デザイン統一が重要（ブランドサイト等）

  • ブロッカー影響を最小化したい

Developer Docs上でも、ボタンは「intentリンク＋JS変換」の構造で説明されます。つまり“リンクだけでも目的は果たせる”という設計です。

比較表（公式 vs 自作）

観点 公式（publish.x.com生成） 自作リンク方式
導入の速さ 速い 中（UI実装が必要）
見た目の公式感 強い デザイン次第
表示安定性 環境依存が出る場合 高い（シンプル）
パフォーマンス 外部スクリプト依存 軽量にしやすい
CMS制限耐性 低い場合あり 高い
運用負担 低い 中（テンプレ整備で低下可）

X buttonsを“増やす”配置と導線設計（デジマ視点）

設置できても、成果（シェアやフォロー）が増えなければ意味がありません。ここでは、UXとして自然で、拡散力を上げやすい配置の型を整理します。

シェア（ポスト）ボタンが押されやすいタイミング

  • 読了直後（記事末尾）

  • 感情が動いた直後（共感・驚き・納得）

  • 具体的に役立った直後（チェックリストやテンプレを使い終わった瞬間）

したがって、次のような設計が有効です。

  • 記事末尾に「この記事が役に立ったら共有」

  • 重要なチェックリストの下に「この手順を共有」

  • テンプレコードの直後に「同僚に共有」

フォローボタンのCVRを上げる一言

フォローボタンの直前に、次のような“約束”があると増えやすいです。

  • 「更新情報を配信」

  • 「不具合情報を告知」

  • 「事例を投稿」

  • 「キャンペーンを最速で案内」

ただし、過度な誇張は逆効果です。小さく誠実に書く方が信頼が残ります。

埋め込みタイムラインの置き場所最適化

  • トップ：更新感の演出に向くが、表示が重くなる場合は注意

  • サイドバー：視認性は高いが、**幅制約（180px以上）**が最大リスク

  • 記事下：崩れにくく、導線としても自然

X buttonsのよくある質問

publish.x.comとpublish.twitter.comはどちらを使うべきですか

基本方針としては、公式ヘルプが案内する publish.x.com を起点にするのが安全です。
一方で、publish.twitter.com が残っているケースもあります。両方が存在するため混乱しがちですが、最終的には公式案内に従い、リンク切れや挙動差がある場合は最新の公式情報へ寄せてください。

埋め込みが小さすぎたり崩れたりします

多くは幅制約が原因です。埋め込みタイムラインは、最小180px・最大520pxの範囲に収まります。サイドバー幅（padding含む）を実測してから設置してください。

ノーコードで埋め込みが表示されません

ノーコードはscriptが消えることがあります。その場合は、埋め込みではなく「自作リンク方式のボタン」「投稿URLへのリンク」「フォロー導線」を中心に設計すると安定します。

ロゴを入れても大丈夫ですか

ロゴや表記をUIに組み込む場合は、Brand ToolkitおよびBrand Guidelinesを確認してください。ロゴの扱いは厳格に定義されることがあります。

参考にした情報源

X Help（How to add the post button to your website）
https://help.x.com/en/using-x/add-x-share-button

X Help（How to add a follow button to your website）
https://help.x.com/en/using-x/add-follow-button-to-website

X Developer Platform（X for Websites）
https://developer.x.com/en/docs/x-for-websites

X Developer Platform（Embedded Timelines Overview）
https://developer.x.com/en/docs/x-for-websites/timelines/overview

X Developer Platform（Timelines: Parameter reference）
https://developer.x.com/en/docs/x-for-websites/timelines/guides/parameter-reference

X Developer Platform（oEmbed API）
https://developer.x.com/en/docs/x-for-websites/oembed-api
https://developer.x.com/en/docs/x-for-websites/timelines/guides/oembed-api

About X（Brand toolkit）
https://about.x.com/en/who-we-are/brand-toolkit

X Brand Guidelines PDF（x-brand-guidelines.pdf）
https://cdn.cms-twdigitalassets.com/content/dam/about-twitter/x/brand-toolkit/x-brand-guidelines.pdf

X、Twitterの最新記事4件