Add Twitter Submit-button to Blogger Blog

Twitter is no doubt becoming a very efficient and a quicker way to share thoughts, information, links, news or favorites over internet.

Beside this, most of the people specially bloggers are continuously spamming twitter with their blog links, to drive traffic to their sites.

Although it is already included in the quick bookmarks buttons below every post in my blog, I’ve decided to add a separate, big “twitter” button that can submit page’s link to my twitter updates!

I was using a digg submit button before this, But since I’m kinda addicted to twitting now, I decided to remove that digg button and give twitter button a chance on top of each post of my blog! 🙂

So! If you blog using blogger.com platform, then you can add this button to your blog too.

Just follow these simple steps:

1. Go to ‘Layout” of your blog, and then “Edit HTML” tab.

Next step should always be backing up your blogger template, so that if anything goes wrong, you’ll have your backup to restore to original condition.
So, click “Download Full Template” link to first download backup!

2. Check “Expand Widget Templates” checkbox.

Now find (Ctrl+F) this line:


<div class='post-header-line-1'/>

3. And just BELOW this line of code.. PASTE the following code:

<!--Tweet this button by Tips-o-Tricks.com-->
<div style='text-align: right;'>
<a expr:href='&quot;http://twitter.com/home?status=Check this Out: &quot; + data:post.url + &quot; |&quot; + data:blog.title' target='_blank' title='Click to Tweet this page'> <img alt='Twitter submit button' src='http://img220.imageshack.us/img220/6449/twitterlogon.png'/> </a>
</div>
<!--Tweet this button END-->


4. “Preview” the template first, DON’T save at this point. If Preview window shows your blog fine and with the “Twitter Button” at top right of every post, that means you did it the right way! 😉

Otherwise it’ll show an error, and prompt you to remove it first before saving.

Just Make Sure you are copying/pasting completely and at the right place.

5. If preview shows everything fine, then you can SAVE the template 🙂

If you want this button to be shown BELOW your posts, then in Step #2,
Find this line of code in your template:

<p><data:post.body/></p>

…or if your using a default template, then you’ll find only this:
<data:post.body/>

…and just AFTER this, paste the code given in Step 3 (and continue to step 4 and 5)

Note: If you are using Expandable Post Summaries” then, you’ll find two
<p><data:post.body/></p>

You’ve to paste the Code (Step 3) below the first one!!

You can use both the buttons (above and below the post) at same time! 😉

And off course you can customize this button:

* If you want it to be on Left top of each post;
Change ‘right‘ to ‘left’ (in Red) in above code.

* You can Change the status message while tweeting the page;
Change “Check this Out:” to any status message you like.

* And best part, you can change the button (pic) of your choice.
Just change link in green with the link of your choice.

Here are the direct links of few button pics, I’ve collected for you:
Image1, Image2, Image3, Image4, Image5

I tried my best to explain every step possible in detail.

If you still face any kind of problem installing this, Let me know.

Don’t Forget to share it with your friends in case you like it and decide to add to your blog. 🙂


UPDATE: Check out new Cooler tweet button with tweets counts on it



Need Twitter Followers? Click here to get 1000's of them with just a press of a button!