X（旧Twitter）のフォローボタンをWebサイト内に埋め込む方法
前回「X（旧Twitter）のタイムラインをWebサイト内に埋め込む方法」をご紹介しましたが、今回は自分のXアカウントをワンクリックでフォローしてもらうための、フォローボタンを埋め込む方法をご紹介します。タイムラインの設置と同様に、こちらもとっても簡単に実装できますよ。
先にポイント：コードをコピペするだけで設置できます
- X公式の「X 出版」でコードを作る：アカウントのURLを入れてボタンを選びます
- 作れるのはフォローボタンとメンションボタンの2種類：この記事ではフォローボタンを紹介します
- 大きさや表示言語は変えられます：コードをコピーして、設置したい場所に貼るだけです
X（旧Twitter）フォローボタンの埋め込み
フォローボタンは、X公式の埋め込みコード作成ページ「X 出版（publish.x.com）」で作ります。以前は英語表記のみでしたが、2026年10月時点では日本語で表示されます。
まずはhttps://publish.x.com/にアクセスしましょう。
基本設定
「何を埋め込みたいですか？」の入力欄に、自分のXアカウントのURLを入力して、右側の矢印をクリックします。URLは「https://x.com/○○○（アカウント名）」の形です。当サイトの場合は「https://x.com/TYP_create」になります。
表示オプションが2つ出てくるので、右側のXボタンを選びます。
ボタンの種類を選ぶ画面が表示されたら、左側のフォローボタンを選びます。作れるボタンは次の2種類です。
- フォローボタン：この記事でご紹介する、アカウントをフォローしてもらうためのボタンです。
- メンションボタン：自分のアカウント宛て（@アカウント名）の投稿画面を開くボタンです。
埋め込み用のソースコードと、ボタンのプレビューが表示されます。コードをコピーをクリックして、Webサイト内の設置したい場所に貼り付ければ完了です。
実際に設置すると、次のようなボタンになります。
カスタマイズ設定
コードの上にある「カスタマイズオプションを設定する」をクリックすると、次の項目を変更できます。
- ユーザー名を非表示にする：ボタンの文字から、自分のアカウント名を省けます。
- 大きなボタン：チェックを入れると、ボタンが大きく表示されます。
- 表示言語：「自動」のほか、日本語なども指定できます。
- カスタマイズを拒否する X：サイトの閲覧情報を、Xのおすすめ表示などに使わないようにする設定です。
変更した見た目は、下のプレビューで確認できます。設定ができたらアップデートをクリックすると、ソースコードに反映されます。あとは「コードをコピー→Webサイトに貼り付け」の手順で完了です。
WordPressに貼り付ける場合
ブロックエディターなら「カスタムHTML」ブロックに、クラシックエディターなら「テキスト」タブに貼り付けます。サイドバーに置きたいときは、【外観＞ウィジェット】から「カスタムHTML」を追加して貼り付けましょう。
気になるギモン
フォローボタンの設置にお金はかかりますか？
X 出版で作る埋め込みコードは無料で使えます。アカウントの登録や申請も必要ありません。
ボタンが表示されず、文字のリンクになってしまいます。
コードの後半にある<script async src="https://platform.x.com/widgets.js"></script>まで貼り付けているか確認しましょう。閲覧する側の広告ブロッカーなどの影響で、文字のリンクとして表示されることもあります。
以前作ったフォローボタンのコードはそのままで大丈夫ですか？
以前のコードは「platform.twitter.com」から読み込む形でした。表示に問題がある場合は、X 出版で新しくコードを作り直して貼り替えてみましょう。
まとめ
これで簡単にWebサイト内にXのフォローボタンを設置できます。ブログサイトなどに設置して、フォロワーを増やしていきましょう！
Xのタイムラインを埋め込む方法については、X（旧Twitter）のタイムラインをWebサイト内に埋め込む方法を参考にしてみてください。
