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:
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.
So, in order to add social bookmark links to your posts in Blogger you should:
- 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)
- Click on "Expand Widget Templates" checkbox.
- 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)
- 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='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + 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='"http://del.icio.us/post?url=" + data:post.url + "&title=" + 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='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' style='background: url(http://www.stumbleupon.com/images/stumble.png) left no-repeat; padding-left: 20px;' target='_blank'>Stumble This</a>
- For Digg:
- 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:
DUDE! I been working on this for days! Now it's all gravy...good looking out!
~Life
June 16, 2008 at 10:32 PM
Thanks :) I've checked your blog, it looks... fancy :) Happy blogging :)
June 17, 2008 at 1:15 AM
Thanks a lot for that, been looking around for awhile to find something that looks good... appreciate what you have done!
June 25, 2008 at 2:15 AM
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.
July 29, 2008 at 10:02 AM
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.
July 29, 2008 at 11:01 AM
Tervetuloa takaisin sosiaaliseen verkostoon! Tämä sivusto on esimerkki, miltä sinun sosiaalisen verkoston sivusto voi näyttää. http://www.naz.net ?
August 21, 2008 at 2:53 PM
I quoted you on Bloggertalk.net
October 7, 2008 at 6:50 AM
wr
pl
October 11, 2008 at 1:35 AM
I too have found an easy way. Please check it out!
http://edopeno.com/2008/11/21/add-social-bookmarks-to-your-site/
November 21, 2008 at 6:59 PM
awesome thank you SOOO much!
November 22, 2008 at 10:27 AM
November 26, 2008 at 9:34 AM
It brings me immense pleasure to delete spam comments :) This post is popular :)
November 26, 2008 at 1:21 PM
December 3, 2008 at 5:21 AM
December 3, 2008 at 11:39 AM
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
January 9, 2009 at 3:15 PM
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 == "item"'>
---SOCIAL BOOKMARK CODE GOES HERE---
</b:if>
And your social bookmarking icons will only appear on your full post pages :)
January 9, 2009 at 3:26 PM
Cheers for that, managed to sort it in about three mins...and it looks good not to invasive:)
January 9, 2009 at 8:00 PM
Thanks so much, this was perfect!
January 18, 2009 at 6:43 PM
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
January 19, 2009 at 6:40 AM
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.
January 31, 2009 at 10:16 PM
Thank you, it works great. I tried about four other ways but yours is the first that worked for me.
May 1, 2009 at 6:59 AM
perfect!
May 15, 2009 at 9:39 AM
Is there a way to add twitter and facebook codes, so people can post the links to their social networking sites?
September 14, 2009 at 12:08 AM
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?
October 21, 2009 at 7:14 PM
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