2

Twitter Tip: How to Center Embedded Tweets

Posted by Jim Tanous on January 12, 2018
center embedded tweet

If you want to share something from Twitter on your website, Twitter makes it easy to embed a tweet. Embedding a tweet is often preferable to copying a screenshot of a tweet as it’s fully interactive and allows your website’s readers to jump directly to the Twitter user’s profile, retweet or quote the tweet themselves, and see any responses the tweet may have generated.
But there’s one big problem with the way that Twitter embeds tweets: they’re not centered. By default, embedded tweets are left-aligned.
embedded tweet left
This may not be an issue for you, but if you value design and consistency in your website, having embedded tweets aligned to the left can be quite annoying, especially if all of your other embedded images and videos are centered.
The good news is that it’s quick and easy to center an embedded tweet just by adding a bit of text to the embed code that Twitter provides. Here’s how it works.

Embed a Tweet

First, find the tweet you want to embed and grab its embed code. This is normally accomplished by clicking on the small downward facing arrow in the top-right corner and selecting Embed Tweet from the menu.
twitter embed tweet
Copy the code provided by Twitter and head over to your website’s CMS. The process to add and edit HTML on your webpage will vary by platform, so be sure to check with your platform’s documentation if you’re unsure. For example, you can see the HTML and other code of a post on WordPress by clicking Text in the editor. Other platforms use the word Source. Once you’ve got it figured out, paste the tweet’s embed code in the desired location.

Center Embedded Tweets

Now, if we stop here, you’ll have a standard left-aligned tweet when you preview the page. To center an embedded tweet, look at the embed code and find this location near the beginning:

<blockquote class="twitter-tweet">

center embedded tweet code
After twitter-tweet, but inside the quotation marks, add tw-align-center, making sure that you leave a single space between the two statements:
center embedded tweet code
That’s it! Just save your change and preview or publish your post. You’ll now see that your embedded tweet is centered.
center embedded tweet

2 thoughts on “Twitter Tip: How to Center Embedded Tweets”

George says:
I don’t see why people like Twitter so much. It feels kinda chaotic to me.
Reply
Steve Pringle says:
Found your site from Apple’s forum looking tips for my hack.
Question. Will “tw-align-right” align the box to the right?
Also, what about validation? Will the normal or edited pass?
Drives me bonkers when I get my site to validate and something breaks it.
Reply
Jim Tanous says:
Yes, “tw-align-right” seems to align it on the right side, although I saw some formatting issues when testing that so I’m not sure if it will work universally. As for validation, if you are referring to Card Validation I’m not sure.
Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.