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

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

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

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

作業手順は4ステップ
  1. twitterのアカウント名 or URLを確認
  2. https://publish.twitter.com/ にアクセス
  3. オプション設定後、埋込み用コードをコピー
  4. サイトにコードを貼り付ける

アカウントURLを確認

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

アカウントURLの構成

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

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

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

専用サイトにアクセス

https://publish.twitter.com/

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

オプション設定など

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

タイムラインかボタンかを選択
  • Embedded Timeline
  • Twitter Buttons
tiwtterボタン

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

主なカスタマイズ項目
  • Height (高さ)
  • Width (幅)
  • Light or Dark (通常 or 黒背景)

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

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

サイトに埋め込む方法

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

固定・投稿ページに埋め込む

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

サイドバーに表示させる方法

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

WordPressのサイドバーに表示
  1. WordPressダッシュボード
  2. 外観
  3. カスタマイズ
  4. ウィジェット
  5. サイドバー
  6. +ウィジェットを追加
  7. カスタムHTML

Comment

タイトルとURLをコピーしました