ホームページで記事コンテンツを作成する際、Twitterで発信されたツイートを引用してよりわかりやすく表記するという方法があります。
事実を述べることに加えて、ツイートを埋め込むことでわかりやすく見やすいコンテンツ作成が可能になる場合があります。

今回は、Twitter内でつぶやかれた内容をホームページに埋め込む方法を解説します。
最後に、利用する際に気をつけるべき著作権についても触れていますので、ぜひ参考にしてみてください。

埋め込みツイートとは

Twitterでつぶいやいた内容を、ホームページやブログの記事内に表示できる機能です。
この機能を利用すると、Twitter内で発信された情報をふまえたコンテンツを作成しやすくなります。

埋め込むことができるツイート内容は、以下の3つです。

・ツイートのテキストのみ
・テキストとともにツイート内に含まれる画像も表示する(画像が含まれる場合のみ)
・テキストとともにツイート内に含まれる動画も表示する(動画が含まれる場合のみ)

動画を表示する際は、ホームページ上には動画のサムネイルが表示されており、再生ボタンをクリックすることでホームページ上で再生させることが可能です。

ツイートを埋め込む方法

ツイートをホームページ上に埋め込む方法は、大きく2つがあります。
どちらも一度覚えてしまえば難しい操作ではありませんので、自身の運営するホームページの仕様に適した方法を選択してください。

・ツイートのURLをペーストする
・ツイートの埋め込みコードを取得してペーストする

ツイートの埋め込みコードを取得してペーストする場合のみ、さまざまなカスタマイズを行えます。
カスタマイズを行う際は、取得したコードに以下でご紹介するコードを追加してペーストしてください。

なお、各コードは「“ja”」の後に半角スペースを入れた後ろに入力してください。

参考：<blockquote class="twitter-tweet" data-lang=“ja" align=“left"><p lang="ja" dir="ltr”>

左、中央、右よせ

特にカスタマイズをせずにコードをそのままペーストした場合、以下のようにテキストは左寄せで表示されます。
5.png

ホームページの仕様上、左寄せではなく中央または右寄せにしたい場合は、blockquoteタグ内に以下のコードを使用してください。

・左寄せ：align=“left"
・中央寄せ：align=“center"
・右寄せ：align=“right"

色を変更する

ホームページのイメージカラーに合わせたツイートの埋め込みをしたい場合に使用できる方法です。
リンクの色、背景色を変更することが可能です。

・リンクの色：data-link-color=“#000000”
カラーコードについては、紹介されているホームページが多数ありますので使用したい色のコードを「””」内に入力してください。

・背景色：data-theme=“dark”
背景色は「dark」または「light」のいずれかを選択することができます。
特に設定しない場合は、lightの状態で表示されます。

幅・高さを調節する

あまりに大きなサイズを指定しても反映されませんが、多少であれば幅・高さを指定することがで可能です。

・幅：width="300"
・高さ：height="500"

手順

step1.

1.png
まずはTwitterにログインしておきます。
ホームページ上に埋め込みたいツイートを開くと表示されている、「…」マークをクリックしてください。

step2.

2.png
4つのメニューが表示されますので、ツイートのURLをペーストする場合はこの中から「ツイートへのリンクをコピー」を選択してください。
ツイートの埋め込みコードを取得してペーストする場合は「ツイートをサイトに埋め込む」を選択してください。

step3.

3.png
ツイートのURLをペーストする場合、ツイートへのリンクURLが表示されますので、コピー＆ペーストを行ってください。

4.png
ツイートの埋め込みコードを取得してペーストする場合、埋め込みコードが表示されます。

これで埋め込みは完了です。