この記事では、WEBサイトにTwitterのタイムラインを埋め込んで画面幅によってサイズが可変するレスポンシブ対応にする方法を紹介します。またTweetの埋め込み方も同時に紹介します。
Twitterタイムラインの埋め込み方法
Twitterの埋め込み方は、Twitterの埋め込みコードを取得して、それをHTMLファイルにコピペするだけです。
Twitterでの作業
まずは埋め込みたいTwitterタイムラインの埋め込みコードを取得します。
下記のURLへ行き、取得したいTwitterアカウントの@からのアカウント名を記入します。
ディスプレイオプションで「Embedded Timeline」を選択するとTwitterタイムラインが現れます。
その上にあるHTMLが埋め込みコードです。それをコピーしときましょう。




自サイトでの作業
サイトでの作業は、先程コピーした埋め込みコードを好きな場所にペーストするだけです。WordPressの場合はカスタムHTMLを使うと埋め込めます。
そこから必要に応じて、幅などを調整していきましょう。
カスタム
Twitter埋め込みは、ほとんど完成されたコードなので非常に簡単に画面幅に対して最適化できます。
レスポンシブにしたい (幅を画面幅に合わせたい)場合は下記のようにwidth(幅)を100%に指定すればOKです。height(高さ)は約400くらいでいいと思います。
<a class="twitter-timeline" href="https://twitter.com/OgJOLPRYK4U7NgH?ref_src=twsrc%5Etfw" height="400" width="100%">
Tweets by OgJOLPRYK4U7NgH
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8">
</script>
実際に埋め込むと以下の様になります。(3カラムの中央に置いてます。)
その他カスタム例は以下の様なものがあります。いずれも上記と同じ位置に記述すれば反映されます。
カスタマイズ | コード例 | 説明 |
---|---|---|
幅 | width=”〇〇px” | 幅を指定。単位は「px」 100%にすると画面幅に対応 |
高さ | height=”〇〇px” | 高さを指定。単位は「px」 |
表示ツイート数 | data-tweet-limit=”1″ | 表示するツイート数を固定。 ただしツイートの自動更新がオフに。 |
テーマ | data-theme=”light” data-theme=”dark” | テーマを明るく。 テーマを暗く。 |
リンクカラー | data-link-color=”#〇〇〇〇″ | リンクの色を指定。 |
ボーダーカラー | data-border-color=”#〇〇″ | 線の色を指定。 |
ヘッダー非表示 | data-chrome=”noheader” | ヘッダーを非表示。 |
フッター非表示 | data-chrome=”nofooter” | フッターを非表示。 |
ボーダー非表示 | data-chrome=”noborders” | 線を非表示。 |
スクロールバー非表示 | data-chrome=”noscrollbar” | スクロールバーを非表示。 |
背景透明 | data-chrome=”notransparent” | 背景の色を透明。 |
Tweetの埋め込み方法
Tweetの埋め込みは、Twitterの本サイトから埋め込みコードを取得できます。
埋め込みたいツイートの右上にあるメニューからツイートを埋め込むを押します。すると先ほどと同様のhttps://publish.twitter.com/#のページへ行きます。あとはタイムラインの時と同様にHTML(埋め込みコード)をコピペして完了です。



実際に埋め込んだツイートは下記の様になります。
WordPressの使い方や設定方法一覧:導入〜応用まで一から全て解説 https://t.co/csWoCXUwJP
— KT LIFE (@OgJOLPRYK4U7NgH) February 18, 2020
以上が「Twitterタイムラインの埋め込みをしてレスポンシブにする方法」でした。
WordPressのウィジェットを使ってTwitterを埋め込む場合はそのルールに則ったやり方で作業して下さい。
外部ツールはHTMLで直接埋め込む方法が分かれば、余計なプラグインを消す事が出来るので、余計なリソースが無くなりサイト全体の評価が上がっていく可能性があるので覚えておきましょう。
Twitterの埋め込みが原因でページ読み込み速度が遅くなる場合は下記の記事の方法を試してみて下さい。
他、YouTubeの埋め込みとFacebookの埋め込みはこちら