Twitterタイムラインの埋め込みをしてレスポンシブにする方法

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

Twitterタイムラインの埋め込み方法

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

Twitterでの作業

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

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

Twitter Publish

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カラムの中央に置いてます。）

その他カスタム例は以下の様なものがあります。いずれも上記と同じ位置に記述すれば反映されます。

Tweetの埋め込み方法

Tweetの埋め込みは、Twitterの本サイトから埋め込みコードを取得できます。

埋め込みたいツイートの右上にあるメニューからツイートを埋め込むを押します。すると先ほどと同様のhttps://publish.twitter.com/#のページへ行きます。あとはタイムラインの時と同様にHTML（埋め込みコード）をコピペして完了です。

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

以上が「Twitterタイムラインの埋め込みをしてレスポンシブにする方法」でした。

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

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

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

Twitter埋め込みでサイトが重いと感じたらasyncに注意

今回はTwitterを埋め込んでサイトが重い、もしくは読み込み速度が遅くなったと悩んでいる方はasync属性に注意しましょう。ここを解決すればもしかするとサイトスピードの改善になるかもしれません。

kt-life.net

2020.07.05

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

Facebookの埋め込みコードと投稿ページのリンクの取得方法

今回は、Facebookの埋め込みの仕方と個別投稿ページのURLを取得してリンクを作成する方法について紹介していきます。

kt-life.net

2020.03.05

WordPressでYouTube動画を埋め込む方法

この記事はWordPressの投稿にYouTube動画を埋め込む方法を紹介いたします。今回の方法は、WordPress標準搭載のEmbed機能を使用し、Gutenbergのエディタを使用した超簡単な方法です。

kt-life.net

2020.01.30