WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

Twitter ウィジェットのカスタマイズ

ウィジェットの作り方

Twitterにログインした状態で、自分のアイコンをクリック→設定→ウィジェット→新規作成

パラメータ

パラメータ
data-chrome noheader(ヘッダー非表示)、nofooter(フッター非表示)、noborders(境界線を非表示)、noscrollbar(タイムラインのスクロールバーを非表示)、transparent(背景色を透明にする)複数指定する場合は半角スペース区切り
data-tweet-limit タイムラインに表示させるツイート数(1~20)
data-related 対象のTwitterと関係のあるアカウントを指定。複数の場合はカンマ区切り
data-theme ウィジェットのテーマ。darkもしくはlight
data-link-color リンク色
data-border-color 境界線の色を指定
data-width ウィジェットの横幅
ウィジェットの高さ data-height

細かいCSSの調整

そのまま読みこんだCSSにスタイルを追加しても反映されない。
Twitterウィジェットが読みこまれてからCSSを読みこむ必要がある。

function changeTwitterWidgetDesign(){
  var $twitter_widget = $('iframe.twitter-timeline');
  var $twitter_widget_contents = $twitter_widget.contents();

  if ($twitter_widget.length > 0 && $twitter_widget[0].contentWindow.document.body.innerHTML !== ""){
    $twitter_widget_contents.find('head').append('<link href="/assets/css/twitter.css" rel="stylesheet">');
  } else {
    setTimeout(function(){
      changeTwitterWidgetDesign();
    }, 350);
  }
}