folderデザインしたい

TwitterのタイムラインをWebサイトに埋め込む方法

TwitterのタイムラインをWebサイトに埋め込む方法

TwitterのタイムラインをWebサイトに埋め込む方法 - https://do.gt-gt.org/twitter-embed/

サイトを作るとき、Twitterのタイムラインを埋め込むと何かと便利です

特にイベントや企画などの告知サイトなら、お知らせ用アカウントがあれば、タイムラインを埋め込むことでサイト訪問者にもリアルタイムなお知らせを見てもらえますし、フォロワー獲得にもつながります。

TwitterタイムラインはHTMLなどの知識がなくても、だれでも簡単にWebサイト上に埋め込むことができます。今回はその手順を紹介します。

Twitter公式ツールを使います

使うのはTwitterが提供しているこちらのツールです。ページを開くと次のような画面が表示されます。

Twitterタイムライン埋め込み手順

中央のテキストエリアに埋め込みたいTwitterタイムラインのURLを入力します。例えば、当サイトのお知らせ用アカウントを埋め込むなら、アカウントIDが「gt_gt_do」ですのでhttps://twitter.com/gt_gt_doと入力します。

また、個人のアカウントのタイムライン以外にも、個別のツイートやリスト、特定のハッシュタグのついたツイート一覧などを埋め込むことも可能です。

入力しエンターを押すと、次のような画面になります。

Twitterタイムライン埋め込み手順

「タイムライン埋め込み」か「Twitterボタン」を選べと書いてあります。今回生成したいのはタイムライン埋め込みなので、左の絵をクリックしましょう。

すると埋め込みコードが生成されます。あっという間ですね!

Twitterタイムライン埋め込み手順

「Copy Code」ボタンをクリックすると埋め込みコードがコピーされるので、HTMLファイルの好きな場所に張り付ければもうタイムライン埋め込みは完了するのですが、少しオプションをいじってみましょう

「Set customization options」と書かれた青い文字のリンクをクリックすると、オプション設定画面が出てきます。

Twitterタイムライン埋め込み手順

Height

縦の高さです。ここを何も入力しないとなぜか縦の長さがめちゃくちゃに長くなってしまいます。必ず入力しましょう(300px~500pxくらいが目安)。

Width

横幅です。空にしておくと、横幅いっぱいに広がる設定になります。数値を入力すると、横幅よりも画面の幅が狭くなったときは画面幅に合わせて伸縮するようになります。

Lightと書かれたプルダウン

デザインを「ライトテーマ」「ダークテーマ」から選べます。明るい雰囲気のサイトならライト、暗い色がベースのサイトならダークテーマが合います。

Automaticと書かれたプルダウン

言語設定です。Automatic(自動)のままで支障ありません。

Opt-out of tailoring Twitter チェックボックス

「Twitterの最適化のための情報送信を拒否する」という意味です。
初期ではチェックが入っていません。この状態だと訪問者がこのアカウントの埋め込みを閲覧したことがTwitterに送信され、埋め込まれたアカウントが「おすすめアカウント」として表示されるようです。おすすめアカウントに表示させたければそのまま、表示させたくないならチェックを入れましょう。

すべての項目を設定し終えたら、青いUpdateボタンを押して埋め込みコードを再取得します。あとはコードを好きな場所にペーストするだけです。

Twitterタイムライン埋め込み手順

埋め込み上部の「〇〇さんのツイート」という文字が気になるなら、埋め込みコードの中の「Tweet by 〇〇」という文言を削除すればOKです。このとき、aタグごと消してしまうと埋め込みが表示されなくなるので、aタグは消さないように気を付けてください(aタグの中に埋め込みに必要な情報が入っています!)。削除した後は空のaタグが残るような感じです。

Twitter埋め込みは提供されるコードがほぼ完ぺきなレスポンシブ対応仕様になっているので、このままでスマホからでもPCからでも快適に表示されます。文字サイズも、横幅の大きさに応じて自動で変わるようです。

以上、ぜひTwitter埋め込みを活用してステキなサイトを作ってください!

この記事を書いた人

ガタガタ

このサイトと、このサイトの掲載記事のほとんどと、このサイトで配布しているプログラムやテンプレートのすべてを作った人。絵を描いたり、文章を書いたりして暮らしています。

関連記事

HTMLテンプレートを自前カスタマイズしてもダサくならないためのデザインの考え方
folderデザインしたい favorite 60

HTMLテンプレートを自前カスタマイズしてもダサくならないためのデザインの考え方

ファビコンの設定方法!サイト独自のアイコンを作ってオリジナリティアップ
folderデザインしたい favorite 27

ファビコンの設定方法!サイト独自のアイコンを作ってオリジナリティアップ

サイト更新ごとにCSSファイルを新しく読み込ませてキャッシュ問題を回避する方法
folderデザインしたい favorite 27

サイト更新ごとにCSSファイルを新しく読み込ませてキャッシュ問題を回避する方法

SNSでサイトをシェアしたときにアイキャッチ画像を表示させる設定方法【OGP】
folderデザインしたい favorite 22

SNSでサイトをシェアしたときにアイキャッチ画像を表示させる設定方法【OGP】

クリックで内容を展開するアコーディオンメニューをCSSだけで実装する方法
folderデザインしたい favorite 38

クリックで内容を展開するアコーディオンメニューをCSSだけで実装する方法

コピペでOK!オシャレなフォントが無料で使えるGoogle Fontsの導入方法
folderデザインしたい favorite 35

コピペでOK!オシャレなフォントが無料で使えるGoogle Fontsの導入方法