Search Timeline - 検索結果をウェブサイトに埋め込む

公開日: 2017/01/22

Twitterの、ツイートの検索結果をウェブサイトやブログに埋め込む方法をまとめています。

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

ウィジェット

検索結果をウェブサイトで表示するには、準備としてウィジェットを作成して、HTMLのコードを取得する必要があります。ウィジェットは、ブラウザ版のTwitterの設定画面から行なえます。

ウィジェットの作成

埋め込みたい検索結果のキーワードで、検索を実行して下さい。そして画面の右上にあるメニューを開いて、「この検索をサイトに埋め込む」をクリックして下さい。

検索ウィジェットの作成画面に移動します。ウィジェットの設定は後からでもできます。よろしければ、「ウィジェットを作成」をクリックして下さい。

埋め込み用コード

ウィジェットを作成すると、埋め込み表示用のHTMLコードが表示されます。これをコピーして下さい。

ウィジェットID

ウィジェットIDは埋め込み用コード、または、そのウィジェットの設定画面のパーマリンクの中に含まれています。IDは、JavaScriptを利用する際に必要になります。

HTML

<a class="twitter-timeline"  href="https://twitter.com/search?q=url%3Asyncer.jp" data-widget-id="825207678788001792">url:syncer.jpに関するツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

ウィジェットの編集・削除

作成したウィジェットは、設定画面からいつでも確認、編集、削除ができます。

ウィジェットの設定: Twitterのウィジェットの設定画面。作成したウィジェットの編集、削除など。

HTMLの場合

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

プログラミング

コードの記述

ウィジェットを作成して取得したコードを、そのまま表示したい場所に記述して下さい。そこに埋め込み表示されます。

HTML

<!-- ここに検索結果を表示 -->
<a class="twitter-timeline" href="https://twitter.com/search?q=url%3Asyncer.jp" data-widget-id="825207678788001792">url:syncer.jpに関するツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

script要素について

ある程度、知識がある人向けです。script要素の内容は、コードは違うものの、ツイートなどを埋め込み表示する時に利用するライブラリと同じです。なので、次のように変更しても問題ありません。

HTML

<!-- ここに検索結果を表示 -->
<a class="twitter-timeline" href="https://twitter.com/search?q=url%3Asyncer.jp" data-widget-id="825207678788001792">url:syncer.jpに関するツイート</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

href属性について

ある程度、知識がある人向けです。data-widget-idにウィジェットIDが指定されていれば、href属性は省略しても問題ありません。

HTML

<!-- ここに検索結果を表示 -->
<a class="twitter-timeline" href="https://twitter.com/search?q=url%3Asyncer.jp" data-widget-id="825207678788001792">url:syncer.jpに関するツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

パラメータの指定

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

HTML

<!-- tweet-limitのパラメータを追加 -->
<a class="twitter-timeline" data-tweet-limit="2" href="https://twitter.com/search?q=url%3Asyncer.jp" data-widget-id="825207678788001792">url:syncer.jpに関するツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

デモを開く

サンプルコード

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>Twitterの検索結果を埋め込むデモ</title>
	</head>
<body>

<h1>Twitterの検索結果を埋め込むデモ</h1>
<p>Twitterの検索結果を、ウェブサイトに埋め込んでいます。サンプルの検索結果は<a href="https://twitter.com/search?q=url%3Asyncer.jp" target="_blank">こちら</a>です。</p>

<!-- ここに検索結果を表示 -->
<a class="twitter-timeline"  href="https://twitter.com/search?q=url%3Asyncer.jp" data-widget-id="825207678788001792">url:syncer.jpに関するツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</body>
</html>

デモを開く

デモ

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

url:syncer.jpに関するツイート

<a class="twitter-timeline"
	data-widget-id="825207678788001792"
	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-search-timeline"></div>

メソッドを実行

専用のメソッド(twttr.widgets.createTimeline)を実行すれば、指定したコンテナに検索結果を埋め込み表示できます。第1引数にウィジェットID、第2引数にコンテナの要素、第3引数にパラメータ、という順番で値を指定して下さい。

JavaScript

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

// 検索結果を埋め込み表示するメソッドを実行
twttr.widgets.createTimeline (
	"825207678788001792" ,	// 第1引数: ウィジェットID
	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/search?q=url%3Asyncer.jp" target="_blank">こちら</a>です。</p>

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

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

// ユーザータイムラインを埋め込み表示するメソッドを実行
twttr.widgets.createTimeline (
	"825207678788001792" ,	// 第1引数: ウィジェットID
	container ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
		width: 300 ,	// 横幅
		tweetLimit: 4 ,	// ツイートの数
	}
) ;
</script>
</body>
</html>

デモを開く

デモ

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

url:syncer.jpに関するツイート

twttr.widgets.createTimeline (
	"825207678788001792" ,	// 第1引数: ウィジェットID
	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。