日々の活動、自分の発信をリアルタイムで見てもらえる、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種類のボタンから選ぶことができますよ。
サイトとの連携、情報発信の場を拡大するなど、自分の目的に合った方法で活用してください。
