目次
Twitter Publishのページから
ファビコンがまだ青い鳥なので安心しますね。
埋め込みコードを生成する
埋め込みたいXアカウントのURLを入力します(他人や関係ない団体のものを勝手に埋め込むのは普通に考えてNGです)。
下の白背景部分から、左側の「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で調整してもいつか急に反映されなくなる可能性があります。つまりオススメしません。