SYNCER

SYNCER

Collection Timeline - コレクションをウェブサイトに埋め込む

公開日:

Twitterの、コレクションをウェブサイトやブログに埋め込む方法をまとめています。

Embedded Search Timeline
Embedded Search Timeline
Twitter Developersのウェブサイト(英語)。ツイートの検索結果を埋め込む方法について説明されています。

HTMLの場合

HTMLタグを記述して検索結果を埋め込む方法を説明します。

プログラミング

コードの記述

コレクションを埋め込み表示するには、class属性にウィジェットの種類を表すクラス名、href属性にコレクションのパーマリンクを指定します。a要素の中身は空でもかまいません。

HTML

<!-- ここにコレクションを表示 -->
<a class="{ウィジェットの種類}" href="{パーマリンク}">コレクション</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
グリッド表示の場合

画像や動画にフィーチャーしたグリッド形式で表示したい場合は、twitter-gridを指定します。

HTML

<a class="twitter-grid" href="https://twitter.com/arayutw/timelines/825229200869122048">コレクション</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
タイムライン表示の場合

タイムライン形式で表示したい場合は、twitter-timelineを指定します。

HTML

<a class="twitter-timeline" href="https://twitter.com/arayutw/timelines/825229200869122048">コレクション</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

パラメータの指定

パラメータを指定するには、a要素にdata-{パラメータ名}の属性を追加します。例えば、ツイートの数を制限するには次のようにtweet-limitを指定して下さい。グリッド形式の場合とタイムライン形式の場合で、指定できるパラメータが違うのでご注意下さい。

HTML

<!-- tweet-limitのパラメータを追加 -->
<a class="twitter-grid" data-limit="2" href="https://twitter.com/arayutw/timelines/825229200869122048">コレクション</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

デモを開く

サンプルコード

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>Twitterのコレクションを埋め込むデモ</title>
	</head>
<body>

<h1>Twitterのコレクションを埋め込むデモ</h1>
<p>Twitterのコレクションを、ウェブサイトに埋め込んでいます。サンプルのコレクションは<a href="https://twitter.com/arayutw/timelines/825229200869122048" target="_blank">こちら</a>です。</p>

<h2>グリッド形式</h2>
<!-- ここにコレクションを表示 -->
<a class="twitter-grid" href="https://twitter.com/arayutw/timelines/825229200869122048">コレクション</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

<h2>タイムライン形式</h2>
<!-- ここにコレクションを表示 -->
<a class="twitter-timeline" href="https://twitter.com/arayutw/timelines/825229200869122048">コレクション</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

</body>
</html>

デモを開く

デモ

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

グリッド形式

<a class="twitter-grid" href="https://twitter.com/arayutw/timelines/825229200869122048"
	data-limit="1"
	data-width="250"
	data-lang="ja"
	data-dnt="true"
>コレクション</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

タイムライン形式

<a class="twitter-timeline" href="https://twitter.com/arayutw/timelines/825229200869122048"
	data-show-replies="hidden"
	data-chrome="..."
	data-theme="light"
	data-width="350"
	data-height="300"
	data-tweet-limit="20"
	data-link-color="#D36015"
	data-border-color="#2660A1"
	data-aria-polite="polite"
	data-lang="ja"
></a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

JavaScriptの場合

JavaScriptでコレクションを埋め込み表示する方法を説明します。動的に埋め込み表示したい場合に有用です。

プログラミング

ライブラリの読み込み

JavaScriptを利用するためのライブラリを読み込んで下さい。

HTML

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

コンテナの用意

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

HTML

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

メソッドを実行

専用のメソッドを実行すれば、指定したコンテナにコレクションを埋め込み表示できます。グリッド形式の場合はtwttr.widgets.createGridFromCollection、タイムライン形式の場合はtwttr.widgets.createTimelineを実行します。第1引数にコレクションID、第2引数にコンテナの要素、第3引数にパラメータ、という順番で値を指定して下さい。指定できるパラメータは、表示形式によって違います。

グリッド形式の場合

JavaScript

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

// コレクションを埋め込み表示するメソッドを実行 (グリッド形式の場合)
twttr.widgets.createGridFromCollection (
	"825229200869122048" ,	// 第1引数: コレクションID
	container ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
		width: 300 ,	// 横幅
	}
) ;
タイムライン形式の場合

JavaScript

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

// コレクションを埋め込み表示するメソッドを実行 (タイムライン形式の場合)
twttr.widgets.createTimeline (
	{	// 第1引数: ウィジェットの種類
		sourceType: "collection",
		id: "825229200869122048",	// コレクションID
	},
	container ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
		width: 300 ,	// 横幅
	}
) ;

サンプルコード

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>JavaScriptでコレクションを埋め込み表示するデモ</title>
	</head>
<body>

<h1>JavaScriptでコレクションを埋め込み表示するデモ</h1>
<p>JavaScriptを利用して、指定した場所にコレクションを埋め込み表示するデモです。サンプルのリストは<a href="https://twitter.com/arayutw/timelines/825229200869122048" target="_blank">こちら</a>です。</p>

<h2>グリッド形式</h2>
<!-- コンテナ -->
<div id="tweet-collection-grid"></div>

<h2>タイムライン形式</h2>
<!-- コンテナ -->
<div id="tweet-collection-timeline"></div>

<!-- ライブラリの読み込み -->
<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>

<script>
// コレクションを埋め込み表示するメソッドを実行 (グリッド形式)
twttr.widgets.createGridFromCollection (
	"825229200869122048" ,	// 第1引数: コレクションID
	document.getElementById( "tweet-collection-grid" ) ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
//		width: 300 ,	// 横幅
	}
) ;

// コレクションを埋め込み表示するメソッドを実行 (タイムライン形式)
twttr.widgets.createTimeline (
	{	// 第1引数: ウィジェットの種類
		sourceType: "collection",
		id: "825229200869122048",	// コレクションID
	},
	document.getElementById( "tweet-collection-timeline" ) ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
//		width: 300 ,	// 横幅
	}
) ;
</script>
</body>
</html>

デモを開く

デモ

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

グリッド形式

twttr.widgets.createGridFromCollection (
	"825229200869122048" ,	// 第1引数: コレクションID
	container ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
   		limit: 1 ,
   		width: 250 ,
   		lang: "ja" ,
//		dnt: true ,
	}
) ;

タイムライン形式

twttr.widgets.createTimeline (
	{
		sourceType: "collection",
		id: "825229200869122048" ,	// コレクションID
	} ,
	container ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
   		showReplies: "hidden" ,
   		chrome: "..." ,
   		theme: "light" ,
   		width: 350 ,
   		height: 300 ,
		tweetLimit: 20 ,
   		linkColor: "#D36015" ,
   		borderColor: "#2660A1" ,
   		ariaPolite: "polite" ,
   		lang: "ja" ,
	}
) ;

情報の確認方法

コレクションを埋め込むための、各種情報の確認方法を説明します。

コレクションのパーマリンクの例です。

https://twitter.com/arayutw/timelines/825229200869122048[LINK]

コレクションID

コレクションIDはパーマリンクで確認できます。

https://twitter.com/arayutw/timelines/825229200869122048

パラメータ

パラメータを指定すると、ウィジェットの表示を調整できます。グリッド形式とタイムライン形式では、指定できるパラメータが違います。

グリッド形式

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

タイムライン形式

show-replies / showReplies
hiddenを指定すると、リプライのツイートが表示されない。HTMLの場合はshow-replies、JavaScriptの場合はshowReplies。
chrome
ウィジェットのデザインをキーワードで調整する。複数指定する場合は、半角スペース( )で区切ること。
noheader
ヘッダーを非表示にする。
nofooter
フッターを非表示にする。
noborders
ボーダーを非表示にする。
noscrollbar
スクロールバーを非表示にする。
transparent
背景を透過する。
theme
カラーテーマ。dark、またはlightを指定できる。
width
ピクセルを表す数値を指定すると、その横幅で表示される。180以上の数値。
height
ピクセルを表す数値を指定すると、その高さで表示される。tweet-limitを指定した場合、このパラメータは無視される。
tweet-limit / tweetLimit
ツイートの数を1〜20で表示する。HTMLの場合はtweet-limit、JavaScriptの場合はtweetLimit。
link-color / linkColor
カラーコード(例: #D36015など)を指定すると、ツイートに含まれるリンクがその色になる。HTMLの場合はlink-color、JavaScriptの場合はlinkColor。
border-color / borderColor
カラーコード(例: #D36015など)を指定すると、ウィジェットのボーダーがその色になる。HTMLの場合はborder-color、JavaScriptの場合はborderColor。
aria-polite / ariaPolite
W3Cで定義されているWAI-ARIA標準の、aria-politeの値。polite(初期値)、assertive、rudeから選択する。スクリーンリーダーなどでの閲覧に影響がある。HTMLの場合はaria-polite、JavaScriptの場合はariaPolite。
lang
UIの言語を、言語コードで指定する。日本の場合はja、英語の場合はen。