How to Add a Twitter Tweet Button to Your Posts

When you add a Twitter "Tweet" button to your post, your visitors can easily share your post on their Twitter wall with just a click. It's also a quick and easy way for you to Tweet your own posts. You can add a Tweet button below your Post Title, below the Post, or both. Just follow these instructions. (Even though these instructions are written using Blogger's New Interface, they are still appropriate for the old interface except possibly in the navigation.)

From your Dashboard click on Template from the drop-down menu as shown in the image below. (You can click on the image to enlarge it if you need to.)

From the Template screen, click on the HTML button. A window will open up with some cautionary information. Click Proceed. Don't worry you won't mess anything up. :)

In the EDIT HTML screen, check the box that says Expand Widget Templates.

If you want the Tweet button to appear below the Post Title, find the code that looks like this (or very similar to it):

If you want the Tweet button to appear at the foot of the Post, find the code that looks like this (or very similar to it):
<div class='post-footer'>

The easiest way to find the code is to hold down the CTRL key on your keyboard and press the letter F. A search box will open where you can enter the code you are looking for and it will take you right there in the HTML section.

Once you have located the code, copy the following code and paste it directly below the code above. Be careful to copy all of the code exactly as it appears below. Change the words in blue text to your Twitter User Name. (If you have previously added a Facebook LIKE button using my tutorial, then you can post this code below the code for the Facebook LIKE button.)


<b:if cond='data:blog.pageType != "static_page"'>
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='RichGifts' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</b:if>


The pasted code will look like this. The green code is what you look for, the red code is what you paste.

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


<b:if cond='data:blog.pageType != "static_page"'>
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='RichGifts' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</b:if>


Now click the Preview button located just below the HTML field box. Your preview should show the facebook Like button in the appropriate place. If it isn't right just click the Cancel button below the HTML field box and try again. If it is as you want it, click the Save Template button.

The Tweet button will automatically appear on every post.

Now click the Tweet button on this post and share it with your friends.

If you are having trouble or just don't want to do it yourself, I can do this for you for $5.00. Just use the Payment Button in my sidebar and specify what it is for. Be sure to provide me with an active email address to contact you. I will need access to your Blogger Admin to install the code.

Thank you to Karla at Empowering Christian Women for requesting this tutorial.

Click to LIKE my Facebook Page for more tips.

You might also like these Tips & Tutorials:
How to Setup a Navigation Bar in Blogger's New Interface
FREE Names of Jesus Desktop Wallpaper

Blog Designs and Graphics for Christian Ministry

All content on this site is copyright protected. Using or obtaining the graphics on this site in any way other than specified on this site is a violation of the copyright. Please respect my work.© 2008-2011, Edie Moore