この記事では、Twitterのタイムラインや特定のツイートをWebサイト（ホームページ）やブログに埋め込む方法をわかりやすく解説していきます。特定のツイートはツイート右上の三点ボタンメニューから、タイムラインはTwitter Publishから埋め込みコードを取得します。

特定のツイートを埋め込む方法

特定のツイートをWebサイトやブログに埋め込んで表示するには、ツイートの右上にある三点ボタンから埋め込みコードを取得して、Webページや記事に貼り付けます。今回は、WebブラウザにGoogle Chromeを、Twitter埋め込みコードの表示確認にはWordPressを使って説明します。

  • 【特定のツイート編】Twitterの投稿をホームページ・ブログに埋め込む方法1

    【1】埋め込みたいツイートの右上にある三点ボタンをクリックして、メニューから「ツイートを埋め込む」をクリックします

  • 【特定のツイート編】Twitterの投稿をホームページ・ブログに埋め込む方法3

    【2】Twitter Publishのページが開きます。「Copy Code」をクリックすると、ツイートの埋め込みコードがクリップボードにコピーされます

今回、取得した埋め込みコードは以下になります。

<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">ツイートをホームページに埋め込みたいです。</p>&mdash; MN-ツイッター研究班A (@MNA61745180) <a href="https://twitter.com/MNA61745180/status/1391701934868893699?ref_src=twsrc%5Etfw">May 10, 2021</a></blockquote>
 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  • 【特定のツイート編】Twitterの投稿をホームページ・ブログに埋め込む方法3

    【3】取得したコードを実際にWebサイトに埋め込むと、このような表示になります

ツイートの埋め込みができない原因は？

「ツイートを埋め込む」から取得したコードが下の画像のような「引用表示」になって、正常に反映されないケースがあります。この原因について、筆者がWordPressのテスト環境で検証したところ、埋め込みコードのJavaScriptが正常に読み込めていない場合に失敗していました。

  • ツイートの埋め込みができない原因1

    埋め込みコードのデザインが反映されていない失敗例。Twitterのデザインが反映されず、引用したときの表示になっています

このようなエラーが発生している場合、WordPressの<head>～</head>間に以下のコードを挿入することで表示が改善されるケースがあります。

<script charset="utf-8″ src="https://widgets.twimg.com/j/2/widget.js"></script>

埋め込み側ではなく閲覧側の問題になりますが、ブラウザ側でJavaScriptをブロックするよう設定していないかも確認ください。「AdBlock」など広告ブロックを行う拡張機能を有効にしている場合も多発します。

ツイートの埋め込みをカスタマイズする方法

特定のツイートを埋め込む際には、好みの表示デザインにカスタマイズすることが可能です。具体的には、取得した埋め込みコードの <blockquote class="twitter-tweet"> の後ろに記述を追加するとスタイルを変更できます。以下、ダークモードで表示する方法、画像や動画を表示させない方法、返信ツイートの元になるツイートを表示させない方法の3種類を順に紹介します。

ダークモードでツイートを埋め込む

通常の手順で取得した埋め込みコードでは、背景色が白の明るいデザインでツイートが表示されます。しかし、Webサイトのテイストに合わせるため、暗い色つまり「ダークモード」で表示させたいというニーズもあるでしょう。その場合は、コード冒頭の <blockquote class="twitter-tweet"> の後に「data-theme="dark"」という記述を追加すると、暗い配色で表示できます。

今回のテスト用ツイートをダークモードで表示するコードと、それを適用した表示デザインは次の通りです。

<blockquote class="twitter-tweet" data-theme="dark">
<p lang="ja" dir="ltr">ツイートをホームページに埋め込みたいです。</p>&mdash; MN-ツイッター研究班A (@MNA61745180) <a href="https://twitter.com/MNA61745180/status/1391701934868893699?ref_src=twsrc%5Etfw">May 10, 2021</a></blockquote>
 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  • ダークモードでツイートを埋め込む方法

    ツイートの埋め込みコードにダークモード表示の記述「data-theme="dark"」を追加すると、このようなデザインになります

画像や動画を展開させずにツイートを埋め込む

ツイートを埋め込むと、通常は添付された画像や動画もホームページ上に表示されます。もし、添付された画像や動画を表示させたくない場合は、<blockquote class="twitter-tweet"> の後ろに「data-cards="hidden"」というコードを追加します。書き足す部分のコードと実際の表示は次の通りです。

<blockquote class="twitter-tweet" data-cards="hidden">
  • 画像・動画を展開させずにツイートを埋め込む1

    【カスタマイズ前】通常、画像付きツイートを埋め込むとこのように表示されます

  • 画像・動画を展開させずにツイートを埋め込む2

    【カスタマイズ後】画像や動画を表示させないコード「data-cards="hidden"」を使ってサイトに埋め込んだ場合、このような表示になります

返信ツイートだけを埋め込む（元のツイートを含めない）

埋め込みたいツイートが他者のツイートに返信する形で投稿されていた場合、取得したコードをそのまま埋め込むと他者の元ツイートもセットで表示されます。元ツイートを含めず、その返信ツイートのみを単独で表示したい場合は、<blockquote class="twitter-tweet"> の後ろに「data-conversation="none"」を追加します。

<blockquote class="twitter-tweet" data-conversation="none">
  • 返信ツイートだけを埋め込む（元のツイートを含めない）1

    【カスタマイズ前】通常の埋め込みコードでは、返信ツイートと元ツイートが一連のセットになって表示されます

  • 返信ツイートだけを埋め込む（元のツイートを含めない）2

    【カスタマイズ後】「data-conversation="none"」を追加して、返信ツイートだけを埋め込んだときの表示です。元ツイートは非表示になりました

次のページでは、Twitterのタイムラインを埋め込む方法を解説します。