X(旧ツイッター)のタイムラインではなく、ポスト(投稿)を埋め込みたい場合はこちらの記事をご覧ください。
埋め込みコードの生成
XのタイムラインをWEBページに埋め込むためのコードは、Twitter Publishと呼ばれる専用のページから生成することができます。
X ヘルプセンターの「タイムラインを埋め込む方法」に、その詳細が記載されています。
埋め込みタイムラインウィジェットを使えば、ツイートのコレクション(タイムラインと呼ばれます)をウェブサイトに埋め込むことができます。
ウェブサイトに埋め込みタイムラインを追加するには
- https://publish.twitter.com/に移動します。
- 埋め込みたいタイムラインのリンクを入力します。
- ウェブサイトに合った高さや テーマ(明るいか暗いか) を指定して、デザインをカスタマイズします。
- コードをコピーし、自分のウェブサイトのHTML上で、タイムラインを表示したい場所にペーストします。
- これで完了です。
Xのタイムラインをワードプレスの投稿に埋め込むまでの流れ
1. タイムラインのリンク(URL)をコピーする
2. Twitter Publishにアクセスし、コピーしたURLを貼り付ける
Twitter Publishはこちら:https://publish.twitter.com
3. Embedded Timelineをクリックする
ちなみにEmbedded Timelineは、「タイムライン埋め込み」という意味です。
4. set customization optionsをクリックする
ちなみにset customization optionsは、「カスタマイズオプションの設定」という意味です。
5. set customization optionsの設定項目
プライバシー設定(Opt-out of tailoring Twitter)は、チェックを入れた場合、Xに閲覧データを送信しないことになります。
チェックを入れない場合、ユーザーがこの埋め込みタイムラインを閲覧したという情報がXに送信され、「おすすめアカウント」としてアナウンスされることになります。
とりあえず今回は、高さ(Height)に「420」と入力し、プライバシー設定(Opt-out of tailoring Twitter)にチェックを入れ、決定ボタン(Update)をクリックします。
6.生成されたコードをコピーする
Copy Codeをクリックしてコードをコピーします。
コードをコピーすると、完了したことをアナウンスする画面が表示されます。
7. ワードプレスの投稿にカスタムHTMLでコピーしたコードを埋め込む
- Xのタイムラインを埋め込みたい箇所で「ブロックを追加」ボタンをクリック
- 検索窓に「html」と入力し、表示される『カスタムHTML』をクリック
- HTMLを入力するためのテキストエリアが表示される
- Twitter Publishでコピーしたコードを貼り付ける
設定によるさまざまな見え方
スマートフォンでは、設定した横幅が表示領域を超える場合、自動的にサイズが画面に収まるように調整されます。
ちなみに、Xにログインしていないユーザーは、埋め込んだタイムラインに「通知はまだ届いていません」と表示されます。
ただし、認証バッチが付いているアカウントのタイムラインは表示されるようです。
タイムラインではなく、投稿(ポスト)を埋め込む場合は、ユーザーがXにログインしていなくても、問題なく表示されるようです。
高さ420pxに指定した場合の見え方
Tweets by KoshigayaVR高さ420px、幅300px、言語をEnglishに指定した場合の見え方
Tweets by KoshigayaVR高さ420px、幅300px、見え方をDark、言語をKoreanに指定した場合の見え方
Tweets by KoshigayaVRオプションで何も指定しない場合の見え方
何も指定しないと、高さがとんでもないことになります。
投稿(ポスト)が20本表示されるようです。
追伸
今おすすめの一冊
2024年10月19日から全国で公開されているドキュメンタリー映画『五香宮の猫』の想田和弘監督の著書『なぜ僕はドキュメンタリーを撮るのか(講談社現代新書)』。
これを読めば、あなたの観察眼がこれまで以上に起動すること間違いなしです。
もしこの記事が役に立ったときは
埼玉県越谷市に向かって「ナイスだぜ、大橋プランニング。ホームページを新規で制作するとき、リニューアルするときが来たら、お前のことを必ず思い出すぜ」と囁いていただけると幸いです。
全国どこでも、メールやビデオ通話でのやり取りだけで、ご自身で手軽に自宅からでも更新することのできるホームページを制作します。
ちなみに、今のイチオシは「ワードプレスのホームページ制作」です。
お値引きさせていただきます。