◎ Twitter「埋め込みタイムラインウィジェット」の作り方をまとめてみた。

知人から、私のブログ上でツイートが見えなくなっていると指摘された。

見てみると、ブログばかりかwebサイトに埋め込んだウィジェットも機能せず、自分のタイムラインが表示されない状態になっていた。Twitter API のバージョンが切り替わったことをすっかり忘れていた。

このまま放置してもかまわないが、エラー状態を残しておくのも忍びないので、新しいAPIに合わせて直すことにした。

以前はサードパーティーのウィジェットを使用していたが、今回はTwitter純正のツール「埋め込みタイムライン」を使用。

埋め込みタイムラインのウィジェットを作る

• Twitterの自分のホームを開き、右上のギヤーアイコンをプルダウンして「設定」を選ぶ。

• 開いた設定ページで、左側メニューの「ウィジェット」を選ぶ。

• 「ウィジェット」ページが開く。ここで既に作成した「ウィジェット」の編集や削除の管理ができる。
  ※「ウィジェット」を削除すると、そのdata-widget-idを使ってサイトに貼付けてあるウィジェットは機能しなくなる。
  新規作成する場合は、「新規作成」ボタンをクリックする。
  
• 「ユーザーウィジェットを作成する」ページに移動。
  「タイムラインソースを選択」のタブアイコンから、自分のタイムライン、自分のお気に入りのタイムライン、自分が作成したリストや他のリストのタイムライン、検索のハッシュタグによるタイムラインを選ぶ。
  今回は自分のタイムライン（デフォルト）を選択している。
• 

• ユーザー名を入れ、その他を設定していく。
• 「 @ツイートを除外する」にチェックを入れると、返信ツイートは表示されない。
• 「 画像を自動的に開く」にチェックを入れると、画像がウィジェット内に自動で表示される。
• 「高さ」でウィジェットの高さを指定する。（例）350px
• 「テーマ」は、「明るい」と「暗い」のどちらかを選ぶ。
• 「リンクの色」で、テキストリンクの色を指定する（初期値は青色）。入力フィールドをクリックすると、カラーピッカーが開くので、色を選び、「完了」ボタンをクリックすると、16進色コードが入る。もちろん16進色コードを直接入れてもかまわない。
• 「カスタマイズ機能を無効にする」というのは、「ウィジェット」のカスタマイズと混同してしまいそうだが、このカスタマイズ機能というのは、「カスタマイズされたおすすめユーザー」のリストを表示するかどうかというもの。
• 右側のプレビューを見ながら設定を決定し、「変更を保存」ボタンをクリックする。
• 右下のテキストエリアに固有のIDが入った埋め込み用のコードが生成される。

（例）

<a class="twitter-timeline" href="https://twitter.com/stluke7" data-widget-id="（ここにウィジェット固有のIDが入る）">@stluke7 からのツイート</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>タグ部分に追加していく。

※あまりhtmlに詳しくない方への注意。属性を追加していく際は、半角スペースで区切る。

縦横のサイズ

初期設定は横520px、縦600pxになっている。

ウィジェットの横サイズは、張り込み先の親要素の横サイズに従ったサイズになる。

サイズ指定も可能。指定できる横サイズは最小180px、最大520px。width="250”（単位はpx）のように記述する。

縦サイズは、後述する「 data-tweet-limit（固定ツイートの数）」を指定していない場合、サイズ指定ができる。最小200px。"height=400"のように記述する。

「 data-tweet-limit」を指定している場合は、こちらが優先され、縦サイズ指定は、ほぼ無視される。

テーマ

「ウィジェット」の設定から選べるが、「明るい」と「暗い」の2種類のみ。

「明るい」は、背景が白（#ffffff）、文字色は濃いグレー （#222222）になる。

「暗い」は、背景が濃いグレー（#333333）、文字色は薄いグレー（#dddddd）になる。

生成したコードには、テーマについての記述はない。後になってコードを直接触って変更する場合、「明るい」にするなら data-theme="light"、「暗い」にするなら data-theme="dark" と記述する。

リンクの色

これも「ウィジェット」の設定で入力した値は、コード内に書かれていない。後になって、変更したい場合は、data-link-color="#3788ff" のように記述する。

区切り線と外側ボーダーの色

初期では、薄いグレー（#e6e6e6）になっている。

data-border-color="#377afd" のように記述する。ウィジェット全体の外側にも色指定したボーダーが付くが、背景が濃いグレーなのでほとんど分からない。

ツイート数の固定

表示するツイート数を固定できる（ツイート数は1から20まで）。ツイートの数を3つに固定するなら、data-tweet-limit="3"  のように記述する。ツイート数を固定した場合、その数をすべて表示する高さになり（スクロールバーは表示されず）、height=""で指定した高さは無視される。また、ツイート内容は自動更新されなくなる。

その他のレイアウトやインターフェースをカスタマイズ

このオプションは、data-chrome属性に記述していく。複数のカスタマイズオプションを入れる場合は、半角スペースで区切る。

（例） data-chrome="noborders transparent" 

noheader　タイムラインのヘッダーをなくす。

nofooter　タイムラインのフッターやツイートボックスをなくす。

noborders　ウィジェットの周りのボーダーやツイートの区切り線をなくす。

noscrollbar　タイムラインのスクロールバーを非表示にする。

transparent　タイムラインの背景を透明にする。テーマが"light"の場合、背景色は白（#ffffff）になっているが、これを透明にする。

この画像については、このページの右上をご覧いただきたい。