ユーザーのタイムラインをブログやWebサイトに埋め込む

広告

特定のツイートではなく指定したユーザーの最新のツイートをいくつか自動的に表示するようにブログやWebサイトに埋め込むことができます。ここではユーザーのタイムラインをブログなどに埋め込む方法、そして表示の仕方をカスタマイズする方法について解説します。

1.タイムラインを埋め込むためのコードを取得する
2.幅と高さを指定
3.ヘッダーの有無や境界線などのデザイン
4.表示するツイートの数
5.境界線の色とリンクの色
6.テーマの選択
7.返信も含めて表示

特定のユーザーのタイムラインを埋め込むためのコードを取得するには、下記のページから行います。

p2-1

中央のテキストボックスにタイムラインを見たいユーザーのURLを入力して下さい。形式は「https://twitter.com/(ユーザー名)」です。入力が終わったら右側に表示されている矢印をクリックして下さい。

p2-2

下へスクロールすると次のような画面が表示されるので「Embedded Timeline」をクリックして下さい。

p2-3

埋め込み用のコードが表示されます。コピーして下さい。

p2-4

コードの構成を見てみると次のような感じになっています。

<a class="twitter-timeline" href="https://twitter.com/[ユーザー名]">Tweets by [ユーザー名]</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

では取得したコードをブログに挿入してみます。今回はBloggerのブログで試してみました。サイドバーに挿入してみます。

p2-5

ブログを表示してみるとサイドバーに指定したユーザーのタイムラインが表示され、最新のものから順にツイートが表示されました。

p2-6

コードには幅やツイート数などパラメータを指定してカスタマイズすることができます。この後順に解説します。

デフォルトの設定では幅はコードを設置している親要素に合わせて180pxから520pxの間で自動的に設定され、高さは600pxに設定されています(ただ試した結果はもっと高さは長く表示されました)。幅を明示的に指定する場合には「data-width="xxx"」を、高さのサイズを明示的に指定する場合には「data-height="xxx"」を追加して下さい。下記では幅を200px、高さを450pxに設定しています(どちらか一つでも構いません)。

<a class="twitter-timeline" href="[URL]" data-width="200" data-height="450">
Tweets by [ユーザー名]</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

変更したコードをブログに埋め込むと次のようにタイムラインの幅と高さが指定したサイズで表示されます。

p2-7

表示されるタイムラインのデザインについて5つの項目が設定できるようになっています。(1)ヘッダーの有無、(2)フッターの有無、(3)境界線の有無、(4)スクロールバーの有無、(5)背景を透明にするかどうか、の5つの項目です。それぞれ見ていきます。

ヘッダーの有無

デフォルトではヘッダーが表示されますのでヘッダーを表示したくない場合には「data-chrome="noheader"」を追加して下さい。

<a class="twitter-timeline" href="[URL]" data-chrome="noheader">
Tweets by [ユーザー名]</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

左がヘッダー有り、右がヘッダー無しにした場合です。

p2-8

フッターの有無

デフォルトではフッターが表示されますのでフッターを表示したくない場合には「data-chrome="nofooter"」を追加して下さい。

<a class="twitter-timeline" href="[URL]" data-chrome="nofooter">
Tweets by [ユーザー名]</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

左がフッター有り、右がフッター無しにした場合です。

p2-9

境界線の有無

境界線とはヘッダーとツイートの間やツイートとツイートの間の線のことです。デフォルトでは境界線が表示されますので境界線を表示したくない場合には「data-chrome="noborders"」を追加して下さい。

<a class="twitter-timeline" href="[URL]" data-chrome="noborders">
Tweets by [ユーザー名]</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

左が境界線有り、右が境界線無しにした場合です。

p2-10

スクロールバーの有無

タイムラインの高さよりも表示するツイートの数などが多い場合などはスクロールバーが自動的に表示されます。デフォルトでは必要な時にスクロールバーが表示されますのでスクロールバーを表示したくない場合には「data-chrome="noscrollbar"」を追加して下さい。

<a class="twitter-timeline" href="[URL]" data-chrome="noscrollbar">
Tweets by [ユーザー名]</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

左がスクロールバー有り、右がスクロールバー無しにした場合です。

p2-11

背景を透明にするかどうか

デフォルトでは背景は透明ではありません。背景を透明にしたい場合には「data-chrome="transparent"」を追加して下さい。

<a class="twitter-timeline" href="[URL]" data-chrome="transparent">
Tweets by [ユーザー名]</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

左が背景を透明にしていない場合、右が背景を透明にした場合です。

p2-12

複数の項目を同時に設定する場合

複数の項目を同時に設定する場合には区切りに空白文字を使って続けて値を記述して下さい。例えばヘッダーとフッターを両方とも非表示にする場合は「data-chrome="noheader nofooter"」を追加して下さい。

<a class="twitter-timeline" href="[URL]" data-chrome="noheader nofooter">
Tweets by [ユーザー名]</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

左がデフォルトのままのタイムライン、右がヘッダーとフッターの両方を無しにした場合です。

p2-13

タイムラインに表示されるツイートの数を1から20までの間で指定することができます。ツイートの数を指定する場合には「data-tweet-limit="xxx"」を追加して下さい。下記ではツイートの数を3つに設定しています。

<a class="twitter-timeline" href="[URL]" data-tweet-limit="3">
Tweets by [ユーザー名]</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

変更したコードをブログに埋め込むと、今回は3つのツイートを表示するように設定したので最新のものから3つのツイートが表示できる高さに自動的に調整されて表示されます。

p2-14

タイムラインの境界線の色を指定することができます。またツイートの中に含まれるリンクやハッシュタグなどの色を指定することもできます。境界線の色を指定する場合には「data-border-color="xxx"」を、リンクの色を指定する場合には「data-link-color="xxx"」を追加して下さい。どちらか一つでも構いません。下記では境界線の色を青色に、リンクの色を赤色に設定しています。

<a class="twitter-timeline" href="[URL]" data-border-color="#0000ff" data-link-color="#ff0000">
Tweets by [ユーザー名]</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

左がデフォルトのままのタイムライン、右が境界線とリンクの色を変更した場合です。

p2-15

タイムラインの背景を暗い色に変更することができます。テーマを暗い色に変更するには「data-theme="dark"」を追加して下さい。デフォルトでは「data-theme="light"」となっています。

<a class="twitter-timeline" href="[URL]" data-theme="dark">
Tweets by [ユーザー名]</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

左がデフォルトのままのタイムライン、右がテーマをdarkに設定した場合です。

p2-16

タイムラインを表示する時に、デフォルトの設定では他のユーザーに対するリプライは表示されないようになっています。リプライも含めて表示するには「data-show-replies="true"」を追加して下さい。

<a class="twitter-timeline" href="[URL]" data-show-replies="true">
Tweets by [ユーザー名]</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

左がデフォルトのままのタイムライン、右が返信も含めて表示するように設定した場合です。

p2-17

-- --

特定のユーザーのタイムラインをブログやWebサイトに表示する方法、そして表示の仕方をカスタマイズする方法について解説しました。

Twitterの使い方 記事一覧へ戻る

( Written by Tatsuo Ikura+ )