Monday, September 24, 2007

Social Bookmarking Footer - Tutorial for Blogger (Actually works!)

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
SocBKMK-Tut-1

  • 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
SocBKMK-Tut-2

  • 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'
SocBKMK-Tut-3

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

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

<span class='socialbookmarking'>

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

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

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

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

<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Add To Reddit' border='0' src='http://getfreecodes.googlepages.com/reddit.png'/></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://getfreecodes.googlepages.com/technorati.png'/></a>

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

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

<a expr:href='"http://www.bloglines.com/sub/" + data:post.url' target='_blank'><img alt='Add To Bloglines' border='0' src='http://getfreecodes.googlepages.com/bloglines.png'/></a>

<a expr:href='"http://mystuff.ask.com/mysearch/QuickWebSave?v=1.2&amp;t=webpages&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Add To Ask' border='0' src='http://getfreecodes.googlepages.com/ask.png'/></a>

<a expr:href='"http://favorites.live.com/quickadd.aspx?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Add To Windows Live' border='0' src='http://getfreecodes.googlepages.com/live.png'/></a>

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

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

</span>

  • 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.
SocBKMK-Tut-7

  • 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 or one of the other sites in my footer bar :).


2 comments:

Sephyroth said...

Great work on this, but there are a couple of flaws in the code you've posted (it's unintentional, I think).

The first one is that all the single and double quotes have been changed into "curly" quotes; also, you need to have the ampersand in the url links written out. I've gone and changed the code you have there over so that it should work when it's pasted back into standard html.

You can get the text file here.

---

Another thing that I couldn't help but notice from the screenshots you've posted is that you're reading your blog feeds using live bookmarks in Firefox. You should seriously consider switching to Google Reader. It'll make your life a whole heck of a lot easier. ;)

Sephyroth
http://www.sephyroth.net

Forest Parks said...

Hey Sephyroth,

Thanks very much for correcting my code. This is the first time I have done a tutorial on my blog and it took me a very very long time to find out how to post the HTML code without it all messsing up.

I found out that you just have to avoid the Composer window in the blogger help bar.

I will definitely be sorting Google reader out as so many people are recommending it.

Thanks so much again.

 
Sitemap