LoginSignup
2
5

More than 5 years have passed since last update.

Twitterの埋め込みウィジェットの横幅を画面に合わせる方法

Last updated at Posted at 2016-05-17

Twitterの埋め込みウィジェットの横幅調整は、埋め込みの
コードをdivで包んで、div側で行えばよい、という話。

Twitterの埋め込みウィジェットを利用しようとして、
横幅の調整に少しハマッたので、その対応策のメモ。

ウィジェットの作成時(※1)に指定した横幅が、
実際に吐き出されるウィジェットには反映されなくて、困った。

※1:埋め込みタイムラインhttps://dev.twitter.com/ja/web/embedded-timelines

「Twitter ガジェット 横幅」でGoogle検索すると、
「jQueryを使って強引に設定する」とかそういうのが見つかる。
えー、もっと簡単に出来るんじゃね?と思って、
以下のようにdiv要素で囲って「width:100%; overflow: scroll;」を
指定してあげたところ解決した。
(※2;この例では、画面の横幅に合わせてる)

gadget.html
<div style="height: 480px; width:100%; overflow: scroll; background-color: white;">
        <!-- 以下Twitter公式が吐いたコード -->
    <a class="twitter-timeline"  href="https://twitter.com/xingyanhuan" data-widget-id="645854653368832000">@xingyanhuanさんのツイート</a>
    <script language="JavaScript">
    !function(d,s,id){
        var js;
        var fjs=d.getElementsByTagName(s)[0]
        var 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>
</div>

で、後から知ったが、こっちのページに「別途div要素を追加して」
って書いてあるね。メジャーな方法でしたかw
http://algorhythnn.jp/blg/2014/01/28/width-change-twitter-widget/

なお、divで包むってのは、高さをあらかじめ指定する上でもよいかも。
Twitterの埋め込みウィジェットが読み込まれるまでタイムラグがある故の
縦方向の配置が時間差でズレる現象、を回避できる。

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5