X（旧Twitter）の公式投稿（POST）ボタンをサイトに設置する

更新：2024-10-26

自分のウェブサイトやブログなどに設置するX（旧Twitter）の公式投稿ボタン（旧ツイートボタン）は、X公式サイトからコードを取得できる。

手順は以下の通り。

https://publish.twitter.com/ にアクセスし、「X Buttons」をクリックする。
「Share Button」をクリックする。
表示されたウィンドウの「Copy Code」ボタンをクリックする。

以上でHTMLコードがクリップボードにコピーされる。これを自分のサイトに貼り付ける。

ボタンをカスタマイズしたい場合は「set customization options」のリンクをクリックする。ここで予め埋め込みたいテキスト、URL、ユーザー名、ハッシュタグが指定できる。「Large Button」のチェックをオンにすると少し大きいボタンが使える。設定後、「Update」ボタンをクリックしてもとの画面に戻りコードをコピーする。

昔は公式ボタンにツイート数が表示されたが、何年か前から表示されなくなった。

詳しい仕様に関しては Guides | Docs | Twitter Developer Platform に書かれている。

仕様

何度か仕様が変更されている。

公式ボタンのHTMLの<a>要素（タグ）の属性は以下の通り。値を指定した場合のみ属性が追加される。

data-url: ページのURL。何も設定しない場合は表示されたページのURLになる。
data-text: 予め挿入するテキスト。
data-via: ユーザー名の指定。
data-related: 推奨アカウントの指定。
data-hashtags: ハッシュタグの指定。
data-size: ボタンのサイズ。「large」を指定すると大きくなる。
data-dnt: 「Opt-out of tailoring Twitter」の指定。 true or false。
data-lang: 言語の指定。日本語（ja）だと「ポスト」、英語（en）だと「POST」になる。デフォルトは自動で表示。
data-count: ツイート数が表示されていた時代に存在したプロパティだが、現在は無効。

投稿ボタンを自作する

遠い昔は公式のツイートボタンがなかったので自作していた。ただ、公式ボタンはやや重く、回線が混んでいる時間帯では表示に少し時間がかかる。そこで仕様に従って自作する方法もある。

例えば以下のようになる。

X 投稿

HTMLコードは以下の通り。

<a target="_blank" href="https://x.com/intent/tweet?text=test&url=https%3A%2F%2Fexample.com%2F&hashtags=example%2ctest">X 投稿</a>

Xへのリンクは https://x.com/intent/tweet で、この後に必要なパラメータ（引数）を記述する。

以下のようなパラメータがある。

text: 投稿するテキスト。
url: URLを指定する。 textの中にURLを埋め込んでも良いが、別途指定することもできる。また、url は「http」または「https」で始まっていないと反映されない。
hashtags: ハッシュタグを指定する。 #（シャープ）は書かなくても自動的に追加される。複数のハッシュタグを記述する場合は半角カンマで区切る。

主な仕様は以下の通り。

各パラメータは、必須ではなく任意。
パラメータの値は、UTF-8でURLエンコードする。

公式ロゴ画像

投稿ボタンを自作する場合、テキストでリンクを張っても良いが、Xのロゴ画像を使った方が見栄えが良い。

X公式のロゴ画像は Xについて | Xロゴ、ブランドガイドライン、ポストツールからダウンロードできる。ただ、Xが実際にサイトで使用しているロゴより線が細い。

左が配布されているロゴ、右がXのサイトで使用されているロゴ。どちらもSVG形式。

Font Awesome や Bootstrap Icons などSVGアイコンを配布しているサイトでもXのロゴが手に入る。

以下は、画像を使った投稿ボタンのサンプル。

JavaScript

リンクを張る際、ページのURLやタイトルをページごとに書くのは面倒なので、JavaScriptなどを使用してリンクを自動生成すると良い。引数の値はURLエンコードする。

以下はサンプル。

HTMLは以下の通り。

<a id="ex_x_button" target="_blank" href="https://x.com/intent/tweet?text=test&url=https%3A%2F%2Fexample.com%2F&hashtags=example%2ctest"><svg width="48" height="48" viewBox="0 0 24 24" aria-hidden="true"><g><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg></a>

JavaScriptは以下の通り。

<script>
(function(){
var title = encodeURIComponent(document.title.substring(0, 150));
var href = encodeURIComponent(document.URL);
document.getElementById('ex_x_button').setAttribute('href', 'https://x.com/intent/tweet?text=' + title + '&url=' + href);
})();
</script>

ページのタイトルとURLを取得し、ロゴの画像にリンクを張っている。このJavaScriptはロゴの後に記述する。

Xの投稿は文字数制限があるので、ここではとりあえずタイトルを150文字以内に制限している。

Xの検索

以下はXで検索したときのURL。

話題のポスト: https://x.com/search?q=example.com&src=typed_query
最新のポスト: https://x.com/search?q=example.com&src=typed_query&f=live

クエリの q= のところに検索したいドメインやURLを入れると、そのページに対する投稿が分かる。これらのURLにリンクを張れば、昔のツイートボタンのようにバズられ具合がわかる。

TLD（トップレベルドメイン）が .net の場合は昔から検索できない仕様だが、フィルタ等を活用して「url:example*net」とすれば概ね検索できる。実際にはURLエンコードするので「url%3aexample*net」となる。

X（旧Twitter）の公式投稿（POST）ボタンをサイトに設置する

仕様

投稿ボタンを自作する

公式ロゴ画像

JavaScript

Xの検索

カテゴリ