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

広告

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

1.ツイートの埋め込み
2.画像や動画などを展開して埋め込むかどうか
3.元のツイートを含めるかどうか
4.埋め込まれたツイートの幅を指定
5.ツイートの配置指定
6.リンクの色とテーマ

ツイートをWebサイトやブログに埋め込むためにツイート毎にコードを取得できるようになっています。タイムラインなどで埋め込みたいツイートを見つけたらツイートにマウスを合わせて下さい。

p31-1

マウスを合わせるとツイートの下の方にいくつかリンクが表示されます。その中から「その他」と書かれたリンクをクリックすると「ツイートをサイトに埋め込む」と書かれたメニューが表示されますのでクリックして下さい。

p31-2

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

p31-3

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

<blockquote class="twitter-tweet"><p>国立国会図書館に行ってみたいな。 <a href="http://t.co/ol6M1dwYMO">http://t.co/ol6M1dwYMO</a></p>&mdash; フクロウ風子 (@fukuroufuuko) <a href="https://twitter.com/fukuroufuuko/statuses/388202585036816384">October 10, 2013</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

では取得したコードをブログに挿入してみます。コードが書き込めるブログである必要があります。今回はBloggerのブログで試してみました。

p31-4

ブログを実際に表示してみると、次のようにツイートがブログの記事の中に表示されています。

p31-5

埋め込まれたツイートには元のツイートへのリンクなどが設定されている他に、右上はツイートのアカウントをフォローするためのボタン、右下には「返信」「リツイート」「お気に入り」に入れるためのボタンも表示されています。

p31-6

このように公式で用意されているツイートの埋め込み機能を使うことで非常に簡単に任意のツイートをブログに埋め込むことができます。

先ほどの埋め込みを行ったツイートは画像や動画といったものが含まれていませんでした。もし埋め込みたいツイートに画像や動画やTwitter Cardsなどが含まれていた場合には、それらを展開した状態で埋め込むかどうか選択することができます。

例えば次のようなツイートを埋め込む場合で試してみます。

p31-7

このツイートには画像が含まれていますので、ツイートを開くと次のように表示されます。

p31-8

埋め込みコードを取得するために「その他」から「ツイートをサイトに埋め込む」メニューをクリックします。

p31-9

画像や動画が含まれる場合は次のようなプレビューが表示されます。

p31-10

プレビューに表示されている「メディアを含める」にチェックが入っている場合は、ツイートに画像や動画やTwitter Cardsが展開された状態で埋め込みが行われます。実際にここに表示されたコードをブログに埋め込んでみると次のように表示されました。

p31-11

ツイートだけを埋め込んで画像などはリンクの形で表示したい場合は「メディアを含める」のチェックを外して下さい。プレビューが次のように変わります。

p31-12

変更されたコードをブログに埋め込むと画像は展開されずにリンクだけになるはずですが、実際にはなりませんでした。これは「メディアを含める」にチェックを入れたり外したりをしてコードを比較してみると分かるのですがコードが何も変わっていないためです。Twitterの一時的な不具合だとは思いますが、当面は下記のように手動でコードの変更を行って下さい。

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

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

メディアを含めたくない場合には次の個所に「data-cards="hidden"」を追加して下さい。

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

変更したコードをブログに埋め込むと次のように画像はリンクとして表示されます。

p31-13

不具合が解消されればチェックを外すだけで画像がリンクとして埋め込まれると思いますので、不具合が解消されるまでは上記のように手動で対応をして下さい。

あるツイートに返信したツイートをブログに埋め込みたい場合があります。例えば次のような一連のツイートの真ん中のツイートを埋め込む場合です。

p31-14

このツイートの埋め込みコードを取得しようとすると次のように元のツイートが付いた状態でプレビューが表示されます。

p31-15

このコードをそのままブログに埋めこむと埋め込みたいツイートに加えて元のツイートも含めて埋め込まれます。

p31-16

もし元のツイートを含めずに埋め込みたい場合には、プレビューの画面で「元のツイートを含める」のチェックを外して下さい。プレビューが次のように変わります。

p31-17

変更されたコードをブログに埋め込むと元のツイートは含まれずに埋め込まれるはずですが、実際にはなりませんでした。これは「メディアを含める」かどうかの時と同じくチェックを入れたり外したりをしてもコードが何も変わっていないためです。Twitterの一時的な不具合だとは思いますが、当面は下記のように手動でコードの変更を行って下さい。

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

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

元のツイートを含めたくない場合には次の個所に「data-conversation="none"」を追加して下さい。

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

変更したコードをブログに埋め込むと次のように元のツイートは含まれずにツイートが埋め込まれます。

p31-18

こちらも不具合が解消されるまでは上記のように手動で対応をして下さい。

ツイートを埋め込むとデフォルトでは幅が500pxに設定されます。

p31-19

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

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

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

p31-20

ツイートを埋め込んだ時、デフォルトでは特に配置は指定されていませんが、右寄せや中央揃えにしたい場合には次の個所に「align="xxx"」を追加して下さい。指定できる値は「aling="left"」「align="center"」「align="right"」のいずれかです。下記は右寄せにした場合です。

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

変更したコードをブログに埋め込むと次のように埋め込んだツイートが右寄せで表示されます。(分かりやすいように横幅のサイズも同時に指定しています)。

p31-21

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

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

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

p31-22

またリンクの色だけでなく、全体を明るい配色にするのか暗い感じの配色にするのかといったテーマを設定することができます。テーマを指定する場合には次の個所に「data-theme="light"」又は「data-theme="dark"」を追加して下さい。

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

今回はそれぞれのテーマを設定した二つのツイートを埋め込んでみました。上が「light」で下が「dark」となります。

p31-23

----

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

( Written by Tatsuo Ikura+ )