Where Marketers Go to Grow

    Search HubSpot's Blogs

    Start typing...

    Press return/enter to start your search

    March 16, 2013 // 9:00 AM

    How to Center Align Your Embedded Tweets [Quick Tip]

    Written by Pamela Vaughan | @

    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 350,000+ fellow marketers! Get HubSpot's latest marketing articles straight to your inbox. Enter your email address below:

    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.

    Comments