みかづきブログ その3

3ヶ月つづけてみました。

Twitterウィジェットの最大幅を520px以上に設定する

kimizuka.hatenablog.com

Twitterウィジェットを制作する際に、width、heightを渡せばその大きさになるのですが、限界もある模様です。

dev.twitter.com


width

180px 〜 520px

iframeのmin-width180pxに、
iframe内のdiv.timeline-Widgetにmax-width520pxに設定されているため、上記の値が限界になります。
なので、iframeの幅を520pxよりも大きく設定しても期待通りのレイアウトになりません。

いちかばちか、

// ウィジェットのIDを指定
document.getElementById("twitter-widget-0").contentDocument.querySelector(".timeline-Widget").style["max-width"] = "none";

的な感じでmax-widthを上書きしてみたのですが、うまくいく時とうまくいかない時がありました。
(クロスドメインになるのでうまくいかないと思っていたのですが、サーバ側で許可されているのかうまく書き換えられるときもありました)


widthの上限を突破するデモ

Twitterウィジェット - js do it


JavaScript
(function(win, doc) {

  "use strict";

  var timer = setInterval(function() {
    var timeline = doc.getElementById("twitter-widget-0");
      
    if (timeline) {
      if (timeline.contentDocument.querySelector(".timeline-Widget")) {
        clearInterval(timer);
        timeline.contentDocument.querySelector(".timeline-Widget").style["max-width"] = "none";
      }
    }

  }, 100);
})(this, document);

heihgt

200px 〜

iframeのmin-height200pxに設定されているので200pxが下限になります。
こちらは簡単に上掛けますが、特にメリットがあるとは思えません。