Single Tweet - ツイートをウェブサイトに埋め込む

公開日: 2017/01/22

Twitterの個別のツイートをウェブサイトやブログに埋め込む方法をまとめています。

Embed a Single Tweet: Twitter Developersのウェブサイト(英語)。個別のツイートを埋め込む方法について説明されています。

HTMLの場合

HTMLタグを記述してツイートを埋め込む方法を説明します。誰でもできる手軽な方法です。

プログラミング

コードの取得

埋め込みたいツイートの個別ページにアクセスして、メニューを開いて「ツイートをサイトに埋め込む」をクリックして下さい。

埋め込み用のHTMLコードが表示されるので、これをコピーして下さい。

コードの記述

次のようなHTMLをコピーできるはずです。これをウェブページのHTMLに記述すれば、その場所にツイートが表示されます。

HTML

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">朝の羽田空港。偶然、日の出。 <a href="https://t.co/AJC8prsY6n">pic.twitter.com/AJC8prsY6n</a></p>&mdash; あらゆ (@arayutw) <a href="https://twitter.com/arayutw/status/819568298794754049">2017年1月12日</a></blockquote>
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>

パラメータの指定

パラメータを指定するには、blockquote要素にdata-{パラメータ名}の属性を追加します。例えば、ツイートを右寄せで表示したい場合は、次のようにしてalignというパラメータにrightを指定します。

HTML

<!-- alignのパラメータを追加 -->
<blockquote class="twitter-tweet" data-lang="ja" data-align="right"><p lang="ja" dir="ltr">朝の羽田空港。偶然、日の出。 <a href="https://t.co/AJC8prsY6n">pic.twitter.com/AJC8prsY6n</a></p>&mdash; あらゆ (@arayutw) <a href="https://twitter.com/arayutw/status/819568298794754049">2017年1月12日</a></blockquote>
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>

デモを開く

もう1つ、今度はcardsというパラメータにhiddenを指定してみましょう。メディアファイルが表示されなくなります。

HTML

<!-- cardsのパラメータを追加 -->
<blockquote class="twitter-tweet" data-lang="ja" data-align="right" data-cards="hidden"><p lang="ja" dir="ltr">朝の羽田空港。偶然、日の出。 <a href="https://t.co/AJC8prsY6n">pic.twitter.com/AJC8prsY6n</a></p>&mdash; あらゆ (@arayutw) <a href="https://twitter.com/arayutw/status/819568298794754049">2017年1月12日</a></blockquote>
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>

デモを開く

サンプルコード

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>ツイートを埋め込むデモ</title>
	</head>
<body>

<h1>ツイートを埋め込むデモ</h1>
<p>個別のツイートを、ウェブサイトに埋め込んでいます。元のツイートは<a href="https://twitter.com/arayutw/status/819568298794754049" target="_blank">こちら</a>です。</p>

<!-- ツイートを表示する -->
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">朝の羽田空港。偶然、日の出。 <a href="https://t.co/AJC8prsY6n">pic.twitter.com/AJC8prsY6n</a></p>&mdash; あらゆ (@arayutw) <a href="https://twitter.com/arayutw/status/819568298794754049">2017年1月12日</a></blockquote>
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>

</body>
</html>

デモを開く

デモ

値を調整して、各パラメータがどのように反映されるのか確かめることができます。

pic.twitter.com/Ek0h0Bco55
— あらゆ (@arayutw) 2016年12月19日

<blockquote class="twitter-tweet"
	data-cards="hidden"
	data-conversation="none"
	data-theme="light"
	data-link-color="#D36015"
	data-width="350"
	data-align="center"
	data-lang="ja"
	data-dnt="true"
><p lang="ja" dir="ltr">朝の羽田空港。偶然、日の出。 <a href="https://t.co/AJC8prsY6n">pic.twitter.com/AJC8prsY6n</a></p>&mdash; あらゆ (@arayutw) <a href="https://twitter.com/arayutw/status/819568298794754049">2017年1月12日</a></blockquote>
<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>

JavaScriptの場合

JavaScriptを利用してツイートを埋め込む方法を説明します。動的にツイートを埋め込み表示したい場合に有用です。

プログラミング

ライブラリの読み込み

JavaScriptを利用するためのライブラリを読み込んで下さい。これは、HTMLで埋め込みツイートを表示する時と同じものです。

HTML

<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>

コンテナの用意

ツイートを表示するためのコンテナを用意して下さい。空要素で大丈夫です。中身は、ツイートが表示された後も残るのでご注意下さい。id属性は後ほど要素を取得するために付けるものなので、名前は何でも大丈夫です。

HTML

<div id="tweet-container"></div>

メソッドを実行

専用のメソッド(twttr.widgets.createTweet)を実行すれば、指定したコンテナにツイートを埋め込み表示することができます。第1引数は表示するツイートのID、第2引数はコンテナの要素、第3引数はパラメータという順番で、引数を指定して下さい。

JavaScript

// コンテナを取得
var container = document.getElementById( "tweet-container" ) ;

// ツイートを埋め込み表示するメソッドを実行
twttr.widgets.createTweet (
	"819568298794754049" ,	// 第1引数: ツイートID
	container ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
		theme: "dark" ,
	}
) ;

サンプルコード

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>JavaScriptで埋め込みツイートを表示するデモ</title>
	</head>
<body>

<h1>JavaScriptで埋め込みツイートを表示するデモ</h1>
<p>JavaScriptを利用して、指定した場所に埋め込みツイートを表示するデモです。元のツイートは<a href="https://twitter.com/arayutw/status/819568298794754049" target="_blank">こちら</a>です。</p>

<!-- コンテナ -->
<div id="tweet-container"></div>

<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
<script>
// コンテナを取得
var container = document.getElementById( "tweet-container" ) ;

// ツイートを埋め込み表示するメソッドを実行
twttr.widgets.createTweet (
	"810830501347020800" ,	// ツイートID
	container ,	// コンテナの要素
	{	// パラメータ
//		cards: "hidden" ,
//		conversation: "none" ,
   		theme: "dark" ,
//		link-color: "#D36015" ,
   		width: 250 ,
   		align: "center" ,
//		lang: "ja" ,
//		dnt: true ,
	}
) ;
</script>
</body>
</html>

デモを開く

デモ

値を調整して、どのように反映されるのか確認できます。ツイートのIDを変更してみましょう。

Canonで撮影してみた。その2 pic.twitter.com/0Wsp2NBS01
— あらゆ (@arayutw) 2016年12月19日

twttr.widgets.createTweet (
	"810830501347020800" ,	// 第1引数: ツイートID
	container ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
   		cards: "hidden" ,
   		conversation: "none" ,
//		theme: "light" ,
//		linkColor: "#D36015" ,
   		width: 350 ,
   		align: "center" ,
//		lang: "ja" ,
//		dnt: true ,
	}
) ;

パラメータ

パラメータを指定すると、埋め込みツイートの表示を調整できます。

cards: hiddenを指定すると、ツイートの画像や動画が非表示になる。
conversation: 埋め込んだツイートがリプライの場合、通常はリプライ先のツイートも表示される。noneを指定すると、リプライ先のツイートは表示されない。
theme: カラーテーマ。dark、またはlightを指定できる。
link-color / linkColor: カラーコード(例: #D36015など)を指定すると、ツイートに含まれるリンクがその色になる。HTMLの場合はlink-color、JavaScriptの場合はlinkColor。
width: ピクセルを表す数値を指定すると、その横幅で表示される。250〜550の間で指定できる。
align: ツイートを寄せる方向。center、right、leftのどれかを指定できる。
lang: UIの言語を、言語コードで指定する。日本の場合はja、英語の場合はen。
dnt: ユーザーが、埋め込んだツイートを操作するなどして送信されたデータが、Twitterがユーザーにお勧め情報などを表示するのに活用することを拒否するか否か。デフォルトはfalseで許可している状態。trueを指定すると拒否できる。