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’

Blogger Twitter Button

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 src=' type='text/javascript'> </script>

Blogger Twitter Button

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

Blogger Twitter Button

Will you give this article a +1 ? Thanks in advance

About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) 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 is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal


Rebecca said...

Interesting. I have a couple of blogger blogs that could use this. Thanks for your tutorial!

Sonusmac said...

Thanks I was searching this from a long time..!!