【 更新 】おすすめ記事はこちら

Twitterのタイムラインを埋め込み表示【カスタマイズ付き】

日々の活動、自分の発信をリアルタイムで見てもらえる、Webサイト上のタイムライン。

その他、ツイートを引用したピンポイントな表示など、便利な使い方が増えてきました。

一見、導入が難しそうに見えますが、表示したい場所に専用コードを埋め込むだけでOK。

今回は「タイムライン」の見た目をカスタマイズして、コードを埋め込むまでをご紹介。

表示、サイズ、明るさを整えることでサイトに馴染ませたり、個性を出してみましょう!

はじめに

作業に入る前に、前もって埋め込みたいタイムラインのアカウントURLを調べます。

ブラウザで高度な検索を開き、キーワードやアカウント情報で対象を探してください。

高度な検索

見つけたらアカウントページのURLを全てコピー。後ろの〇〇にはユーザー名が入ります。

https://twitter.com/〇〇

ユーザー名は@からはじまる文字列で、アカウント固有のものです。

表示を選択

Twitter Publishにアクセスし、中央の入力欄に先ほどコピーしたURLを貼り付けます。

Twitter Publish

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

Here are your display options

内容を確認し、この段階でカスタマイズが必要なければCopy Codeボタンでコードを生成。

カスタマイズする場合はThat’s allで始まるset customization optionsをクリック。

サイズを設定

タイムラインの高さ、横幅をpxで指定します。最小サイズは「200×220」まで設定可能。

特に高さは入力しないと5,000pxに渡って内容が表示されるのでご注意ください。

What size would you like your timeline to be?

明るさを設定

タイムライン全体の明るさを「Lite」と「Dark」から選びます。デフォルトはLiteの状態。

Darkを選ぶと文字色は#e7e9eaのグレー、背景色は#000000の黒が適用されます。

How would you like this to look?

コードを作成

解説を省きましたが、ツイートの言語とトラッキング可否は任意で設定してください。

画面下部のタイムラインでカスタマイズを確認し、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を貼り付けます。

カスタムHTMLにコードを入力

テーマによってウィジェットの仕様が異なります。ブロックタイプが使いにくいときは戻すこともできますよ。

おわりに

以前はリンクの色もありましたが、現在はサイズと明るさだけカスタマイズできるようです。

ちなみにタイムライン以外にもEmbedded TweetTwitter Buttonsを設置することも可能。

Embedded Tweetは、ツイートを単体で表示するときに使います。アンケート結果を載せて説得力をもたせるのもいいですね。

Twitter Buttonsでは、ShareFollowMentionHashtagMessageの最大5種類のボタンから選ぶことができますよ。

サイトとの連携、情報発信の場を拡大するなど、自分の目的に合った方法で活用してください。