Adding social bookmarking links to blogger

I recently wanted to add social bookmarking links to all of my blog posts. As you might notice my blog is hosted on blogger, only way I could do that is by editing the template. I thought I would share how to get about editing the template such that you add social bookmarking links which will automatically add the post permalink and the title if possible.

To edit the template, Sign into your blogger.com account and goto Template -> Edit HTML and then select Expand Widget Templates. Search for <data:post.body/>, just after <data:post.body/><div style="clear: both;"> <!-- clear for photos floats --> insert the following code.

<!-- Start of social bookmarks -->
<div class='service-links'>
<div class='service-label'>Bookmark this post with: </div>
<ul class='links'>
<li class='service_links_digg'>
<a class='service_links_digg' expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' title='Digg this post on digg.com.'>
<img alt='Digg' src='http://www.mohanjith.net/images/service_links/digg.png'/>
</a>
</li>
<li class='service_links_stumbleupon'>
<a class='service_links_stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' title='Bookmark this post on StumbleUpon.'>
<img alt='StumbleUpon' src='http://www.mohanjith.net/images/service_links/stumbleupon.png'/>
</a>
</li>
<li class='service_links_delicious'>
<a class='service_links_delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' title='Bookmark this post on del.icio.us.'>
<img alt='Delicious' src='http://www.mohanjith.net/images/service_links/delicious.png'/>
</a>
</li>
<li class='service_links_reddit'>
<a class='service_links_reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' title='Submit this post on reddit.com.'>
<img alt='Reddit' src='http://www.mohanjith.net/images/service_links/reddit.png'/>
</a>
</li>
<li class='service_links_newsvine'>
<a class='service_links_newsvine' expr:href='"http://www.newsvine.com/_tools/seed&amp;save?u=" + data:post.url + "&amp;h=" + data:post.title' rel='nofollow' title='Submit this post on newsvine.com.'>
<img alt='Newsvine' src='http://www.mohanjith.net/images/service_links/newsvine.png'/>
</a>
</li>
<li class='service_links_facebook'>
<a class='service_links_facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;t=" + data:post.title' rel='nofollow' title='Share on Facebook.'>
<img alt='Facebook' src='http://www.mohanjith.net/images/service_links/facebook.png'/>
</a>
</li>
<li class='service_links_google'>
<a class='service_links_google' expr:href='"http://www.google.com/bookmarks/mark?op=add&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' title='Bookmark this post on Google.'>
<img alt='Google' src='http://www.mohanjith.net/images/service_links/google.png'/>
</a>
</li>
<li class='service_links_yahoo'>
<a class='service_links_yahoo' expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;t=" + data:post.title' rel='nofollow' title='Bookmark this post on Yahoo.'>
<img alt='Yahoo' src='http://www.mohanjith.net/images/service_links/yahoo.png'/>
</a>
</li>
<li class='last service_links_technorati'>
<a class='service_links_technorati' expr:href='"http://technorati.com/cosmos/search.html?url="+data:post.url' rel='nofollow' title='Search Technorati for links to this post.'>
<img alt='Technorati' src='http://www.mohanjith.net/images/service_links/technorati.png'/>
</a>
</li>
</ul>
</div>
<!-- End of social bookmarks -->[/sourcecode]
Add the following code before <code>]]></b:skin></code>.
[sourcecode language='css']/** Service links style **/
.service-links {
padding-top: 3px;
}
.service-links ul.links {
margin:0pt; padding:0pt;
}
.service-links ul.links li {
display:inline;
list-style-type:none;
padding: 0pt 0px;
background: none;
}
.service-links ul.links li img {
border: none;
padding: 3px;
}
.service-links ul.links li a {
border: none;
text-decoration: none;
}


Then save the template. Adding social bookmarking links and submitting your posts to social bookmarking networks would improve the visibility of your blog and help drive traffic to your blog.

If you enjoyed this post, make sure you subscribe to my RSS feed!

21 thoughts on “Adding social bookmarking links to blogger”

  1. It does not work at all..i tried 6 times…same error message

    XML error message: The reference to entity “url” must end with the ‘;’ delimiter.

  2. appsman and melfi, did you put the html in the proper place as mentioned. I seem to have no issue with this code.

  3. oops… :O

    that’s change all of the
    &
    to
    & a m p ;
    (the ampersand command for ampersand)

  4. I'm still having trouble making the icons run horizontally even after I fixed the & issue…anyone also run into this?

    Also, I'd like to have these links insert the URL that is being bookmarked as you link over to each service. Is this code meant to do that?

  5. Thank you, this cover most/all bookmarks, was easy to place and works!
    I find the little lines between the logos (only in IExplorer) annoying, I couldn’t get rid of, any ideas?

  6. you are a GENIUS! If you have ANY idea how MANY HOURS I spent researching this topic (for my blog). And how frustrated I’ve been getting with all of the wrong coding, you would feel like a superhero! 🙂 Thank you so much! I think what I was doing wrong was adding the code below the [ clear for photos floats–> ] rather than attaching it right next to the >. Thank you a MILLION! You just literally made my afternoon!!!! P.S. I posted your site/link/help on my twitter!!

  7. I just found you searching this topic on Google and thank you, this worked great for me! I do have a couple of questions if you get a chance: 1-How do I add Twitter to the icon list? and 2-How do I get the links to pop up in a new window? Thanks again!

  8. I tried it but images are displayed only in preview. When i saved the template and opened my blog, none of the network link images are displayed. Where might I have went wrong??

  9. Hi! Thanks for this. I’ve been trying to get this to work. Do you have any code to add READ MORE in Blogger?

    Haven’t found my luck so far.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.