Single Tweet - ツイートをウェブサイトに埋め込む
公開日:
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>— あらゆ (@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>— あらゆ (@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>— あらゆ (@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>— あらゆ (@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>
デモ
値を調整して、各パラメータがどのように反映されるのか確かめることができます。
— あらゆ (@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>— あらゆ (@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
を指定すると拒否できる。