未分類

Twitterの新しいウィジェットをカスタマイズする

yusuke / 2012年9月12日

https://twitter.com/about/resources/widgets にて古くから提供されていたTwitterのウィジェットがリニューアルされ、今度からhttps://twitter.com/settings/widgetsより作成するようになりました。

新しいウィジェットは高さは指定できるものの幅が520px固定と広めで、配置する場所に困ることもしばしば・・・。しかもこの幅はスクリプトで生成されるタグに直接書かれているのでスタイルシートで変更することはたぶんできません。

そこで以下のようにやや強引に幅を指定してみました。

// 普通に https://twitter.com/settings/widgets で生成されるスクリプト
<a class="twitter-timeline" data-dnt=true href="https://twitter.com/search?q=%23samuraism" data-widget-id="生成されたID">#samuraism に関するツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

// jQueryとsetTimeoutの組み合わせで無理矢理幅を変更するところ
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        function setWidgetWidth() {
            if ($("#twitter-widget-1").length > 0) {
                // ↓ ここを書き換えれば好きにカスタマイズできる
                $("#twitter-widget-1")[0].width = "300px";
                // ↑ ここを書き換えれば好きにカスタマイズできる
            } else {
                setTimeout(setWidgetWidth, 500);
            }
        }
        setWidgetWidth();
    </script>

実際に貼り付けたところ:




setTimeoutで定期的にidがtwitter-widget-1の要素を探して、見つかったら幅を変更するという仕組みです。
上記の例では幅を300ピクセルに指定していますが、if文の中に書く内容は自由なので幅以外にもカスタマイズできます。

追記:
幅についてはaタグのwidthでカスタマイズできるとのコメントがありました!
・Embedded Timelines | Twitter Developers