日々の活動、自分の発信をリアルタイムで見てもらえる、Webサイト上のタイムライン。
その他、ツイートを引用したピンポイントな表示など、便利な使い方が増えてきました。
一見、導入が難しそうに見えますが、表示したい場所に専用コードを埋め込むだけでOK。
今回は「タイムライン」の見た目をカスタマイズして、コードを埋め込むまでをご紹介。
表示、サイズ、明るさを整えることでサイトに馴染ませたり、個性を出してみましょう!
はじめに
作業に入る前に、前もって埋め込みたいタイムラインのアカウントURLを調べます。
ブラウザで高度な検索を開き、キーワードやアカウント情報で対象を探してください。

見つけたらアカウントページのURLを全てコピー。後ろの〇〇にはユーザー名が入ります。
https://twitter.com/〇〇
ユーザー名は@からはじまる文字列で、アカウント固有のものです。
表示を選択
Twitter Publishにアクセスし、中央の入力欄に先ほどコピーしたURLを貼り付けます。

すぐ下に、URLに適した選択肢が出てくるので、Embedded TimeLine
を選んでください。

内容を確認し、この段階でカスタマイズが必要なければCopy Code
ボタンでコードを生成。
カスタマイズする場合はThat’s all
で始まるset customization options
をクリック。
サイズを設定
タイムラインの高さ、横幅をpx
で指定します。最小サイズは「200×220」まで設定可能。
特に高さは入力しないと5,000pxに渡って内容が表示されるのでご注意ください。

明るさを設定
タイムライン全体の明るさを「Lite」と「Dark」から選びます。デフォルトはLiteの状態。
Darkを選ぶと文字色は#e7e9ea
のグレー、背景色は#000000
の黒が適用されます。

コードを作成
解説を省きましたが、ツイートの言語とトラッキング可否は任意で設定してください。
画面下部のタイムラインでカスタマイズを確認し、Update
ボタンでコードを発行します。
<a class="twitter-timeline" data-width="400" data-height="400" data-theme="dark" href="https://twitter.com/〇〇?ref_src=xxxxx">Tweets by Twitter</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
最後にコードをコピーして、タイムラインを表示したいところに埋め込んだら作業は完了。
サイトに表示
一例として、WordPressのフッターに設置する方法をご紹介します。TwentyTwenty-One
テーマ使用。
管理画面の「外観」>「ウィジェット」と開き、プラスのボタンから「カスタムHTML」を追加。URLを貼り付けます。

テーマによってウィジェットの仕様が異なります。ブロックタイプが使いにくいときは戻すこともできますよ。
おわりに
以前はリンクの色もありましたが、現在はサイズと明るさだけカスタマイズできるようです。
ちなみにタイムライン以外にもEmbedded Tweet
とTwitter Buttons
を設置することも可能。
Embedded Tweet
は、ツイートを単体で表示するときに使います。アンケート結果を載せて説得力をもたせるのもいいですね。
Twitter Buttons
では、Share
、Follow
、Mention
、Hashtag
、Message
の最大5種類のボタンから選ぶことができますよ。
サイトとの連携、情報発信の場を拡大するなど、自分の目的に合った方法で活用してください。