公開日：2022.07.25
更新日：2022.07.28
Twitterのタイムラインをサイトに埋め込む方法。カスタマイズ、WordPress対応も
ホームページ内にTwitterのタイムラインを埋め込み表示させる方法です。
Twitter公式が「埋め込みコード」を簡単に生成するページを用意してくれてますので無料・簡単に実現可能。
WordPressの投稿にも利用できます。
サンプル
Tweets by tanomasaki埋め込み手順
「Twitter Publish」というページを開きます。
Twitter公式が用意してくれている、埋め込みコードを発行するためのページです。
開くとこのような、URL入力欄だけのページが表示されます。
こちらに、タイムラインを埋め込みたいアカウントのページのURLを貼り付け、Enterキーもしくは入力欄の「→」マークをクリック。
こうですね。
すると画面が自動でスクロールして「Here are your display options」という選択肢が現れますので、左側の「Embedded Timeline」をクリック。
するとさっそく、埋め込みコードが発行されますので「Copy Code」をクリックしてコピー、埋め込みたい場所に貼り付けさえすればタイムラインが表示されます。
ただこのままだと、やたら縦に長いタイムラインであったり実質使えない状態なんですね。
そのため埋め込みコードをコピーの前に「set customization options.」をクリックして、見た目を整えましょう。
タイムラインの見た目をカスタマイズする
「set customization options.」をクリックしたときに表示されるカスタマイズ画面です。
- 高さ。こちらに入力した高さの中でタイムラインがスクロールできるようになります。
- 横幅。220px以上にする必要がありますが、あとはお好みです。
- Light（白背景）もしくはDark（黒背景）を選択。
- 言語の選択。標準では「Automatic（自動）」ですが、「Japanese」に変更しておくのが無難かと思います。
変更が完了したら、右下の「Update」ボタンをクリック。
すると埋め込みコードがカスタマイズ後のものに変更されますので、コピペするだけです。
WordPressでは「カスタムHTML」ブロックを使用
WordPressの投稿（ブロックエディタ）においても使用することができます。
ブロックの中から「カスタムHTML」を選択して
そこに埋め込みコードを貼り付けるだけです。
以上になります。