特定のツイートをWebサイトやブログに埋め込む

広告

自分や他の人がツイートしたものは簡単にWebサイトやブログの中に埋め込むことができる仕組みが用意されています。(ただしHTMLやJavaScriptコードが書き込めるブログである必要があります)。ここではツイートをブログなどに埋め込む方法について解説します。また埋め込むツイートの表示方法をカスタマイズする方法も合わせてご紹介します。

1.ツイートを埋め込むためのコードを取得する
2.画像や動画などを展開して埋め込むかどうか
3.元のツイートを含めるかどうか
4.埋め込まれたツイートの幅を指定する
5.ツイートの水平方向の配置を指定する
6.リンクの色とテーマを設定する
7.言語を設定する

ツイートをブログやWebサイトに埋め込むためのコードを取得する方法を確認します。タイムラインなどに表示されている自分や他のユーザーのツイートの中で、埋め込みたいツイートに表示されている矢印をクリックして下さい。

p31-1

表示されたメニューの中から「ツイートをサイトに埋め込む」をクリックして下さい。

p31-2

次のようなウィンドウが表示されます。画面上部にはブログなどに埋め込むためのコード、そして下部には埋め込んだ時にどのように表示されるのかのプレビューが表示されています。

p31-3

画面上部に表示されたコードをコピーして下さい。今回のツイートの場合は次のようなコードです。

<blockquote class="twitter-tweet" data-lang="ja">
<p lang="ja" dir="ltr">みなさんご存知!アオイちゃんのお話<a href="https://t.co/NGgRyVYmSv">https://t.co/NGgRyVYmSv</a></p>
&mdash; 名古屋市東山動植物園 (@higashiyamapark) <a href="https://twitter.com/higashiyamapark/status/823318740834091009">2017年1月22日</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

コードの構成を見てみると次のような感じになっています。

<blockquote class="twitter-tweet" data-lang="ja">
<p lang="ja" dir="ltr">[ツイート本文]</p>
&mdash; [名前] (@[ユーザー名]) <a href="[該当ツイートへのURL]">[ツイート日時]</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

では取得したコードをブログに挿入してみます。今回はBloggerのブログで試してみました。

p31-4

記事を投稿しブログを表示してみると、記事の中に埋め込んだツイートが次のように表示されます。

p31-5

このようにツイート事に用意されている埋め込みようコードを使うことで、簡単にツイートをブログやWebサイトに埋め込むことができます。

ツイートに画像や動画などが含まれていた場合、ツイートをブログなどに埋め込む時にツイートに含まれる画像や動画を最初から表示するかどうかを選択することができます。例えば次のようなツイートを例に試してみます。

p31-6

埋め込みコードを取得する画面を表示すると次のように「メディアを含める」かどうかの選択ができるようになっています。

p31-7

「メディアを含める」にチェックをした場合のコードは次のようになっています。

<blockquote class="twitter-tweet" data-lang="ja">
・・・
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

「メディアを含める」のチェックを外した場合コードは次のようになっており、「data-cards="hidden"」という記述が追加されています。

<blockquote class="twitter-tweet" data-cards="hidden" data-lang="ja">
・・・
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

それではそれぞれの埋め込みコードを実際にブログに埋め込んでどのように表示されるのか確認してみます。まずは「メディアを含める」にチェックをした場合です。

p31-8

ツイートに含まれていた画像も含めてツイートが表示されています。

次に「メディアを含める」のチェックを外した場合です。

p31-9

ツイートに含まれる画像は表示されず、代わりに画像へのリンクが含まれたツイートが表示されています。このようにブログなどにツイートを埋め込む時に、画像や動画を最初から表示するかどうかを選択することができます。

自分宛てのツイートに返信を行ったツイートなどをブログに埋め込む場合、元のツイートも含めて埋め込むかどうか選択することができます。例えば次のように返信を行ったツイートをブログに埋め込む場合です。

p31-10

埋め込みコードを取得する画面を表示すると次のように「元のツイートを含める」かどうかの選択ができるようになっています。

p31-11

「元のツイートを含める」にチェックをした場合のコードは次のようになっています。

<blockquote class="twitter-tweet" data-lang="ja">
・・・
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

「元のツイートを含める」のチェックを外した場合コードは次のようになっており、「data-conversation="none"」という記述が追加されています。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja">
・・・
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

それではそれぞれの埋め込みコードを実際にブログに埋め込んでどのように表示されるのか確認してみます。まずは「元のツイートを含める」にチェックをした場合です。

p31-12

返信を行った元のツイートも含めてツイートが表示されています。

次に「元のツイートを含める」のチェックを外した場合です。

p31-13

返信を行った元のツイートは含まれず、コードを取得したツイートだけが表示されています。このように返信などを行ったツイートを埋め込む時に、元のツイートを一緒に埋め込むかどうかを選択できます。

ブログなどに埋め込んだツイートの最大幅を設定することができます。特に指定しなかった場合、測ってみると500ピクセルになっているようです。

p31-14

幅のサイズを明示的に指定する場合には次の個所に「width="xxx"」を追加して下さい。設定できる値は 250 から 550 までの間の数値です。下記は350pxに設定する場合です。

<blockquote class="twitter-tweet" data-lang="ja" width="350">
<p lang="ja" dir="ltr">[ツイート本文]</p>
&mdash; [名前] (@[ユーザー名]) <a href="[該当ツイートへのURL]">[ツイート日時]</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

変更したコードをブログに埋め込むと次のようにツイートの幅が指定したサイズで埋め込まれます。

p31-15

ツイートの水平方向の配置について指定することができます。設定できる値は「left」「right」「center」のいずれかで、次の個所に「align="xxx"」を追加して下さい。下記は「center」に設定する場合です。

<blockquote class="twitter-tweet" data-lang="ja" align="center">
<p lang="ja" dir="ltr">[ツイート本文]</p>
&mdash; [名前] (@[ユーザー名]) <a href="[該当ツイートへのURL]">[ツイート日時]</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

変更したコードをブログに埋め込むと次のようにツイートがページの真ん中に配置されます。(分かりやすいようにツイートの幅を狭くしてあります)。

p31-16

ツイートにリンクが含まれていた場合、リンクの色を指定することができます。リンクの色を指定する場合には次の個所に「data-link-color="色コード"」を追加して下さい。下記は色を「#ff0000」に設定する場合です。

<blockquote class="twitter-tweet" data-lang="ja" data-link-color="#ff0000">
<p lang="ja" dir="ltr">[ツイート本文]</p>
&mdash; [名前] (@[ユーザー名]) <a href="[該当ツイートへのURL]">[ツイート日時]</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

変更したコードをブログに埋め込むと次のようにリンクの色が指定した色で表示されます。

p31-17

またツイートの背景を暗い色にすることもできます。テーマを指定する場合には次の個所に「data-theme="dark"」を追加して下さい。

<blockquote class="twitter-tweet" data-lang="ja" data-theme="dark">
<p lang="ja" dir="ltr">[ツイート本文]</p>
&mdash; [名前] (@[ユーザー名]) <a href="[該当ツイートへのURL]">[ツイート日時]</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

変更したコードをブログに埋め込むと次のように背景が暗い色で文字が明るい色の配色に変更されて表示されます。

p31-18

ツイートに表示される「フォローする」などの文字やツイートの時刻などの表示で使われる言語を設定できます。言語を設定する場合は現在「data-lang="ja"」となっている部分を別の言語を表す単語に変更して下さい。下記は言語を英語にするため「en」を設定しています。

<blockquote class="twitter-tweet" data-lang="en">
<p lang="ja" dir="ltr">[ツイート本文]</p>
&mdash; [名前] (@[ユーザー名]) <a href="[該当ツイートへのURL]">[ツイート日時]</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

変更したコードをブログに埋め込むと次のようにツイートの中で使用される言語が英語に変更されて表示されます。(ツイートの内容が英語になるわけではありません)。

p31-19

----

以上、ツイートをブログに埋め込む方法と表示方法をカスタマイズする方法について解説いたしました。カスタマイズする場合はコードを直接自分で編集しなければないない場合もありますが難易度は低いと思います。是非自分のブログに合う形にカスタマイズされてみて下さい。

Twitterの使い方 記事一覧へ戻る

( Written by Tatsuo Ikura+ )