公開日：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」を選択して
そこに埋め込みコードを貼り付けるだけです。
以上になります。
サイト保守契約の便利ツール
この記事を読んでくださったWeb制作会社・フリーランスのあなたへ‥
Webサイトの保守業務委託においては、毎月定額の決済をお願いするのが一般的だと思います。
決済方法として便利なのがクレジットカード自動引き落とし。一度顧客に手続きいただければ毎月自動で決済してくれるので、制作会社側も顧客側も何の手間もかかりません。
当事務所で導入しているのがSquare（スクエア）。
導入は無料で、コストはクレジット決済手数料（3%台）のみ。
毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いものです。
制作会社、顧客ともに手続き操作もカンタンですし、こちらの記事で解説もしていますので、ご参考ください。
保守費決済のほか、ちょっとした小額の決済も決済リンクを送ってすぐ完了。
非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。
