Add a Twitter Button into Blogger next to the Post Title

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

'Like' us on our FaceBook page if you find this blog useful. Thanks!

Did you like this post?

			Save on Delicious
	subscribe via rss		subscribe via e-mail
	print this post		follow me on twitter

About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal