Saturday, October 9, 2010

How to Add Official Tweet Button to Blog

How to add Tweet Button on Blogger blog?
How to add Tweet Button on Blogspot blog?
How to add official Tweet Button on Blogger blog?
How to add official Tweet Button on Blogspot blog?

You want to add the official Tweet Button at the end (or at the top) of each of your blog post, here's how.

official tweet button

Firstly, go to Dashboard > Design > Edit HTML. Then click Expand Widget Templates.

Search for this code:

<div style='clear: both;'/> <!-- clear for photos floats -->

Then, here's the code to add the Tweet Button.

<div style='align:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-via='simpleblogrtips' expr:data-text='data:post.title' expr:data-url='data:post.url' href='' rel='nofollow'>Tweet</a>
<b:if cond='data:post.isFirstPost'>
<script src='' type='text/javascript'>

Take note that the code is different from the code generated on Twitter Tweet Button page because it is modified for better performance.


Where to add Tweet Button?

To add it above each blog post, add the code before <data:post.body/>.

To add it after each blog post, add the code after <div style='clear: both;'/> <!-- clear for photos floats -->.

To distance the button away from the blog post, add <br/> before or after the Tweet Button code depending on where to put it.

Click "Save Template" and you're done.


How to customize Tweet Button?

1) To change button style, change "horizontal" to "vertical" or "none".

twitter button vertical

twitter button horizontal

twitter button

2) To change via Twitter account, change "simpleblogrtips" to your preferred Twitter account.

That's all for now!


Jeffrey Remick said...

Brilliant - exactly what I was looking for. Thank you!

Jason Sarpong, Live Life Fly said...

I have a question about this. if i have a post with jump breaks, how do i get this tweet button below the Read More>> button? Because now its above it and i want to have it below it.

Simple Blogger Tips said...

Search for <div class='jump-link'> and paste the code after the following </div>.

gokkri said...

nice information,,,thanks !!

Anonymous said...

OMG!! thank you so so much! i couldn't do it.. but thanks to you i could!!!!!! =D

sms said...


Mom said...

Hi! it did worked!! thanks so much, great help!! :)

Related Posts Plugin for WordPress, Blogger...
Follow Me on Twitter