twitterタイムラインをサイトに埋め込む方法【スマホで作業】

自分のtwitterタイムラインをサイトに埋め込む手順です。PCを使わずにスマホだけで作業します。WordPressサイトのサイドバーに表示させる設定も合わせて参考にしてください。

これは高さ460pxで幅は指定無し

タイムライン埋め込み手順

作業手順は4ステップ

アカウント名の入力だけで埋め込み用コードは取得できますが、念のためURLについて少し補足しておきます。

アカウントURLの構成

URLは基本的にhttps://twitter.com/の後に自分のアカウント名(@は除く)が付く形になっています。

調べた限り、アプリからアカウント名やURLのコピーはできないので、スマホの場合はSafariやChrome等でtwitterにログインし、自身のページを表示させた上でアドレスバーをタップしてURLをコピーします。

モバイルからアクセスした場合はURLの途中に「mobile.」が入ってしまう為、ペースト時に削除する必要があります。

上記のサイトにアクセスし、アカウント名(@〜)かURLを中央の欄に入力します。

タイムラインとTwitterボタンのいずれかを選択します。ちなみにembedの訳は「埋め込み」です。

タイムラインかボタンかを選択

tiwtterボタン

このままコードをコピーしてもOKですが、サイズや見た目をカスタマイズすることもできます。Set Customization Options というリンクがさり気無く表示されているので、そちらをクリックしてください。

主なカスタマイズ項目

「update」ボタンを押すとプレビュー画面が表示されます。デザインに問題が無ければ「copy code」ボタンを押してコードをコピーします。

高さは400〜500pxくらいがオススメです。高くし過ぎるとスマホで見た時に画面がtwitterの埋め込み領域で占領されてしまい、ページスクロールが難しくなります。カスタマイズ項目はいちいちコードを取得しなくとも、HTMLコード内で変更できます。

固定ページ・投稿ページに埋め込む方法と、サイドバーに埋め込む方法を紹介します。

WordPressでブロックエディターを使用する場合はカスタムHTMLというブロックを追加します。先程コピーした埋め込み用コードをペーストするだけなので簡単ですね。

既にサイドバーがある事を前提としています。手順は以下の通りです。

WordPressのサイドバーに表示