No.160
【Twitter】タイムラインの埋め込み
Twitterのタイムラインを埋め込みたい
Twitterのタイムラインをサイトに埋め込む方法は幾つかある。APIなどを使った凝った方法もあるのだが、簡単に実装するならばtwitter公式サイトからウィジェットの埋め込みタグを作成する方法が楽でよい。デザインは公式準拠だから誰が見てもツィートだとわかるし。
実際のコード
発行されるコードは以下のようになる。
<a class="twitter-timeline" href="https://twitter.com/ユーザーのID" data-lang="ja">Tweets by ユーザーのID
</a><script src="//platform.twitter.com/widgets.js" async="" charset="utf-8"></script>
これにオプションをつけて加工していく。
| オプション | 意味 |
|---|---|
| width="横幅" | 横幅指定。未指定だとブロックの100%。 |
| height="縦幅" | 縦幅指定。未指定だとブロックの100%。 |
| data-chrome="noheader" | ヘッダ（「@○○さんのツィート」）を表示しない。 |
| data-chrome="nofooter" | フッタ（「埋め込む」「Twitterで表示」）を表示しない。 |
| data-chrome="noheader nofooter" | ヘッダとフッタを表示しない。 |
| data-chrome="noborders" | ツィートを区切る線を表示しない。 |
| data-border-color="カラーコード（16進数表記）" | ツィートを区切る線の色を指定する。 |
その他のオプションなどは公式サイトの「ウィジェットのコンポーネントのカスタマイズ」を参照されたし。
参考までにNational Geographic の公式Twitterを表示する記述は以下のようになる。
<a class="twitter-timeline" href="https://twitter.com/natgeo" data-lang="ja" width="320" height="240" data-chrome="noheader nofooter">Tweets by natgeo
</a><script src="//platform.twitter.com/widgets.js" async="" charset="utf-8"></script>