Improved Twitter Embed CSS

I love oEmbed. The fact that you can just paste a url of something into an editor and it automatically embeds is fantastic. And while Twitter embeds do look pretty good out of the box, there are a few things that you can tweak to make it a bit better.

Center your embedded tweets

By default, tweets are left aligned when embedded. But you can change that with a bit of CSS. I’m surprised this isn’t the default behavior for tweets. Most people embed a tweet on it’s own line, and in most situations it looks much better to center tweets. Luckily, this is pretty easy to accomplish. Just add this to your website’s stylesheet, and tweets will be able to be centered:

Like this one:

Ahh, nice and centered.

Style the loading state of tweets

While tweets are loading, they will show up as regular text on the page within <blockquote> tags. This means any embedded tweets will show up briefly on the page styled as a blockquote So until the tweet finishes loading.

I style blockquote to be large text with a lot of margins so that quotes get a lot of attention and focus in an article.

The problem with quotes on the Internet is that it’s hard to verify their authenticity. In fact, most quotes on the internet are just made up.

Abraham Lincoln, 1999

Maybe it’s corny, but I like my quotes to look this way. But this becomes a problem when embedded tweets get blockquote css attached to them briefly while loading. Here’s a screen recording of what it looks like while a tweet loads (slowed down for detail).

So this is bad, especially now that tweets can be up to 280 characters. So to get around this, I added some CSS that applies to the tweet, only while it’s loading.

This CSS mimics the style of a loaded tweet, while the tweet is loading.

The HTML markup this CSS applies to is only present while the tweet is loading. So the custom CSS only applies to the tweet while it’s loading (much the way before default blockquote styling only applied while it was loading). After the change, it looks like this (slowed for detail)

This is much better, and less jarring of a change. So if you have a tweet near the top of the page, it would look like the page loading normally instead of a wacky blink/flicker of rapidly changing markup.

Style for after the tweet is loaded

I like the way tweets look by default, but if there’s something about them you want to change, twitter has published a guide to help. Check out CSS for embedded Tweets for more information.

Read more: