Saturday, February 7, 2009

Adding a 'Share This' button

You might have noticed the 'Share This' button that appears below each of my posts. In today's tutorial we'll create this button for your blog. Why bother to use it? Well, with the 'Share this' button visitors will be able to share your content with their friends or community, and you know yourself what will happen. Loads of visitors will be coming to your blog!

Ok, without any further ado, open http://sharethis.com/publishers/ in your browser. Browse quickly through the page to see what it has got to offer you. If you have used this service before click on the 'Sign in' link at the top-right of the page, otherwise click 'Register' and create your new account.

After you've created your account, sign in, and enter http://sharethis.com/publishers/getbutton/. In this page you can customize your button to your need. First be sure that you've chosen the 'ShareThis Button for other websites' in the 'Pick your platform' section. I know, there is the Blogger option on the drop-down list, but we are using the raw script for better flexibility. After you are done tailoring the button, just click on 'Get ShareThis code' on the bottom of the page. You should now see the code for the button, copy it.

The next step is to add the button to each and every post on our blog. No, I don't want you to go edit all your post and paste the code on each one, that would be an idiotic waste of time. Instead, go to Dashboard > Layout > Edit HTML. Make sure you've ticked the 'Expand Widget Templates' checkbox. Use your browser's search function to find the code:

<p><data:post.body/></p>
Paste the code you've copied earlier after the </p> tag. It should look like this:
<p><data:post.body/></p><script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#tabs=web%2Cpost%2Cemail&charset=utf-8&style=default&publisher=9cb9c521-5831-4d0d-a90e-f1497bc6f6e6"></script>
Save the template. That's all! If you have done it correctly you should now see the 'Share This' button at the end of every post.

6 comments:

Darrel said...

I like your 'share button'....I'll try to do it....Can you tell me how to set up a fluid 3rd column? I've tried Blogdoctor but its too confusing
thanks
darrel
www.whydepression.info

Ryan J. Budiman said...

@Darrel

I'm not really sure but I suppose that you need to use percentages as the blog width. I'll try to post a tutorial about it after I find out.

Russ Dennis said...

The one problem I found was that if you have put in code for post summaries the share this bottom will not show up unless you are on the acutal post page. To change this, put the code next to div class='post-footer. To see an example visit my blog, Imago Christi

Raution said...

Thanks man !!! I was able to fix it. http://financetoyou.blogspot.com/

tjustleft said...

This thing is driving me crazy :). I installed it through their website and all seemed ok. However trying to share to facebook failed. So I am trying the method you are using but I have this problem. My template doesn't have the paragraph tags like this does <p><data:post.body/></p>

I just started the blog a couple of months ago and accepted the new template. Could that be the problem?

NetSavvy said...

thanks for the help.. but tell me..has linkreferal.com any effect on ur blog traffic??