How To Add Official Twitter Button On Your Blog

Update: The Official Twitter share button has started working. You can try it below here.

The official Twitter button will be out by tomorrow and many still can’t wait to see the launch of official Twitter button. Hence this is a pre post on how to add the button on WordPress and Blogger blogs. Since the Twitter button hasn’t been officially launched, the retweet won’t work for some time although you can see the number of share counts. But once its launched, the retweet function starts working seamlessly. So as of now, I will be guiding you on, how to install the Twitter official button on your Blogger and WordPress blogs.

twitter's official twitter button

See the demo

For WordPress Blogs

Step 1: Navigate to header.php and copy the code which you find below. Paste the code between <head> and </head>

<script src="" type="text/javascript"></script>

Step 2: Now go to single.php and paste this code anywhere you want. (possibly place it before <?php the_content(); ?>)

<a href="" class="twitter-share-button" data-count="vertical" data-via="YOUR TWITTER HANDLE">Tweet</a>

If, you want to add horizontal button, just remove this line data-count=”vertical” from step 2.

For Blogger blogs

Step 1: Copy this code and paste the with </head> in Edit HTML

<script src="" type="text/javascript"></script>

Step 2: Search for <div class=’post-header-line-1’/> if not <data:post.body/> and immediately after that place this code.

<div style='float:right; margin-right:10px;'>
<a href="" class="twitter-share-button" data-count="vertical" data-via="YOUR TWITTER HANDLE">Tweet</a>

[Image credit- Mashable]

August 11, 2010. This entry was posted in Blogger, Tutorials, Twitter, WordPress and tagged . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

12 Responses so far!

  1. Pingback: Tweets that mention How To Add Official Twitter Button On Your Blog | Bloggermint --

  2. The button looks really cool. Now tweetmeme has to do something to keep it in RT buttons race. Otherwise this will replace everything.

  3. Pingback: How To Add Official Twitter Button On Your Blog |

  4. @Sathish – Yeah. But people would be preferring the official Twitter button than any third party buttons. So the heat is on Tweetmeme.

  5. Nice Tutorial,,, i am going to try this in my blog….
    .-= Balaji´s last blog ..Best iPhone 4 wallpapers =-.

  6. I placed the code in header.php and the single.php’s code. Only a text saying ‘tweet’ is displayed instead of the whole button. Upon click, it works. But visually, it’s not right. I’m confused.

    You didn’t say what to replace with YOUR TWITTER HANDLE.
    .-= Sajib´s last blog ..3 easy WordPress hacks to make your blog stand out =-.

  7. Pingback: Comment ajouter le Tweet Button sur son blog Wordpress ? | Gary

  8. @Sajib – YOUR TWITTER HANDLE means place your twitter username there and some time the button does displays the “Tweet” text. Now it works fine for everyone.

  9. Nice walk thru.. I need to get the new button up soon.
    .-= John Paul Aguiar´s last blog ..Blogger Tools That Every Blogger Needs To Use =-.

  10. i am using blogger, unable to access 2nd code
    there are already 3 tags
    what to do?

  11. In Step One, I already have a lot of code between head and head ( and ) in Header.php -Where exactly do I paste the code, in that case, since the official Tweet box is not showing in my ( blog yet??

Leave a Reply

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