この記事では、「WebサイトにTwitterのタイムラインを埋め込む方法」について解説します。また、記事の後半では埋め込んだTwitterのタイムラインのレスポンシブ化についても解説します。
- WebサイトにTwitterのタイムラインを埋め込む方法
TwitterのタイムラインをWebサイトに埋め込む手順
WebサイトにTwitterのタイムラインを埋め込む方法については、まずはこちらの動画をご覧ください
Twitterのタイムライン埋め込み手順
Twitterのタイムラインを埋め込む手順は次のとおりです。
- https://publish.twitter.comのサイトに行く。
- 中央の入力欄に、埋め込みたいTwitterアカウントのURLを入力する。
- 「Embedded Timeline」をクリック
- 「Cop Code」ボタンをクリック
- VSCodeにコードを貼り付け
- CSSでスタイル調整
Twitterのタイムラインを埋め込むためには、まず「https://publish.twitter.com」のサイトにアクセスしてください。
次の画像のような画面が表示されます。
画面中央の入力欄に埋め込みたいTwitterアカウントのURLを入力します。例えば、ZeroPlus公式アカウントの場合は、こちらのURLを入力欄に入力します。
入力欄にURLを入力したら「Embedded Timeline」をクリックしましょう。
すると次のような画面が表示されるので、コードをコピーしてVSCodeのHTMLファイルに貼り付けます。
埋め込んだTwitterタイムラインのスタイル適用
コピーしたコードをそのまま埋め込むとブラウザにタイムラインが表示されます。
<a class="twitter-timeline" href="https://twitter.com/ZeroPlus_Japan?ref_src=twsrc%5Etfw">Tweets by ZeroPlus_Japan</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
出力結果（高さ調整前）
現状では画面幅全体に表示され、さらにタイムラインが縦に長く表示されてしまっています。この問題を解決するには、コピーしたコードをdivで囲って、スタイルを調整します。次のように記述してください。
<div class="timeline">
<a class="twitter-timeline" data-height="500" href="https://twitter.com/ZeroPlus_Japan?ref_src=twsrc%5Etfw">Tweets by ZeroPlus_Japan</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>.timeline {
max-width: 40%;
border: 1px solid #333;
padding: 10px;
}出力結果（高さ調整後）
コピーしたタイムラインをtimelineクラスがついたdivタグで囲います。クラス名は任意で設定してください。
そのdivタグに対してスタイルを適用することで、見栄えを調整できます。
また、data-height = ‘500’ をHTMLの埋め込んだコードに適用すると、縦に長く表示されていたタイムラインが縦に短く表示されます。data-heightの数値は任意に設定してください。
まとめ
WebサイトにTwitterを埋め込む方法について解説しました。SNSをWebサイトに埋め込んだコンテンツは増えていますので、埋め込む方法を習得しておきましょう。
Twitterのタイムライン埋め込みまとめ
- https://publish.twitter.com でTwitterアカウントのURLを入力する
- タイムラインが縦に長く表示される場合は、data-heightで制御する
