X(Twitter)のタイムラインをサイトに埋め込む&カスタマイズ

このページではX(Twitter)のタイムラインを埋め込む方法をメモっています。個別postの埋め込みには触れていません。

追記241213: 埋め込まれたpostが古い、あるいは表示されない不具合が起きています。

Twitter Publishのページから

Xの埋め込みウィジェットを生成するページ

ファビコンがまだ青い鳥なので安心しますね。

埋め込みコードを生成する

埋め込みたいXアカウントのURLを入力します(他人や関係ない団体のものを勝手に埋め込むのは普通に考えてNGです)。

XアカウントのURLを入力

下の白背景部分から、左側の「Embedded Timeline」をクリックします(右側は「フォローする」ボタンのみの作成となります)。

埋め込みサンプルが下に現れる

下にサンプルが表示されました。長い!長い!長い!長い!

カスタマイズする

テキストリンク「set customization options.」からカスタマイズページに移動しましょう。
ここでは高さ、横幅、色(白パターンか黒パターンか)、言語の指定ができます。

カスタマイズページ

これで調整できました。

OKであれば「Update」ボタンをクリックすると、コードの反映されます。

カスタマイズがコードに反映されました

このコードをサイト(HP)の埋め込みたい箇所にペーストすれば埋め込み完了です。

WordPressの投稿ページの場合は、カスタムHTMLのブロックにペーストだったかな。X Serverが詳しく解説してるので、下記サイトをご参照ください。

コードを見てみよう

Before: デフォルト

<a class="twitter-timeline" href="https://twitter.com/YanagiWork?ref_src=twsrc%5Etfw">Tweets by YanagiWork</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

After: カスタマイズ後

<a class="twitter-timeline" data-width="400" data-height="500" data-theme="dark" href="https://twitter.com/YanagiWork?ref_src=twsrc%5Etfw">Tweets by YanagiWork</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
data-width 横幅指定(px)
data-height 高さ指定(px)
data-theme デフォルトでlight。
横幅ですが、max-width: 100%;が付加されているようです。レスポンシブ対応も安心ですね。

不具合について

変更という名の嫌がらせ改修をされてる気分になりますが、色々検索してみてももうダメぽいっすね(上記参考サイト)。
Threadsはタイムラインの埋め込みに対応していません。
Blueskyは公式ではありませんが有志が無料で提供してくれています。このサイトのTOPページの右カラム(SP時はページ下部)でも使用しています。
エロ広告や陰謀論(デマ)、スパムが跋扈するSNSから青空の元へお引越しするのが一番手取り早いかもしれませんね。