Moment - モーメントをウェブサイトに埋め込む

公開日: 2017/01/22

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

Embedded Moment: Twitter Developersのウェブサイト(英語)。モーメントを埋め込む方法について説明されています。

HTMLの場合

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

プログラミング

コードの取得

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

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

コードの記述

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

HTML

<a class="twitter-moment" href="https://twitter.com/i/moments/781785957909475328">旅行の思い出</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

パラメータの指定

パラメータを指定するには、a要素にdata-{パラメータ名}の属性を追加します。例えば、ツイートの数を調整したい場合は、次のようにしてlimitというパラメータに数を指定します。

HTML

<!-- limitのパラメータを追加 -->
<a class="twitter-moment" data-limit="2" href="https://twitter.com/i/moments/781785957909475328">旅行の思い出</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

デモを開く

サンプルコード

HTML (index.html)

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

<h1>モーメントを埋め込むデモ</h1>
<p>モーメントをウェブサイトに埋め込んでいます。元のモーメントは<a href="https://twitter.com/i/moments/781785957909475328" target="_blank">こちら</a>です。</p>

<!-- モーメントを表示する -->
<a class="twitter-moment" href="https://twitter.com/i/moments/781785957909475328">旅行の思い出</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

</body>
</html>

デモを開く

デモ

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

旅行の思い出

<a class="twitter-moment"
	data-limit="2"
	data-width="250"
	data-lang="ja"
	data-dnt="true"
href="https://twitter.com/i/moments/781785957909475328">旅行の思い出</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

JavaScriptの場合

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

プログラミング

ライブラリの読み込み

JavaScriptを利用するためのライブラリを読み込んで下さい。HTMLの場合と同じものです。

HTML

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

コンテナの用意

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

HTML

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

メソッドを実行

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

JavaScript

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

// モーメントを埋め込み表示するメソッドを実行
twttr.widgets.createMoment (
	"781785957909475328" ,	// 第1引数: モーメントID
	container ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
		limit: 4 ,
		width: 500 ,
		lang: "ja" ,
		dnt: true ,
	}
) ;

サンプルコード

HTML (index.html)

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

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

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

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

// モーメントを埋め込み表示するメソッドを実行
twttr.widgets.createMoment (
	"781785957909475328" ,	// 第1引数: モーメントID
	container ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
		limit: 4 ,
		width: 500 ,
		lang: "ja" ,
		dnt: true ,
	}
) ;
</script>
</body>
</html>

デモを開く

デモ

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

旅行の思い出

twttr.widgets.createMoment (
	"781785957909475328" ,	// 第1引数: モーメントID
	container ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
   		limit: 2 ,
   		width: 220 ,
   		lang: "ja" ,
//		dnt: true ,
	}
) ;

パラメータ

パラメータを指定すると、モーメントの表示を調整できます。

limit: 表示するツイートの数。
width: ピクセルを表す数値を指定すると、その横幅で表示される。220以上の数値。
lang: UIの言語を、言語コードで指定する。日本の場合はja、英語の場合はen。
dnt: ユーザーが、埋め込んだモーメントを操作するなどして送信されたデータが、Twitterがユーザーにお勧め情報などを表示するのに活用することを拒否するか否か。デフォルトはfalseで許可している状態。trueを指定すると拒否できる。