How to add the Tweet button to your BlogSpot blog?

Written by | Tech

By now you may have heard/read everything about the Twitter button. Yes, that button that will quickly allow you to tweet a page without the copying and pasting, shortening the URL, and bouncing between browser tabs to tweet about that page that you are dying to share to your loyal followers.

Anyhow, I’ll go directly to the best part on “How to add the Tweet button to your BlogSpot blog?“, we can all about the tweet button but this is how to place that talked about button on your BlogSpot blog. 🙂

Here’s how.
1. Visit: http://twitter.com/goodies/tweetbutton, then select the type of button that you want, on my part I selected the “Horizontal count

**The step 2 on the site that you see is optional if you want to recommend two twitter account for the user’s to follow, one is your own account and another any related twitter account. Of course I’ll place my twitter account there “@teknisyan

3. Right at the bottom of the page you will see the preview of your button and the code that you need to copy and paste on your blog template.

4. Login to your Blogspot/Blogger.com account, then on the Dashboard, click DESIGN or LAYOUT link under the blog where you want to add the Twitter button, then click on EDIT HTML.

Or you can click on the blog then click on the DESIGN or LAYOUT tab, then EDIT HTML.

5. Make sure that there is a check mark on the “Expand Widget Templates“.

6. Once you have “Expand Widget Templates“, you can then paste the code from step 3, right after any of the following line:

< div class=’post-footer’>: If you want the button in the footer right above the Author and Time Stamp.

< div class=’post-footer-line post-footer-line-3’/>: If you want the button in the footer below the Labels.

< data:post.dateHeader/>: If you want the button right below the Post title.

***You can include the comment code “< !– Tweet button –>”, so that you can easily locate the code in case I want to modify or change my template.

You can also place the twitter code between the line “<div style=”text-align: right; float:right;”> ” —Twitter code here— “</div>” to specify if you want the button on the left side or right site and even float to the left or right. Just change the work “right” to “left” or vice versa.

Last modified: August 14, 2010

Leave a Reply