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

このページではX(Twitter)のタイムラインを埋め込む方法をメモっています。個別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%;が付加されているようです。レスポンシブ対応も安心ですね。

FAQ

埋め込んだタイムラインが表示されない

せっかく埋め込んでも、Xにログインしていない端末からはタイムラインが表示されません。
全員に表示させたい場合、Xに課金するか、他社サービスを利用するか(有料)、になります。

ThreadsやBlueskyはPost単体の埋め込みはできますが、タイムラインの埋め込みは未実装です。
実装してくれたら各公式アカウントのお引越しも進むと思うんだけど……。負担がデカいからする気ないのかな?

CSSでデザイン調整したい

仕様がいつ変更になるかも分からず、CSSで調整してもいつか急に反映されなくなる可能性があります。つまりオススメしません。