Fluid-width Twitter widgets

Twitter’s timeline widget isn’t very pretty; but the reality is many of us are forced to make do with this thing. While there are ways of customizing it, we’re still left with a widget that is never wider than 520px. This limit is especially evident (and ugly) on mobile devices where, for the most part, elements are stacked on one another and take up the full width of the browser. But the widget refuses to be as wide.

Why 520px? That’s what I’d like to know. Fortunately, there is a way around this.

When grabbing embed code from Twitter, they’ll give you something that looks like this to paste into your document:

<a class="twitter-timeline" href="https://twitter.com/crazy_joe_davola" data-widget-id="1234567890123456789">Tweets by @crazy_joe_davola</a>

and

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],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>

Paste in all that code, and then forget about the script tag; you will need it for the widget to work but there’s no need to mess with it. The first element – the a element – is what we’re concerned about.

What you may not know about this link element is that it is a way of placing an iframe onto your page. Let’s have a look.

Let’s say I have a footer and in it, I have a div containing the widget. It would look like this in our HTML file:

<footer>
	<div class="tweets">
		<a class="twitter-timeline" href="https://twitter.com/nathanfoon" data-widget-id="411954987346825216">Tweets by @nathanfoon</a>
	</div>
</footer>

If we view the code in the browser dev tools, it looks like this:

<footer>
	<div class="tweets" data-twttr-id="twttr-sandbox-0">
		<!-- Imagine there is an iframe element here... -->
	</div>
</footer><

(For some reason, WordPress strips out the iframe element. Please use your imagination.)

The a has magically become an iframe! And guess what – you can style this in your CSS. If there’s any width-related inline styling in the a tag you pasted in your HTML, get rid of it. Now go ahead and write a rule to target your iframe, and give it a width: 100%.

.tweets iframe {
	width: 100%;
}

This, in combination with Twitter-defaulted max-width: 100% makes your widget no wider or narrower than its parent. Your widget will now look spectacular.

One thought on “Fluid-width Twitter widgets

  1. Pingback: HackerYou Bootcamp Student Blog Post Roundup: Week 3 | HackerYou

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s