User Timeline - ユーザータイムラインをウェブサイトに埋め込む
公開日:
Twitterのユーザーのタイムラインをウェブサイトに埋め込む方法をまとめています。ブログのサイドバーなどに埋め込めば、ユーザーに簡単に自分の近況を伝えられます。
- Embedded User Timeline
- Twitter Developersのウェブサイト(英語)。ユーザーのタイムラインを埋め込む方法について説明されています。
HTMLの場合
HTMLタグを記述してタイムラインを埋め込む方法を説明します。誰でもできる手軽な方法です。
プログラミング
コードの記述
次のHTMLを、タイムラインを表示したい場所に記述して下さい。カスタマイズする必要があるのは、スクリーンネーム(例: @arayutw)の部分だけです。a要素の中身(Tweets by ...
)はあってもなくてもかまいません。
HTML
<a class="twitter-timeline"
href="https://twitter.com/{screen_name}">
Tweets by @{screen_name}
</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
パラメータの指定
パラメータを指定するには、a要素にdata-{パラメータ名}
の属性を追加します。例えば、ツイートの数を制限するには次のようにtweet-limit
を指定して下さい。
HTML
<!-- tweet-limitのパラメータを追加 -->
<a class="twitter-timeline"
href="https://twitter.com/{screen_name}" data-tweet-limit="2">
Tweets by @{screen_name}
</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
もう1つ例を出します。タイムラインのウィジェットの高さを400pxに制限したい場合は、height
のパラメータを追加して下さい。
HTML
<a class="twitter-timeline"
href="https://twitter.com/{screen_name}" data-tweet-limit="20" data-height="400">
Tweets by @{screen_name}
</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/SyncerJP" target="_blank">こちら</a>です。</p>
<!-- ユーザータイムラインを表示する -->
<a class="twitter-timeline" href="https://twitter.com/SyncerJP">Tweets by @SyncerJP</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
デモ
値を調整して、各パラメータがどのように反映されるのか確かめることができます。
<a class="twitter-timeline" href="https://twitter.com/SyncerJP"
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-user-timeline"></div>
メソッドを実行
専用のメソッド(twttr.widgets.createTimeline
)を実行すれば、指定したコンテナにユーザータイムラインを埋め込み表示することができます。第1引数のscreenName
には対象ユーザーのスクリーンネーム、第2引数にはコンテナの要素、第3引数にはパラメータを指定して下さい。
JavaScript
// コンテナを取得
var container = document.getElementById( "tweet-user-timeline" ) ;
// ユーザータイムラインを埋め込み表示するメソッドを実行
twttr.widgets.createTimeline (
{ // 第1引数: ウィジェットの種類
sourceType: "profile" ,
screenName: "arayutw" , // スクリーンネーム
} ,
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/SyncerJP" target="_blank">こちら</a>です。</p>
<!-- コンテナ -->
<div id="tweet-user-timeline"></div>
<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
<script>
// コンテナを取得
var container = document.getElementById( "tweet-user-timeline" ) ;
// ユーザータイムラインを埋め込み表示するメソッドを実行
twttr.widgets.createTimeline (
{ // 第1引数: ウィジェットの種類
sourceType: "profile" ,
screenName: "SyncerJP" , // スクリーンネーム
} ,
container , // 第2引数: コンテナの要素
{ // 第3引数: パラメータ
width: 300 , // 横幅
tweetLimit: 4 , // ツイートの数
}
) ;
</script>
</body>
</html>
デモ
値を調整して、各パラメータがどのように反映されるのか確認できます。
twttr.widgets.createTimeline (
{ // 第1引数: ウィジェットの種類
sourceType: "profile" ,
screenName: "SyncerJP" , // スクリーンネーム
} ,
container , // 第2引数: コンテナの要素
{ // 第3引数: パラメータ
showReplies: "hidden" ,
chrome: "..." ,
theme: "light" ,
width: 350 ,
height: 300 ,
tweetLimit: 20 ,
linkColor: "#D36015" ,
borderColor: "#2660A1" ,
ariaPolite: "polite" ,
lang: "ja" ,
}
) ;
パラメータ
パラメータを指定すると、ユーザータイムラインの表示を調整できます。
- 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
。