最終更新：2017/01/14
以前はTwitterからのツイートの取得が比較的簡単にできて、WordPressのプラグインにも色々な特徴があるタイムライン表示ツールがあった。このブログにも自分のツイートを表示していた。でも、いつだったかTwitterがAPIを大幅に変更したとかで、使えなくなってしまったプラグインがあって、しばらくの間ブログにツイートは表示しないでいた。
Twitterの公式ウィジェット機能を使うと自分のウェブサイトにタイムラインを表示するための埋め込みコードを取得できるんだけど、あまり使い勝手が良くないという印象しかなかった。最近はかなり改善されたようで、WordPressのウィジェットくらいの小さなスペースでも綺麗に表示されるようになった。また、埋め込んだウェブサイトやWordPress側のコードにパラメータを与えるとカスタマイズできるようになっていて自由度が増した（単に知らなかっただけかもしれない）。
特に、日本語表示のタイムラインは、「@VANGUARD_FLIGHTさんのツイート」の「ツイート」の文字だけ妙に大きくて不格好なのが不満だったので、従前の英語表示に変更することにした。公式ウィジェットのコードは次のようなもの。
<a class="twitter-timeline" href="https://twitter.com/VANGUARD_FLIGHT" data-widget-id="xxxxxxxxxxxxxxxxx">@VANGUARD_FLIGHTさんのツイート</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 class="twitter-timeline" href="https://twitter.com/VANGUARD_FLIGHT"
data-widget-id="xxxxxxxxxxxxxxxxx"
data-chrome="transparent"
data-border-color="#808080"
data-lang="en">@VANGUARD_FLIGHTさんのツイート</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>
基本的には、属性名に「data-」というプレフィックスをつけるようにする。
data-chrome="transparent"は、ウィジェットの背景を透明にする設定。ウェブサイトの背景色に馴染まない時に。
data-border-color="#808080"は、ツイート間の境界線の色の設定。
data-lang="en"は、表示言語を英語にする設定。この設定だけはプレフィックスなしでlang="en"でも同様の表示になる。
パラメータ
Twitterのウィジェット設定画面で設定を変更したのに埋め込みタイムラインに反映されないことがあるので、埋め込みタイムラインのコード側で設定を強制することができる。使いどころがありそうなものを一覧にした。他にもパラメータはあるけど使い道のよくわからないものは省略した。詳細は参考記事を参照。
| 属性名 | 効果 | 有効な値 |
|---|---|---|
| data-chrome | ウィジェットの表示要素をなくす。非表示にする要素をスペース区切りで指定する。ただし、noheaderを指定した場合は、Twitterの表示要件を満たすようにしなければならない。 | noheader nofooter noborders noscrollbar transparent |
| data-tweet-limit | タイムラインに表示するツイート数。 | 1～20 |
| data-lang | ウィジェットの言語コード。ツイートの内容には影響しない。lang=”en”でも同様の効果。 | en ja es 等 |
| data-theme | ウィジェットのテーマ。Twitterアカウント画面でのテーマ設定が反映されない時に強行できる。 | dark light |
| data-link-color | ツイートのリンク色。16進トリプレット表記。 | #0080ff （16進数） |
| data-border-color | ウィジェットの境界線の色。16進トリプレット表記。 | #dddddd （16進数） |
| width | ウィジェットの最大幅をピクセルで指定する。 | 180～520 |
| height | ウィジェットの高さをピクセルで指定する。tweet-limitパラメータが指定されているときは無効。 | 200以上 |
WordPressのウィジェットへの表示
WordPressのウィジェットにツイートを表示させたい場合は、ダッシュボードから外観を選んで「ウィジェット」で設定する。もっとも一般的な「テキスト」ウィジェットをドラッグ&ドロップして、上記のコードをコピー&ペーストすればいい。