Add a Twitter Button into Blogger next to the Post Title

Tweet

You must have observed the new Twitter Button on each post. Within minutes of adding it, a devcurry reader mailed me asking how I implemented the code. It’s quite easy. I am using the tweetmeme service to add a Twitter Button into Blogger with the help of this post Integrating the button into Blogger

Step 1: Sign Into your Blogger account > Layout > Edit HTML. Make sure you save a copy by clicking the link ‘Download Full Template’. Check the box ‘Expand Widget Templates’

Step 2: Copy the code shared in the link I shared earlier. Now this code adds the twitter button at the end of each post. However what we want is to add a Twitter Button next to the Post Title.

Making sure you have checked the box ‘Expand Widget Templates’, search for the text ‘post-header-line-1’

Step 3: Just before the closing div tag, add the following code as shown below:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js type='text/javascript'> </script>
</b:if>

The piece of code 'data:blog.homepageUrl != data:blog.url' checks if the page is not the homepage url and displays the button only on individual posts.

Step 4: Preview the template and then save it.

Now every post of your should have the Tweet Button displayed next to the Post Title

Tweet

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.