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

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

手順は以下の通り。

1. https://publish.twitter.com/ にアクセスし、「X Buttons」をクリックする。
2. 「Share Button」をクリックする。
3. 表示されたウィンドウの「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のサイトで使用されているロゴ。 どちらもSVG形式。

Font AwesomeやBootstrapなど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」となる。

---