Tuesday, June 3, 2008

How to add social bookmark links to your posts in Blogger

This is just a remake of original post by Amanda Fazani about how to add social bookmark links to your posts in Blogger. The original posts had it's template code put into a blockquote so it got processed by "prettyprint" and got all template code garbled. I posted a reply there and pasting a correct code here.

So, in order to add social bookmark links to your posts in Blogger you should:
  1. Open your edit template code page (Customize->Layout->Edit HTML if you have a Navigation Bar on top of your blog, http://blogger.com/home->Layout->Edit HTML otherwise)
  2. Click on "Expand Widget Templates" checkbox.
  3. Search for the line starting with:
    <p><data:post.body
    (Just for this code, because it is likely that your custom template (like my Jeans one) doesn't have a space character before this and the the closing /></p> part)

  4. put the appropriate code directly after the line (if you want every social service to be placed on the different line, place a <br/> tag in the end of each line):

    • For Digg:
      <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' style='background: url(http://digg.com/img/badges/16x16-digg-guy.gif) left no-repeat; padding-left: 20px;' target='_blank'>Digg It!</a>
    • For Del.icio.us:
      <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' style='background: url(http://images.del.icio.us/static/img/delicious.med.gif) left no-repeat; padding-left: 20px;' target='_blank'>Add to del.icio.us</a>
    • For StumbleUpon (please note, that it should be submit, not refer.php):
      <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' style='background: url(http://www.stumbleupon.com/images/stumble.png) left no-repeat; padding-left: 20px;' target='_blank'>Stumble This</a>

  5. Preview and save the template.


Now you have links to social bookmarking sites in your blog so it will be easier for your readers to bookmark your posts (and actually, even visually stimulate them to do it).

An important lesson: always check the output once you embed raw html as a sample in your blogs, because only heaven knows who's gonna parse and autoformat your message and replace all 16x16 with 16×16 and " with ”, like it happened with Amanda's exceptional original entry.
0
said thank you for this page

Liked this article? Bookmark/share it with others: Didn't like the article, found a mistake or just want to express your own opinion? Post a comment!

24 comments:

Life Samadhi Avatari said...

DUDE! I been working on this for days! Now it's all gravy...good looking out!

~Life

Cranked said...

Thanks :) I've checked your blog, it looks... fancy :) Happy blogging :)

Recruitment Nick said...

Thanks a lot for that, been looking around for awhile to find something that looks good... appreciate what you have done!

Anonymous said...

Hmm, tried it several different ways and no go. I keep getting Blogger error codes. Oh well, back to searching Google for another way to do this.

Cranked said...

Currently (as we write these posts) Blogger is having some problems (as usual). _Any_ modification of the template results in a 'please contact Blogger with this error code'.
The solution is simply to wait a couple of minutes and try again.

rakastar said...

Tervetuloa takaisin sosiaaliseen verkostoon! Tämä sivusto on esimerkki, miltä sinun sosiaalisen verkoston sivusto voi näyttää. http://www.naz.net ?

Anonymous said...

I quoted you on Bloggertalk.net

Anonymous said...

wr
pl

Anonymous said...

I too have found an easy way. Please check it out!

http://edopeno.com/2008/11/21/add-social-bookmarks-to-your-site/

mackenzy said...

awesome thank you SOOO much!

Anonymous said...
This comment has been removed by a blog administrator.
Cranked said...

It brings me immense pleasure to delete spam comments :) This post is popular :)

britney1940 said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Pixify said...

Everything completely worked.

but i only like to show those icons on the full post page (like in bloggerBuster.com,Smashingmagazine.com etc)

please help me

i tried everything i know

please .you need to help me

if you help me now.i will give you something to you in future.

please help me

Cranked said...

That's pretty simple. All you need to do is to encase the social bookmark code in the following tags:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
---SOCIAL BOOKMARK CODE GOES HERE---
</b:if>

And your social bookmarking icons will only appear on your full post pages :)

Anonymous said...

Cheers for that, managed to sort it in about three mins...and it looks good not to invasive:)

TheOneTrueSue said...

Thanks so much, this was perfect!

Anonymous said...

Great post, and the code and advice actually work. There are so many different posts/articles with similar advice which don't work properly.
Thanks for helping someone new to this stuff.
Don

Unknown said...

Now I understand why so many templates changes failed to work properly!
Thanks for the great advice, I have used the social bookmarking code on my "learn perl" blog.

GolfTipEditor said...

Thank you, it works great. I tried about four other ways but yours is the first that worked for me.

Anonymous said...

perfect!

Jasmine said...

Is there a way to add twitter and facebook codes, so people can post the links to their social networking sites?

Clameur de Haro said...

Thanks Eterniel!

Like other commenters, I'd tried using the code additions copied from other sites and all I got was Blogger error messages. Yours worked perfectly first time, so thanks again!

Would you consider posting the codes for Reddit also?

Post a Comment

Have anything to say? Leave a comment!
Too shy or got a too private question? Email me
Alternatively, you can drop me a line on Twitter