【HTML】Twitterのタイムラインを埋め込む方法【レスポンシブ可】

パソ君

・TwitterのタイムラインをHTMLに埋め込むにはどうするの？
・レスポンシブ対応もしたい！

こんな疑問にお答えします。

サイト案件では「特定のTwitterのタイムラインを埋め込んでほしい」と言われることがあるんですよね。

下記みたいな感じの↓

これの作り方は簡単。公式のページからコードを作成すればＯＫ。

ジト

意外とすぐできるよ！

ということで、この記事では「Twitterのタイムラインを埋め込む方法」について解説していきます！

【HTML】Twitterのタイムラインを埋め込む方法

HTMLにてTwitterのタイムラインを埋め込む手順はこちら。

順に解説していきます。

①：公式ページへ

まず下記の公式ページへアクセスします。

https://publish.twitter.com/

②：TwitterのURLを貼り付ける

下記画像の赤部分にTwitterのURLを貼り付けます。

③：表示したいタイムラインを選択

URLを入れてEnterを押すと、スクロールして下記が表示されます。

ここで左赤枠のタイムラインを選択しましょう。

④：タイムライン用コードを取得

すると下記のコードがでてくるので、赤枠の「Copy Code」をクリック。

これで埋め込むようのHTMLをゲットすることができます！

⑤：コードをカスタマイズする

先述したHTMLのコードをそのまま使ってもOK。ですが、カスタマイズしたほうが使いやすいです。

まず下記の赤枠をクリックしましょう。

すると下記が表示されます↓

ぞれぞれの設定の意味はこちら

Height（px）

こちらはタイムラインの縦の大きさを設定します。

数字を入れたり、矢印で数値を変更したりしてカスタマイズしましょう。

Width（px）

こちらはタイムラインの横の大きさを設定します。

数字を入れたり、矢印で数値を変更したりしてカスタマイズしましょう。

Light

こちらはタイムラインの背景色を設定します。

といっても選択肢は「Light」と「Dark」だけですね。

ここはLightを選択する方が多いかと。

Automatic

こちらはタイムラインの見出しみたいなところに表示される文字の言語を、設定できる欄です。

色々な言語がありますが、ぶっちゃけAutomatciのままでOK。

Automaticとは「ユーザー側の設定に合わす」という意味だからですね。

ジト

つまり触るのはHeightとWidthぐらいだね！

⑥：data-chromeで見た目を変える

そしてもうひと手間加えて、タイムラインの見た目を変えていきます。

ここは興味ある方のみご覧ください。

⑤でカスタマイズしてコピペしたHTMLを見ると、下記のようになっています。

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

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

「data-」という属性がありますよね。
これを書き加えれば、さらに見た目を変えることができます。

dataのカスタマイズ一覧

カスタマイズの種類は下記

カスタマイズの例がこちら↓

<a 
    class="twitter-timeline" 
    data-width="400" 
    data-height="400" 
    data-border-color="#000066"
    data-chrome="noheader transparent"
    data-tweet-limit="3"
    data-theme="light" 
    href="https://twitter.com/jito_coder?ref_src=twsrc%5Etfw">
    Tweets by jito_coder
</a> 

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

dataのカスタマイズの注意点など

⑦：HTMLに埋め込む

最後にカスタマイズしてできたHTMLコードを埋め込みましょう。

これでTwitterのタイムラインを埋め込むことができます。

WordPressの記事に埋め込む

ちなみにコードをWordPressの記事に埋め込むこともできます。

「カスタムHTML」ブロックを使い、先ほどのリンクを埋め込めば。。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

はい反映可能！簡単ですね！

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙

【HTML】Twitterのタイムラインを埋め込む方法【レスポンシブ対応】

最後にさきほど埋め込んだTwitterのタイムラインを、レスポンシブ対応する方法について解説していきます。

「ツイートを埋め込んだら、横幅が大きく表示しすぎて崩れた」
なんてこともあるはず。

その時の対処法ですね。

date-widthを変更しよう

結論：date-widthを100％にする。

先ほど紹介したdata属性のdata-widthですね。それを下記のように指定しましょう。

<a 
    class="twitter-timeline" 
    data-width="100％" 
    data-height="400" 
    data-theme="light" 
    href="https://twitter.com/jito_coder?ref_src=twsrc%5Etfw">
    Tweets by jito_coder
</a> 

これだけで表示崩れは改善されるかと思います。

【HTML】Twitterのタイムラインを埋め込む方法【レスポンシブ対応】：まとめ

ジト

Twitterのタイムラインを埋め込む仕様は、案件によってあるため覚えておこう！