まだ重たいCMSをお使いですか？
毎秒1000リクエスト を捌く超高速CMS「adiary」

2013/06/12(水)twitter埋め込みタイムラインのデザイン変更方法

はてブ数 ネット

※新しい記事に移動しました


API1.0の廃止と共にTwitterウイジェットが使えなくなってしまいました。新しい埋め込みタイムラインは通常の方法では細かいデザイン（配色）を変更することができないので、小細工してデザイン変更したまとめ。

新ウイジェットのHTML

<a class="twitter-timeline" href="https://twitter.com/nabe_abk"
 data-widget-id="344823557110497281">@nabe_abk からのツイート</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

設定値がなくなり「data-widget-id="344823557110497281"」というwidget-idで管理されるようになりました。この設定はtwitterの設定画面のものが反映されるようです。

生成されるHTML

<iframe title="Twitter Timeline Widget"
 style="border: medium none; max-width: 100%; min-width: 180px;"
 allowtransparency="true" class="twitter-timeline twitter-timeline-rendered"
 id="twitter-widget-0" frameborder="0"
 height="600" scrolling="no" width="520"></iframe>

aタグで書かれていたウイジェット情報がiframeに置きかわっています。以前のように直接HTMLで展開されるわけではないため、CSSでデザイン変更という手も使えません。

iframeの中身を取得する

しょうがないのでiframeの中身を取得しました。

<textarea cols="80" rows="10" id="xxx"></textarea><br>
<input type="button" onclick="get_tw_wiget();" value="取得"><br>

<script type="text/javascript">
function get_tw_wiget() {
	var iframe = document.getElementById('twitter-widget-0');
	var doc = iframe.contentDocument || iframe.document;
	var ele = doc.documentElement;
	//alert(ele.innerHTML);

	var ta = document.getElementById('xxx');
	ta.value = ele.innerHTML
}
</script>

iframe内の構造（2013/06/13現在）

<head>
	<link href="http://platform.twitter.com/embed/timeline.567ea07eddcd605b5baec3636ed11d02.default.css" type="text/css" rel="stylesheet" id="twitter-widget-css">
	<base target="_blank">
	<style type="text/css">body{display:none}</style>
</head>
<body>
<div data-twitter-event-id="0" id="twitter-widget-0" class="root timeline"（以下省略） lang="ja">

<div class="timeline-header customisable-border">
<h1 class="summary">
  <a class="customisable-highlight" href="https://twitter.com/nabe_abk" title="nabe@abkさんからのツイート">ツイート</a>
</h1>
<iframe data-twttr-rendered="true" title="Twitter Follow Button" style="width: 165px; height: 20px;" class="twitter-follow-button twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.1370380126.html#_=1371047423479&amp;align=right&amp;id=twitter-widget-1&amp;lang=ja&amp;screen_name=nabe_abk&amp;show_count=false&amp;show_screen_name=true&amp;size=m" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
</div>

  <div role="alert" class="new-tweets-bar" aria-live="polite" aria-atomic="false" aria-relevant="additions">
    <button><i class="ic-top"></i>新しいツイート</button>
  </div>

  <div style="height: 513px;" class="stream">
    <ol class="h-feed">

<!--***ひとつのツイートの始まり********************************************************************-->
      <li class="tweet h-entry customisable-border" data-tweet-id="344803094204399616">
	<a class="u-url permalink customisable-highlight" href="https://twitter.com/nabe_abk/statuses/344803094204399616" data-datetime="2013-06-12T13:07:18+0000"><time pubdate="" class="dt-updated">1<abbr title="時間">時間</abbr></time></a>

  <div class="header h-card p-author">
  <a class="u-url profile" href="https://twitter.com/nabe_abk" aria-label="nabe@abk (ユーザー名: nabe_abk)">
    <img class="u-photo avatar" alt="" src="https://si0.twimg.com/profile_images/1124339503/adiary-100915_normal.jpg" data-src-2x="https://si0.twimg.com/profile_images/1124339503/adiary-100915_bigger.jpg">
    <span class="full-name">
      
      <span class="p-name customisable-highlight">nabe@abk</span>
    </span>
    <span class="p-nickname" dir="ltr">@<b>nabe_abk</b></span>
  </a>
</div>

  <div class="e-entry-content">
    <p class="e-entry-title">ツイート内容</p>
  </div>

  <div class="footer customisable-border">
    <ul class="tweet-actions">
  <li><a href="https://twitter.com/intent/tweet?in_reply_to=344803094204399616" class="reply-action web-intent" title="返信"><i class="ic-reply ic-mask"></i><b>返信</b></a></li>
  <li><a href="https://twitter.com/intent/retweet?tweet_id=344803094204399616" class="retweet-action web-intent" title="リツイート"><i class="ic-retweet ic-mask"></i><b>リツイート</b></a></li>
  <li><a href="https://twitter.com/intent/favorite?tweet_id=344803094204399616" class="favorite-action web-intent" title="お気に入り"><i class="ic-fav ic-mask"></i><b>お気に入り</b></a></li>
</ul>
  </div>
</li>
<!--***ひとつのツイートの終わり********************************************************************-->

    </ol>
    <button class="load-more customisable">さらに読み込む</button>
    <p class="no-more-pane" role="alert">
      これ以上のツイートはありません。
      <i class="ic-bird-flourish"></i>
    </p>
  </div>
  
<div class="timeline-footer">
  <a class="tweet-box-button web-intent" href="https://twitter.com/intent/tweet?screen_name=nabe_abk">@nabe_abkさん宛にツイートする</a>
</div>
</div></body>

ツイートが複数あるときは繰り返しです。

もともと変更可能なデザイン（2013/06/13現在）

貼り付けHTMLのdata属性等を設定することでCSSに頼らなくても以下のものは変更可能です。

  • テーマ: data-theme="dark" または data-theme="light"
  • リンクの色: data-link-color="#cc0000"
  • 幅と高さ
  • レイアウト「noheader nofooter noborders noscrollbar transparent」
  • ボーダーの色: data-border-color="#cc0000"
  • 言語:
  • ツイート数を固定
  • おすすめしたいユーザー

transparentに設定すると背景およびボーダーが非表示になるようです。

デザインの変更(2014/08/10更新)

jQueryなどを使って直接CSSを適用させてしまうのが確実ではありますが、それでは新たなツイートをロードしたときに再度jQueryでCSS処理させる必要があります。

仕方ないのでスペシャルなウイジェットiframe専用のCSSをロードさせることにしましょう。

<script type="text/javascript">
!function(){
function css_fix() {
	var iframes = document.getElementsByTagName('iframe');
	var ch;
	for (var i=0; i<iframes.length; i++) {
		var iframe = iframes[i];
		if (iframe.id.substring(0, 15) != 'twitter-widget-') continue;
		if (iframe.className.indexOf('twitter-timeline')<0) continue;
		var doc = iframe.contentDocument || iframe.document;
		if (!doc || !doc.documentElement) continue;
		ch = doc.documentElement.children;
		break;
	}
	if (!ch) return -1;
	var head;
	var body;
	for (var i=0; i<ch.length; i++) {
		if (ch[i].nodeName == 'HEAD') head = ch[i];
		if (ch[i].nodeName == 'BODY') body = ch[i];
	}
	if (!head || !body) return -2;
	if (body.innerHTML.length == 0) return -3;
	var css = document.createElement('link');
	css.id = "add-tw-css";
	css.type = "text/css";
	css.rel  = "stylesheet";
	css.href = "/css/css-for-twitter-widget.css";
	head.appendChild(css);
	return ;
};
var try_max = 20;
var try_msec = 250;
function callfunc() {
	var r=1;
	if (try_max--<1) return;
	try{
		r = css_fix();
	} catch(e) { ; }
	if (r) setTimeout(callfunc, try_msec);
}
setTimeout(callfunc, try_msec);
}();
</script>
  • 上記JavaScriptソースコードのライセンスはWTFPLです。
  • widgetを1画面に2つ以上貼り付ける場合は、多少改造が必要です。
  • jQueryを使うともっと簡単だと思います。
  • タイマーではなくもっと賢い方法を思いついたら（知っていたら）教えてください。
  • IE6, 7非対応。
  • 2014/01/31 ツイートボタンがあるとき動作が不安定になる不具合を修正

外部CSSではなく直接指定する方法

上のソースを一部書き換えれば可能になります。

	var css = document.createElement('style');
	css.id = "add-tw-css";
	css.type = "text/css";
	css.innerHTML = '\
body div.timeline { \
	background-color: red; \
	border-color: blue; \
} \
	';