ツイートをサイトに埋め込む方法 [Twitter]

使い方

手順

1. 「Twitter Publish」でツイートのアドレスを入力する。あるいは、ツイート右上の3つドットが並んだアイコン をクリックし、メニューから「ツイートを埋め込む」を選択すると、該当するツイートが「Twitter Publish」で開く。
2. 必要に応じて「Set Customization Options」リンクを押して、オプションを設定する。
3. 「Copy Code」ボタンを押して埋め込みコードを取得する。
4. サイトのソース内で、所望の位置に取得したコードを挿入する。

→ Twitter Publish

参考：

Twitter を埋め込む方法、タイムラインやツイートを Web サイトに表示 | マイナビニュース

ウェブサイトやブログにツイートを埋め込む方法 | Twitter ヘルプセンター [公式]

Embedded Tweets | Twitter Developer Platform [Official]

CMS Best Practices – Embedded Tweets | Twitter Developer Platform [Official]

タイムラインを埋め込む

手順

1. 「Twitter Publish」でユーザープロファイルページのアドレスを入力する。
2. 「Embedded Timeline」を選択する。
3. 必要に応じて「Set Customization Options」リンクを押して、オプションを設定する。
4. 「Copy Code」ボタンを押して埋め込みコードを取得する。
5. サイトのソース内で、所望の位置に埋め込みコードを挿入する。

→ Twitter Publish

参考：

ユーザーのタイムラインを記事に埋め込む方法とカスタマイズ | ぼくらのハウツーノート

タイムラインの埋め込みとデザインカスタマイズの方法 | 創kenブログ

タイムラインを埋め込む方法 | Twitter ヘルプセンター [公式]

パラメータ

• id
• cards
• conversation
• theme
• width
• align
• lang
• dnt

参考：

タイムラインの埋め込みとデザインカスタマイズの方法 | 創kenブログ

Twitter を自分好みのデザインにカスタマイズして埋め込む方法 | after work lab

Embedded Tweet Parameter Reference | Twitter Developer Platform [Official]

ダークモードに対応させる

参考：

ツイッターの埋め込みでダークモードに自動対応させる裏技 | UNITORO

Change Embedded Tweet Dark Theme to Match Site | Luke Lowrey

Embedded Tweet Parameter Reference | Twitter Developer Platform [Official]

Embedded Tweets Night Mode – Twitter Developers Forums

Embedded Timeline Background Colour – Stack Overflow

横幅を調節する

• data-width

参考：

Twitter 埋め込みサイズを変更／横幅を小さく中央寄せも | 大福日記

埋め込み時のカスタマイズ方法／レスポンシブ表示 | シロビジュ

スタイルを適用する

参考：

埋め込みツイートをカスタマイズ！ CSS を変更する方法も | ぽんひろ.com

JavaScript

参考：

Embedded Tweet JavaScript Factory Function | Twitter Developer Platform [Official]

FAQ

参考：

FAQ – Embedded Tweets | Twitter Developer Platform [Official]

リンク

Twitter Publish [Official]