How to Add Social Bookmarking Icons in Blogger (Video)
When you look at blogs hosted at Blogger such as my Women's Retreat Ideas blog, you might wonder how people get those little social bookmarking icons to show up at the bottom of each post.
It's actually really easy to do, and the video below shows you how. There are two things that might be a bit confusing about the video, though:
1) he says "if you are in Firefox, just do this". But if you're not in Firefox (e.g. you are in Internet Explorer) then what you need to do is scan through your template code to find the place that he is talking about.
2) when he pastes in the code that makes the little icons, he says "you can find this in the forum". If you don't know what forum he is talking about that can be confusing. At the bottom of this post I give the code you will need.
Here is the code you will need:
<div style='float:right;'>
<BR/><BR/>
<small>Share This Post</small><BR/>
<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://getfreecodes.googlepages.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://getfreecodes.googlepages.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://getfreecodes.googlepages.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://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 + "&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 + "&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.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Add To Google Bookmarks' border='0' src='http://getfreecodes.googlepages.com/google.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&t=webpages&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Add To Ask' border='0' src='http://getfreecodes.googlepages.com/ask.png'/></a>
<a expr:href='"https://favorites.live.com/quickadd.aspx?url=" + data:post.url + "&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 + "&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 + "&title=" + data:post.title' target='_blank'><img alt='Stumble This' border='0' src='http://getfreecodes.googlepages.com/icon_su.gif'/></a>
</div>
8 Comments
Leave a comment
Get Email Highlights
Most Popular Articles
- How to write a bio
- How to record teleclasses and conference calls
- How to set up Aweber Autoresponder
- How to make a screenshot
- Quickest way to write a book
- How to put Google ads on your site
- How to set up business Paypal account
- Dealing with annoying people
- Free Business Forms
- Executive Bio Templates
Hi Barb,
This is cool...but it didn't work. After I pasted the code into my template, I tried to preview my page and got an error message:
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "url" must end with the ';' delimiter.
I tried to determine which occurance of "url" caused the error, but I'm just not that proficient in HTML. Can you put me in touch with him, or does he have a fix for this?
Hmmmm.....Michelle again....methinks I have to remove the "expr:" at the beginning of the line for each statement.
Instead of "<a expr:href=" (and so on), it should be "<a href=" (and etc.)
Is that correct?
(I looked in my HTML book and "expr" isn't even in there. What does it mean?
Hi Michelle, I have no idea! but I will ask my VA Diana to look into it and answer :)
OK, turns out there was a small glitch in the code. Diana has fixed that now. And many thanks to Michelle for figuring it out and letting us know!
You can add Digg, StumbleUpon and Del.icio.us using social bookmarking links to the end of blogger posts.
Instructions here:
http://100-dollars.blogspot.com
I've added the code that you provided to my blog, and it did add the three social bookmarking options that I wanted, however the icons did not show up- just boxes with red X's in place of the icons that say "Digg This" etc. Can you please take a peek at my blog and let me know how to add the pictures?
Thanks,
Lori
http://TheRecipeGirl.blogspot.com
i hav added frm other method check it on my blog
www.tricksystem.com
boss is is what i was really looking for three days.
thanks a lot