HTML/CSS for Twitter widget width

Question

The code Twitter gives you to paste in the html looks like this:

<a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="248169276782018560">Tweets by @username</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>

They allow you to set a height, which I set to 600. When placed on my site I get this (when viewing the source):

<iframe id="twitter-widget-6" classname="twitter-timeline twitter-timeline-rendered" scrolling="no" frameborder="0" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " width="220" height="600"></iframe>

The 220 width is what is killing me. I want the width to be the full width of the container, which is 100% (for a mobile site). Currently the 220 width goes a little more than halfway across the page and displays an ugly scrollbar.

So, why is it setting the width to 220, and how can I get it to expand to it's parent width?

Answer 1

if you just use

#twitter-widget-0 { 
    width: 100% !important; 
}

it will work but it will cut off on iOS devices (haven't tested on android). To fix this, you need to add width and height to the twitter-timeline tag like so:

<a class="twitter-timeline" width="280" height="300" href="https://twitter.com/YOURTWITTERUSERNAMEHERE" data-widget-id="YOURWIDGETIDHERE">Tweets by @YOURTWITTERUSERNAMEHERE</a>

Answer 2

#twitter-widget-6 {
  width:600px;
}

The above works, I presume the numbers correspond with how many widgets you've created. Is the width the only thing we can change, what about fonts, I cant seems to change this? The Twitter widget is so ugly it's hard to make it sit nicely in any layout.

Answer 3

Twitter allows you to adjust the width and height of the timeline widget via HTML width and height attributes BUT the minimum width they accept is 220 pixels EXAMPLE: width="220" , height="350"

FROM Twitters developers page: The minimum width of a timeline is 220px and the maximum is 520px. The minimum height is 350px.

Answer 4

Here is how I did it, using almost the same logic than Chandrakant did use to insert the style in the iframe.

First of all: add twitter widget the proper way

<script type="text/javascript">
// https://dev.twitter.com/web/javascript/loading
window.twttr = (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
    if (d.getElementById(id)) return t;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    js.async = true;
    fjs.parentNode.insertBefore(js, fjs);
    t._e = [];
    t.ready = function(f) {
        t._e.push(f);
    };
    return t;
}(document, "script", "twitter-wjs"));
</script>

Now you have a nice window.twttr._e array which may contain everything that will run once twitter widget.js is loaded.

Note that I added js.async = true;

Now you may in the same script or afterward do:

<script type=text/javascript">
// https://dev.twitter.com/web/javascript/events
window.twttr.events.bind('loaded', function (e) {
  e.widgets.forEach(function (widget) {
    // js to support twitter 100% if present
    $(widget).contents().find('head').append('<style>.timeline { max-width: 100% !important; width: 100% !important; }</style>');
  });
});
</script>

Note that I used the jquery way to append the style at the end of the iframe head content. You can do it the classical way but it's longer.

<script type="text/javascript">
// ...
widget.contentDocument.getElementsByTagName('head')[0]...
// ...
</script>

Answer 5

With the recent update (or screw up) twitter have forced all feed widgets to show images automatically on load up no matter what options are set within twitter settings.

Now I am using their own widget feed within a html based site and want to disable the images from loading up. I don't mind having to start over and but could anyone advise me on where i might find a customisable html and js based twitter feed that won't include images.

Answer 6

This works for me:

.twitter-timeline {
    height: 180px !important; 
    width: 100% !important; 
}