Adding a TwitThis Button to your Blogger Posts

Wouldn't it be great if you could just add a “TwitThis” button to every single Blogger post in order to make it easy for your visitors to share all of your posts with their friends and followers on Twitter, even if they don´t subscribe to your feed?

The following instructions will enable all of you who have a layout based blog at Blogger to do just that. (Instructions for Blogger Classic, Wordpress, and basic static HTML page will follow at a later date.)

This will require you to edit the HTML of your template. While I have tried to make this as simple as possible, if you don't feel comfortable doing this, then please don´t try.
The button will be added to the footer of every single post of your blog. It would not be wise to do this any other way, as the URL that will appear on Twitter will be the URL of the page on which the button has been clicked. If the button were placed just on the main page, then chances are that the post will no longer be there when someone reads the entry on Twitter, and it probably won´t win you any new and loyal readers if they don´t find what they came for right away. So, place the “TwitThis” button below every post.

There are also added some comments in the code that will make it a lot easier for you to add addional buttons in the future. Furthermore, they allow you to choose whether the buttons should appear on all pages or just post pages.

IMPORTANT NOTE: If you have added the Google Reader code from one of my previous posts, then you just need to add only the orange TwitThis code above or below the Google Reader one. If you have not done so, then you need to copy and paste ALL of the code.

1. Sign in to your Blogger Dashboard, then click the Layout link for the blog you want to add the button to.

2. Click the link for Edit HTML at the top of the Layout page.

3. Find the entry "Backup/Restore Template", click the link that says "Download Full Template" and save the .xml file to your hard drive. This backup file will help you restore your template should anything go wrong.

4. In the "Edit Template" section, find the box at the top right that says "Expand Widget Templates" and check it.

5. Use the search function of your browser to find the following line in the HTML code of your template:

6. Now find the following two lines:

7. Copy and paste the following code between those two lines:

<div>
<p><span id='footer-buttons'>
<!-- things placed after this line will show on all pages –>

<!-- TwitThis Button BEGIN –>

<!-- TwitThis Button END –>

<b:if cond='data:blog.pageType == "item"'>
<!-- things placed after this line will only show on post pages –>

</b:if>
</span></p>
</div>
<!-- Footer Button Codes END –>

8. Click the button at the bottom of the page saying "Save Template".

If you get red errors of any kind, either follow the instructions given along with the error or leave a comment stating the specific error message. I will try to help you out. If you get any errors beginning with "bX-", just try again later. Sometimes Blogger has issues with itself that can be resolved by waiting a while.

9. Now, look at your blog. If you have done everything correctly, the button should be visible below every post. Test the button by clicking it on a post and sharing one of your posts on Twitter.

10. If you would like to add other buttons to the footer of your posts, the comments in the code will help you decide where to put your button codes. One place will show on all pages, and the other will only show on post pages.