Twitter ウィジェットを公式な方法でカスタマイズ | ネットPR.JP

今回は Twitter のウィジェットについて書きます。公式には「ウィジェット」ではなく「埋め込みタイムライン」と呼ばれています。

自社サイトに埋め込んでいる方も多いと思いますが、オウンドメディアに掲載するからにはオウンドメディアに馴染む見た目にしたいですよね。公式のウィジェットのカスタマイズでも十分見栄え良く、簡単にできます。

Twitter 埋め込みタイムラインの作成とウェブサイトへの設置

1. まずはご利用のTwitterアカウントにログインしてから、設定のウィジェットページに行きます。
2. ウィジェットページでは「新規作成」ボタンをクリックしてウィジェット作成画面に進みます。
3. ウィジェット作成画面で各種設定を行い、「ウィジェットを作成」ボタンをクリック。
4. 実際にウィジェットが作成され、ウェブサイトに貼り付けるための HTML コードが発行されます。
5. HTML コードを貼り付けてしまえばウィジェットが表示されます。

Twitter 埋め込みタイムラインの「公式な」カスタマイズ

さて本題。このウィジェットを「公式に」提供されている手段だけでカスタマイズしてみましょう。

まずは以下のページを参照してください。

• 埋め込みタイムライン | Twitter Developers

カスタマイズは先ほど「ウィジェットを作成」した時に発行された HTML タグの中にある a タグに情報を追加することで実現します。

いくつか抜粋してご紹介します。 テーマ

全体的な色味を指定できます。「ウィジェットを作成」でできることと変わりません。潔い “dark” と “light” の 2 択となっています。掲載するサイトの色味が暗い色の場合は “dark” を、明るい色の場合は “light” を選ぶのが無難です。

data-theme="dark" または data-theme="light"

リンクの色

これも「ウィジェットを作成」でできることと変わりません。お好きな色を HTML カラーコードで指定しましょう。
data-link-color="#cc0000"

幅・高さ

これも「ウィジェットを作成」でできることと変わりません。あまり大きいサイズを指定しても巨大なものは作成できないようです。
width="300" height="500"

インターフェース

data-chrome という属性にいくつかのパラメータを複数指定できます。複数指定する場合は半角スペースで区切ります。ヘッダ・フッタの表示・非表示制御など、カスタマイズには欠かせない部分となります。
data-chrome="noheader noborders"

ひとつずつ説明していきましょう。

その前にウィジェットのパーツの説明です。

そして、カスタマイズの種類です。

noheader

ウィジェットのヘッダーを非表示にすることができます。同時にフォローボタンも非表示になるので、フォロワーを増やしたい場合には別途オリジナルのボタンをページのどこかに追加することをオススメします。

nofooter

ウィジェットのフッターを非表示にできます。こちらは同時にツイート用のボックスが非表示になります。気軽にメンションを送ってもらいたい場合は表示しておいたほうがよいでしょう。

noborders

それぞれのツイートの間の境界線やウィジェットの周りの境界線を非表示にできます。後ほどでてくる data-border-color で境界線の色をカスタマイズする場合は非表示にしていると何をやっても無駄になりますので注意が必要です。

noscrollbar

縦スクロールバーを非表示にします。スクロールできなくなるわけではありませんが、ユーザーにはスクロールできない印象を与えてしまう可能性もあるのでユーザビリティを考慮するなら表示しておきたい項目です。

transparent

ウィジェットの背景を透明にします。オリジナルの背景画像を使用したい場合、またはサイトの背景と馴染ませたい場合はこちらを利用すると便利です。

ボーダー(境界線)の色

それぞれのツイートの間の境界線やウィジェットの周りの境界線の色を指定できます。ひとつ前の data-chrome で noborders を指定しているとここでの指定は無視されます。
data-border-color="#cccccc"

ツイート数の固定

表示するツイートの数を指定できます。1 件から 20 件まで指定できますが、表示する数にあわせてウィジェットの高さが自動で調整されます。このためサイト上の枠などの高さに合わせて表示したい場合には向きません。また、通常はウィジェットが自動で最新のツイートを読み込んでくれますが、ツイート数の固定を利用するとこの機能も動作しなくなります。
data-tweet-limit="15"

おすすめしたいユーザー

ウィジェット内から返信やリツイートを行った際に、オススメしたいユーザーアカウントを指定できます。複数指定が可能ですが、こちらはカンマ区切りでの指定となります。
data-related="netpr,news2u"

カスタマイズ結果

ここまでご紹介してきたカスタマイズを使って作成してみたウィジェットが下記のものです。
アイデア次第で魅力的なウィジェットを作成できます。ぜひチャレンジしてみてください。

今後さらにカスタマイズできる項目が変更になる可能性もあります。紹介しきれていない項目もありますので、詳しくは本家のドキュメントを参考になさってください。

• 埋め込みタイムライン | Twitter Developers