<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1657797781133784&amp;ev=PageView&amp;noscript=1">

Where Marketers Go to Grow

March 16, 2013 // 9:00 AM

How to Center Align Your Embedded Tweets [Quick Tip]

Written by | @

twitter blue bird

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.

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.

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

Topics: Social Media

Subscribe to HubSpot's Marketing Blog

Join 300,000+ fellow marketers! Get HubSpot's latest marketing articles straight to your inbox. Enter your email address below:

21 Comments

Sorry we missed you! We close comments for older posts, but we still want to hear from you. Tweet us @HubSpot to continue the discussion.

21 Comments
subscribe to hubspot's marketing blog
X

Join 300,000 Fellow Marketers

Get expert marketing tips straight to your inbox, and become a better marketer. Subscribe to the Marketing Blog below.