How to Center Align Your Embedded Tweets [Quick Tip]

Pamela Vaughan
Pamela Vaughan

Updated:

Published:

We love us some embedded tweets. They're a great way to give your content a little pizzazz, and they help to enhance engagement with it, too -- among other use cases. But a couple of months ago when we went to embed a tweet into one of our blog articles, we noticed that Twitter no longer included an out-of-the-box option to specify the alignment of embedded tweets like it used to. And since then, every time we've gone to embed a tweet, we've had to look up time and time again just how to center them in our content. Four words: Pain. In. The. Butt.

person learns how to center align your embedded tweets

Because we figured this might be irking some of you, too, we thought we'd pull together a quick tutorial so you never have to Google it again. Bookmark this article to reference the next time you get frustrated about how silly and unprofessional that left-aligned tweet on your blog post or web page looks.

Download Now: How to Use Twitter for Business [Free Kit]

How to Center Align Your Embedded Tweets 

Step 1: Generate the Tweet's Standard Embed Code

For the tweet you want to embed, click More and select Embed Tweet.

embed-tweet

Step 2: Copy the Embed Code

Next, copy the standard embed code Twitter generates for you. 

embed code resized 600

The full embed code will look something like this:

<blockquote class="twitter-tweet"><p>These 101 companies are totally ROCKING social media: <a href="http://t.co/d0ZQR5C5ar" title="http://hub.am/YZZGgu">hub.am/YZZGgu</a> Wouldn't you say?</p>&mdash; HubSpot (@HubSpot) <a href="https://twitter.com/HubSpot/status/312028320004980736">March 14, 2013</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 

 

Step 3: Paste This Code Into Your Website's HTML

Wherever you want your embedded tweet to appear, paste this code into the HTML of your website. If you kept all of Twitter's default options, this is how your embedded tweet would look on the page. 

Now wouldn't it be nice if this tweet was centered on the page?

Step 4: Center Your Embedded Tweet

  1. In the HTML, do a Ctrl F search for twitter-tweet to find your embedded tweet
  2. Find the first row of the embedded tweet, where it reads <blockquote class="twitter-tweet">
  3. Insert tw-align-center after twitter-tweet, and be sure to include a space after the word tweet 

The final product will read: <blockquote class="twitter-tweet tw-align-center">

Final Code for the Centered Embedded Tweet:

<blockquote class="twitter-tweet tw-align-center"><p>These 101 companies are totally ROCKING social media: <a href="http://t.co/d0ZQR5C5ar" title="http://hub.am/YZZGgu">hub.am/YZZGgu</a> Wouldn't you say?</p>&mdash; HubSpot (@HubSpot) <a href="https://twitter.com/HubSpot/status/312028320004980736">March 14, 2013</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>  

And here's how it will look on your page:

Voila! Beautiful, and easy as pie :)

To learn about how to further customize your embedded tweets by changing their default theme, color, width, or height, check out Twitter's helpful guide here. And for more ideas about how to use embedded tweets in your marketing, check out this post.

Image Credit: BeauGiles

New Call-to-action
 

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Download this free kit to establish and grow your Twitter presence.

Marketing software that helps you drive revenue, save time and resources, and measure and optimize your investments — all on one easy-to-use platform

START FREE OR GET A DEMO