ツイッターのタイムラインをWebページに表示させる
Twitterタイムラインをエンベッドする方法
埋め込むコードを作成する
新しい埋め込みユーザータイムラインの作成は、自分がログインしているアカウントのウィジェット設定から行います。以下のURLにてコードを作成します。
https://twitter.com/settings/widgets/new/user
https://twitter.com/ここにtwitterのIDを記述します
ここでは左の”Embedded Timeline”を選択します。
”Copy Code”をクリックしてソースコードをコピーします。
コピーしたコード
<a class="twitter-timeline" href="https://twitter.com/madamumonica">Tweets by madamumonica</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
カスタマイズ
横幅は親要素の幅に制限されますが、縦幅はコピーしたソースに記述する必要があります。最大値としてwidth(横幅)、height(縦幅)が指定できます。
ウィジェットのコンポーネントのカスタマイズ
"data-chrome"属性でヘッダー、フッター、枠、スクロール、背景をなくすことができます。
data-chrome="noheader nofooter noborders noscrollbar transparent"
カスタマイズ後のソースコード
<style>
div#twitter {
width: 300px;
background: #F3F; /*タイムラインの背景色*/
}
</style>
<body>
<div id="twitter">
<a class="twitter-timeline" href="https://twitter.com/madamumonica" height="300" data-chrome="noheader nofooter noborders transparent">Tweets by madamumonica</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</body>
結果表示
上記コードをHTMLにペーストして結果を表示してみます。
タイムライン
