TECHNIQUE
9.252013
Twitter埋め込みタイムライン(ウィジェット)カスタマイズ方法
コード(ウィジェットのソースコード)の作成とカスタマイズ
ホームページへ埋め込み場合のTwitterのタイムラインのカスタマイズ方法をご紹介します。コード(ウィジェットのソースコード)の作成方法については過去の記事をご覧ください。
埋め込みタイムラインは、Twitterのタイムラインを自分のサイトに表示できるツールです。タイムラインはリアルタイムで更新され、タイムライン上から直接、返信、リツイート、お気に入りに登録することができます。
埋め込みタイムラインのタイプ
ユーザー、お気に入り、リスト、ハッシュタグのタイムラインを埋め込むことができます。
埋め込みタイムラインの作成
Twitterへログインし、設定のウィジェットページからタイムラインを作成できます。以下の埋め込みコード(ウィジェットのソースコード)は弊社Twitterアカウントの例です。
<a class=”twitter-timeline” href=”https://twitter.com/vlstaff” data-widget-id=”382837768763604993″>@vlstaff からのツイート</a><script type=”text/javascript”>// <![CDATA[!function(d,s,id){varjs,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);// ]]></script>
このコード(ウィジェットのソースコード)をホームページへ埋め込むと以下のようになります。
Twitter埋め込みタイムラインの公式のカスタマイズ方法
公式のカスタマイズについては「Twitter Developers」をご覧ください(追記:Twitter Developersは閉鎖しました。代わりにTwitterへログインして設定メニューよりウィジェットを作成できます)。
- 埋め込みタイムライン|Twitter Developers
代表的なカスタマイズ例を抜粋してご紹介します。カスタマイズはウィジェットを作成で発行されたHTMLタグの中にある<a>タグに対して情報を追加できます。
テーマ
data-theme=”dark”またはdata-theme=”light”
リンクの色
data-link-color=”#cc0000″
サイズ(幅・高さ)
ウィジェットを作成で調節できます。初期設定では520×600pxです(追記:Twitterのアップデートにより、年々初期設定は変わります)。
width=”300″ height=”500″
インターフェース
data-chrome属性でウィジェットのレイアウトやインターフェースをカスタマイズできます。
・noheader
タイムラインのヘッダーやフォローボタンをなくします。フォロワーを増やしたい場合は別途ボタンを表示しておきましょう。
・nofooter
タイムラインのフッターやツイートボックスをなくします。メンションを送ってもらいたい場合は表示しておいたほうがいいです。
・noborders
ウィジェットの周りやツイートの間のボーダー(境界線)をなくします。
・noscrollbar
タイムラインのスクロールバーが表示されないようにします。スクロールができないわけではありませんが、スクロールできない印象を与えてしまう可能性があるのでアクセシビリティやユーザビリティが悪くなる場合があるので要注意です。
・transparent
タイムラインの背景を透明にします。オリジナルの背景画像を使用したい場合、サイトの背景になじませたい場合は便利です。
ボーダー(境界線の色)
data-border-color=”#cc0000″
ツイートの間の境界線やウィジェットの周りの色を指定できます。先ほど紹介した data-chrome で noborders を指定していると、設定しても無視されます。
ツイート数の固定
data-tweet-limit=”5″
表示するツイート数を1から20まで指定できます。指定されている場合、そのツイート数が表示されて、ウィジェットの高さが全てのツイートがスクロールせずに見られるように調整されます。ウィジェットのサイズが固定になるので、サイトの高さにあわせて表示したい場合には不向きです。また、通常のウィジェットは自動更新されますが、表示ツイート数を固定すると、自動更新されません。
おすすめしたいユーザー
data-related=”benward,endform”
返信、リツイート、お気に入り登録の際にユーザーにおすすめしたいユーザーを指定示できます。複数指定が可能ですが、カンマ区切りで指定します。
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。