Add a social bookmark buttons to blogger footer

I was talking with Jane from PetRescuerCentral.blogspot.com and she was interested in adding Social Network buttons to the bottom of her blogspot posts.

Wordpress users can just add Sociable but in Blogger you need to do it with code, as far as I am aware... please correct me if I am wrong.

I wrote this tutorial a while ago but it was a little out of date so I have updated it.

--------------------------------------------------------------------

Social Bookmarking sites are becoming a popular and successful way for people to bring traffic to their blogs.

After reading and starting to use Digg and Stumbleupon I decided I wanted my post footer to display the links for people to promote my posts using some of these sites.

A quick search on the web revealed a few tutorials but after trying various things I just could not get it to work. Eventually by modifying some code that I found and pure guess work it is now up and running with my Blogger Blog and it was pretty easy!

So I thought I would show you how you can add these useful links to your Blogger Post Footer.

Here goes.....

• Log into www.blogger.com and click on Layout for the blog you want to add this to
  

• Click on Template and then Edit HTML


• Make sure the first thing you do is Download Full Template and save it in a convenient place

• Make sure Expand Widget Templates is checked


• Then either scroll down the HTML text, or if you have Firefox us the Edit>Find in this page tool to find the text class='post-footer-line post-footer-line-3'

• Hit return a few times to create a few lines of space (it makes it easier to see where to paste your code).

• Copy and paste this code below into the space you created:

<span class='socialbookmarking'>

<small>Share This Post</small><BR/>

<a expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Stumble This' border='0' src='http://www.feedforall.com/stumbleupon.gif'/></a>

<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg This' border='0' src='http://www.feedforall.com/digg.png'/></a>

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Add To Del.icio.us' border='0' src='http://www.feedforall.com/delicious.png'/></a>

<a expr:href='"http://furl.net/storeIt.jsp?u=" + data:post.url + "&t=" + data:post.title' target='_blank'><img alt='Add To Furl' border='0' src='http://www.feedforall.com/furl.png'/></a>

<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Add To Reddit' border='0' src='http://www.feedforall.com/reddit.gif'/></a>

<a expr:href='"http://www.technorati.com/faves?add=" + data:post.url' target='_blank'><img alt='Fav This With Technorati' border='0' src='http://www.feedforall.com/technorati.gif'/></a>

<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&t=" + data:post.title' target='_blank'><img alt='Add To Yahoo MyWeb' border='0' src='http://www.feedforall.com/yahoo.png'/></a>

<a expr:href='"http://www.newsvine.com/_wine/save?u=" + data:post.url + "&h=" + data:post.title' target='_blank'><img alt='Add To Newsvine' border='0' src='http://www.feedforall.com/newsvine.gif'/></a>

<a expr:href='"http://slashdot.org/bookmark.pl?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Add To Slashdot' border='0' src='http://www.feedforall.com/slashdot.gif'/></a>

</span>

These are just a few of the networks available. If you really want more then please let me know which ones and I will work out and add the code.

• Hit Preview to test that it's viewing correctly and then Save Template and it should be working.

Easy customizations for your bar

• If you want to remove any of the Bookmarking sites them simply find the block of HTML and delete it.

• Also if you want to rearrange the order of the icons you can simply cut and paste these blocks of HTML and stack them in the order you want.

• If you have an alternate image that you would like to use for any of the icons then find the line src= for the correct service and change the url in the 'image url' to point to your new image url.

I hope this tutorial has been helpful.Please feel free to comment.....

..... and if it crosses your mind then maybe you could submit this article to Stumbleupon, Digg It or submit to one of the other sites in my footer bar.

Thanks to FeedForAll.com for the social bookmark icons.