サイトにTwitterを埋め込んでレスポンシブ対応にする方法

HTML/CSS

この記事では、WEBサイトにTwitterを埋め込んで画面幅によってサイズが可変するレスポンシブ対応にする方法を紹介します。またTweetの埋め込み方も同時に紹介します。

Twitterの埋め込み方法

Twitterの埋め込み方は、Twitterの埋め込みコードを取得して、それをHTMLファイルにコピペするだけです。

Twitterでの作業

まずは埋め込みたいTwitterタイムラインの埋め込みコードを取得します。

下記のURLへ行き、取得したいTwitterアカウントの@からのアカウント名を記入します。

https://publish.twitter.com/#

ディスプレイオプションで「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(埋め込みコード)をコピペして完了です。

実際に埋め込んだツイートは下記の様になります。


以上が「サイトにTwitterを埋め込んでレスポンシブ対応にする方法」でした。

WordPressのウィジェットを使ってTwitterを埋め込む場合はそのルールに則ったやり方で作業して下さい。

外部ツールはHTMLで直接埋め込む方法が分かれば、余計なプラグインを消す事が出来るので、余計なリソースが無くなりサイト全体の評価が上がっていく可能性があるので覚えておきましょう。

Twitterの埋め込みが原因でページ読み込み速度が遅くなる場合は下記の記事の方法を試してみて下さい。

他、YouTubeの埋め込みとFacebookの埋め込みはこちら

2020年2月22日HTML/CSSHTML,WEB

Posted by KT