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

Twitterタイムラインの埋め込みは意外とカンタン

サイトを作るとき、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タグが残るような感じです。

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

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

創作・同人サイトにオススメのサーバー

スターサーバー キャンペーン中!

オススメ度  star star star star star

スターサーバーでは2021年5月10日まで、すべてのプランの初期費用が無料になるキャンペーンを実施中です!キャンペーン期間中は、月額440円のスタンダードプランより上位のプランを12ヵ月以上で新規契約すると、契約期間を1年分無料延長できるほか、.comや.netなどのドメインが1年間利用無料になります。

使用料 初期費用1,650円無料!
最低月額138円〜
WordPress有は月額330円〜
容量 10GB〜
WordPress エコノミープランのみ不可
その他のプランは可
簡単インストール機能付き
成人向けコンテンツ 不可

最低月額138円のローコストで、大容量・高速のサーバーが利用できます。契約中のプラン変更も可能。とりあえず有料サーバーを試したい方にオススメ

スターサーバー

ロリポップ!レンタルサーバー

オススメ度  star star star star star

使用料 初期費用1,500円~
最低月額100円〜
WordPress有は月額250円〜
容量 10GB〜
WordPress エコノミープランのみ不可
その他のプランは可
簡単インストール機能付き
成人向けコンテンツ

月額100円から使える、コスパ最強の老舗レンタルサーバー!個性的で可愛いドメインが選べるのも魅力的。当サイトもロリポップ!を利用しています。

ロリポップ!レンタルサーバー

リトルサーバー

オススメ度  star star star star star_half

使用料 初期費用920円
最低月額150円〜
容量 20GB〜
WordPress すべてのプランで可
成人向けコンテンツ

比較的新しいレンタルサーバー。なんと缶ジュースほどの値段でWordPressを安定したサーバーで使える!7日間の自動バックアップ機能もあって、もしものときも安心。個人サイトの新しいスタンダードになるかも

リトルサーバー

さくらのレンタルサーバ

オススメ度  star star star star star_half

使用料 初期費用1,048円~
最低月額131円〜
WordPress有は月額524円〜
容量 10GB〜
WordPress ライトプランのみ不可
その他のプランは可
クイックインストール機能付き
成人向けコンテンツ

自動バックアップなど、安心・快適にサイトを運営する機能が魅力のレンタルサーバー。財布にも優しいのが◎。もちろんWordPressも使えます

さくらのレンタルサーバ

XREA Free

オススメ度  star star star star star_border

使用料 無料
容量 1GB
PHP
WordPress
いずれも使用可

なんと無料ながらWordPressも使える。必要な機能を必要なだけ、シンプルなレンタルサーバー。物足りなくなったら有料プランへグレードアップも可!手軽に始められて、初心者にもやさしい仕様

XREA
レンタルサーバー比較