SYNCER

SYNCER

List Timeline - リストをウェブサイトに埋め込む

公開日:

Twitterのリストのタイムラインをウェブサイトやブログに埋め込む方法をまとめています。

Embedded List Timeline
Embedded List Timeline
Twitter Developersのウェブサイト(英語)。リストのタイムラインを埋め込む方法について説明されています。

HTMLの場合

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

プログラミング

コードの記述

次のHTMLを表示したい場所に記述して下さい。表示したいリストのパーマリンクを指定する必要があります。a要素の中身は空でも問題ありません。

HTML

<a class="twitter-timeline"
  href="{リストのパーマリンク}">
Tweets from {リストのパーマリンク}
</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

パラメータの指定

パラメータを指定するには、a要素にdata-{パラメータ名}の属性を追加します。例えば、ツイートの数を制限するには次のようにtweet-limitを指定して下さい。

HTML

<!-- tweet-limitのパラメータを追加 -->
<a class="twitter-timeline" data-tweet-limit="2"
  href="{リストのパーマリンク}">
Tweets from {リストのパーマリンク}
</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/lists/list" target="_blank">こちら</a>です。</p>

<!-- ユーザータイムラインを表示する -->
<a class="twitter-timeline"
  href="https://twitter.com/arayutw/lists/list">
Tweets from https://twitter.com/arayutw/lists/list
</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

</body>
</html>

デモを開く

デモ

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

<a class="twitter-timeline" href="https://twitter.com/arayutw/lists/list"
	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の場合と同じものです。

HTML

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

コンテナの用意

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

HTML

<div id="tweet-list-timeline"></div>

メソッドを実行

専用のメソッド(twttr.widgets.createTimeline)を実行すれば、指定したコンテナにリストを埋め込み表示できます。第1引数に作成者のスクリーンネームスラッグ、第2引数にコンテナの要素、第3引数にパラメータ、という順番で値を指定して下さい。

JavaScript

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

// リストを埋め込み表示するメソッドを実行
twttr.widgets.createTimeline (
	{	// 第1引数: ウィジェットの種類
		sourceType: "list" ,
		ownerScreenName: "arayutw" ,	// リスト作成者のスクリーンネーム
		slug: "list" ,	// リストのスラッグ
	} ,
	container ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
		width: 300 ,	// 横幅
		tweetLimit: 4 ,	// ツイートの数
	}
) ;

サンプルコード

HTML (index.html)

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

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

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

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

// ユーザータイムラインを埋め込み表示するメソッドを実行
twttr.widgets.createTimeline (
	{	// 第1引数: ウィジェットの種類
		sourceType: "list" ,
		ownerScreenName: "arayutw" ,	// リスト作成者のスクリーンネーム
		slug: "list" ,	// リストのスラッグ
	} ,
	container ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
		width: 300 ,	// 横幅
		tweetLimit: 4 ,	// ツイートの数
	}
) ;
</script>
</body>
</html>

デモを開く

デモ

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

twttr.widgets.createTimeline (
	{	// 第1引数: ウィジェットの種類
		sourceType: "list" ,
		ownerScreenName: "arayutw" ,	// リスト作成者のスクリーンネーム
		slug: "list" ,	// リストのスラッグ
	} ,
	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/lists/list[LINK]

作成者

リスト作成者のスクリーンネームは、パーマリンクの下記部分(arayutw)です。

https://twitter.com/arayutw/lists/list

スラッグ

リストにはそれぞれ、スラッグが割り振られています。リストのスラッグは、パーマリンクの下記部分(list)です。

https://twitter.com/arayutw/lists/list

パラメータ

パラメータを指定すると、埋め込んだリストの表示を調整できます。

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
ツイートの数を120で表示する。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(初期値)、assertiverudeから選択する。スクリーンリーダーなどでの閲覧に影響がある。HTMLの場合はaria-polite、JavaScriptの場合はariaPolite
lang
UIの言語を、言語コードで指定する。日本の場合はja、英語の場合はen