List Timeline - リストをウェブサイトに埋め込む
公開日:
Twitterのリストのタイムラインをウェブサイトやブログに埋め込む方法をまとめています。
- 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
- ツイートの数を
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
。