読者です 読者をやめる 読者になる 読者になる

ツイッターのタイムラインをWebページに表示させる

Twitterタイムラインをエンベッドする方法

埋め込むコードを作成する 

新しい埋め込みユーザータイムラインの作成は、自分がログインしているアカウントのウィジェット設定から行います。以下のURLにてコードを作成します。

https://twitter.com/settings/widgets/new/user

 

f:id:develog:20161008201111p:plainhttps://twitter.com/ここにtwitterのIDを記述します

 

 

f:id:develog:20161008201120p:plain

ここでは左の”Embedded Timeline”を選択します。

 

f:id:develog:20161008201127p:plain

”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にペーストして結果を表示してみます。 

タイムライン

f:id:develog:20161008204634p:plain