2 flat logo on transparent 256
2018-09-18

ツイッターのタイムラインを自身のサイトへ埋め込む方法

Pic20180918

色々なサイトを見ていると、ブログやサイトなどにツイッターのタイムラインが埋め込まれているのを見かける事があるかと思います。

当サイトでも以下のようにスマホ用ページの最下部にタイムラインを埋め込んでいます。

登録方法

今回はツイッターのタイムラインをブログやサイトに埋め込む方法をご紹介します。

公式サイトへアクセス

まず、 公式サイトにアクセスします。

ここで自身のツイッターのアカウントを入力します。

登録方法

その後、左側にある「Embedded Timeline」をクリックします。

登録方法

そうするとタグが出力されますので「Copy Code」をクリックしてコードをコピーし 任意の場所に貼り付けます。

これで利用することが可能です。

ただ、横幅と縦幅を指定しなければサイトによってデザインに沿わない可能性があるので、最低限大きさを変更する必要があります。

ツイッタータイムラインのデザインを変更する

タイムラインの大きさを変更する

縦幅と横幅を変更するためにwidthとheightを以下のように指定します。

<a class="twitter-timeline" href="https://twitter.com/01Programing?ref_src=twsrc%5Etfw" width="300px" height="400px" >Tweets by 01Programing
</a>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

タイムラインの表示件数を変更する

data-tweet-limitで表示するタイムラインの件数を指定できます。

<a class="twitter-timeline" href="https://twitter.com/01Programing?ref_src=twsrc%5Etfw"  data-tweet-limit="5">Tweets by 01Programing
</a>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

テーマの背景を変更する

テーマは下記の2種類で設定可能です

明るめのテーマ:data-theme="light"

暗いテーマ: data-theme="dark"

<a class="twitter-timeline" href="https://twitter.com/01Programing?ref_src=twsrc%5Etfw"  data-theme="light">Tweets by 01Programing
</a>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

タイムラインのリンクの色を変更する

data-link-colorへ16進数で値を指定すると任意の色に変更可能です。

<a class="twitter-timeline" href="https://twitter.com/01Programing?ref_src=twsrc%5Etfw"  data-link-color="#***">Tweets by 01Programing
</a>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

タイムラインの境界線の色変更

data-border-colorへ16進数で値を指定すると任意の色に変更可能です。

<a class="twitter-timeline" href="https://twitter.com/01Programing?ref_src=twsrc%5Etfw"  data-border-color="#***">Tweets by 01Programing
</a>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

その他レイアウト関連

data-chrome="noheader"  ヘッダー非表示にする
data-chrome="nofooter"  フッター非表示にする
data-chrome="noheader nofooter" 複数指定する場合は、半角スペースで区切る
data-chrome="noborders" 境界線を非表示にする
data-chrome="transparent"   背景を透過にする
data-chrome="noscrollbar"   スクロールバー非表示にする

以上になります。

その他関連記事

Ruby On Railsとtwitterの投稿機能を連携する

Ruby On RailsでRedisを利用してランキング機能を実装する

Ruby On Railsでredcarpetを利用し、シンタックスハイライトに対応したブログ機能を実装する

Ruby On Railsで外部APIを利用して、簡単なアプリケーションを作成する

チャットボット Hubot(ヒューボット)とSlackを連携してみる

前の記事
次の記事