Twitter公式ウィジェットのiframeの中をカスタマイズ

twitter公式ウィジェットを使用してWebサイトに埋め込む方法はオフィシャルサイトに記述されてますが、埋め込んだ際のiframeの中をカスタマイズする方法です。

 

js

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="css/tw.css" rel="stylesheet" type="text/css">');
  }
  else {
    setTimeout(function(){
      changeTwitterWidgetDesign();
    }, 350);
  }
}

changeTwitterWidgetDesign();

 

css

.timeline-Header{display:none;}
.timeline-Tweet{padding:0 !important;position:relative;border-bottom:1px solid #eeeeee;padding-bottom:15px;margin-bottom:15px;}
.timeline-Tweet:last-child{border:none;}
.timeline-Tweet:hover{background:none;}
.SandboxRoot.env-bp-660 .timeline-Tweet-text{font-size: 11px;line-height: 150%;margin-left:70px;}
.timeline-LoadMore{display:none;}
.timeline-Tweet-actions{display:none;}
.timeline-Tweet-brand{display:none;}
.SandboxRoot.env-bp-660 .timeline-Tweet-author, .SandboxRoot.env-bp-820 .timeline-Tweet-author{padding-left:70px}
.timeline-Tweet-metadata{position:absolute;top:0;right:0;}

現在の稼働率
150%

お仕事のご依頼は
受け付けておりません。