How to add Social Networking Buttons Below Every Post

By adding social networking icons to your blog you will definitely boost your blog's traffic, if done properly. So be careful while placing them. They should be attractive, correctly placed, aligned and also they should be visible separately from the post. Although buttons like AddThis and AddToAny are quite useful, but now they look quite outdated.

So have a look on these buttons: Download buttons from here
Or from here [Free Icons Download]
Or From here [Glossy Buttons]

To show these icons below all your posts and to dynamically synchronize the post's address with each of these buttons, follow these steps:

Go to "Layout" section, then click on "Edit HTML" link.
Then click on "Expand Widget Templates". Now find (CTRL+F) this code:
<data:post.body/>

Then immediately after that code, add these lines:

<!--SOCIAL-BOOKMARKING-ICONS-STARTS-->
<b:if cond='data:blog.pageType == "item"'>
<!--DIGG-->
<a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg It!' src=' ' /></a>
<!--Stumble-->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src=' '/></a>
<!--Delicious-->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src=' '/></a>
<!--Technorati-->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src=' '/></a>
<!--Twitter-->
<a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'><img alt='Tweet It!' src=' ' width='122'/></a>
<!--Facebook-->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src=' '/></a></b:if>
<!--SOCIAL-BOOKMARKING-ICONS-STOPS-4-Help-http://bloggerstop.net-->

In the highlighted code (in red color), paste the DIRECT LINKS to the various social networking icons.
The black bolded code hides these icons in your Home-Page and only shows them below your posts.

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

203 comments

Write comments «Oldest   ‹Older   1 – 200 of 203   Newer›   Newest»
January 05, 2009 3:25 PM delete

This is probably dense, but how do I get urls for the buttons once I've downloaded them?

Reply
avatar
January 06, 2009 7:14 AM delete

Hi Erin
If you think, that this is dense, then you should not use them all [select only those buttons, which you want to display on your blog]

And if you want to display all of them, then use SMALL ICONS !
_____________________________

Now, to get the links [direct links] of the images, you can either upload them at
pages.google.com

or here:
hotlinkfiles.com

Reply
avatar
January 06, 2009 3:26 PM delete

By "dense" I meant I was dense - like, it was probably dumb of me not to know how to get the URL for the button images. :-)

Thanks for your help!

Reply
avatar
January 16, 2009 8:14 AM delete

Hey mate have a little atention about navigation bar.Your icons are reversed :D

Reply
avatar
January 16, 2009 9:34 AM delete

Hi Alin

thanks for telling that, but if u are talking about the red buttons(prev and next posts arrows), then actually all the blogger blogs by default have that placement only !

Reply
avatar
January 17, 2009 7:47 PM delete

Hi there,

I've followed your step by step instructions, but I'm getting an error in blogger that states XML error: URL must be closed with ;
Any suggestions?

Reply
avatar
January 18, 2009 12:29 AM delete

Thanks for commenting..

The problem is with Digg code(first one) - u can use the other codes right now,

I will fix it in a few minutes and reply here !

Regards
Sai

Reply
avatar
January 18, 2009 1:30 AM delete

I have corrected the code, you can use it now. The digg button has been added thru a javascript, so it has a default image, and therefore u should change the position of buttons acc. to your choice.

Reply
avatar
January 18, 2009 12:29 PM delete

Thank you for fixing. I was able to get it working on my page. However, I've tried testing all of the different icons and i can't seem to get twit this to work. I keep getting the following error:

The XML page cannot be displayed
Cannot view XML input using style sheet. Please correct the error and then click the Refresh button, or try again later.


--------------------------------------------------------------------------------

The server did not understand the request, or the request was invalid. Error processing resource 'http://www.w3.org/TR/xhtm...

Reply
avatar
January 18, 2009 12:43 PM delete

Welcome again
When I checked your blog, everything was working fine, including twitter....so i guess you have got it well, but if still you have any problem....u are free to ask me

Regards
Sai

Reply
avatar
February 16, 2009 7:57 AM delete

Great Work. Some cool resources. Keep up your good work. Only grunt is site takes quite some time to load. Please make it faster.

Reply
avatar
February 16, 2009 8:28 AM delete

Thanks Pushkar for the compliments and your valuable advice, actually I keep on trying new features on this blog, which can be shared with my readers like you, but that usually requires me to add javascript files to this blog, and that makes this blog slow......sorry for the inconvenience....i'll try to optimize it!

Reply
avatar
February 22, 2009 2:28 PM delete

Hi,
i tried adding with the method u told the cellar style template taken from ur site.
But it is not showing up.I used 48*48 icons.is there any limit on the size or something.
If i put the same piece of code anywhere it shows up bt doesn not work when i put it below data:post.body

Reply
avatar
February 23, 2009 2:03 AM delete

Give the link to your blog !

Reply
avatar
guru
February 23, 2009 7:58 AM delete

i tried this one....
its working properly but all buttons also showing at the homepage also below every post... I am using notepad template.. why it is so..

Reply
avatar
February 23, 2009 8:20 AM delete

By the following method, you can show/hide widgets or anything in any of the pages of your blog..
presently you can use it hide the hack from your homepage:
read on...
http://bloggerstop.net/2008/12/show-widgets-in-only-specific-pages-or.html

Reply
avatar
February 25, 2009 12:54 PM delete

Hi Divya,
Sorry for not following up.I actually changed the template from cellar to arthemia.I am experimenting with different templates and looking for something minimalstic for my finance blog at gettingmoneywise.blogspot.com

Right now, i am playing with the templates at cash-generators-online.blogspot.com

Not that i am trying to spam with my blog urls but i really would appreciate any ideas on the template


Frankly,i stumbled upon on ur site and have it bookmarked for some 15 posts:-)

Reply
avatar
February 25, 2009 1:56 PM delete

Well, templates do affect a lot, it has to be both Search engine and visitor friendly.
Try to have maximum area in white color, and minimum black color.

And best way to judge your template is by studying the bounce rate for your blog, with different templates....template with minimum bounce rate is the best suited for your readers !

Reply
avatar
March 02, 2009 5:18 AM delete

Man you are great!

Could you please publish a post on how to add image icons for "Older Posts ", "Newer Posts" and "Home"
Just the way you did it for yours. I succeeded with the home image but failed with Newer and older posts link..doesn't seem to work!


Hey man! why can't I copy my message from your Message box.

Plz help me with a post. Your blog is Great!!!

Regards,
MOHD___

Reply
avatar
March 03, 2009 10:53 AM delete

Hi Mohammad,
Here's the post requested by you:
Change Newer Posts, Older Posts and Home Links In Blogger

As I was planning to write a post on this topic, so thanks for reminding me !

Reply
avatar
March 23, 2009 11:32 AM delete

I too, must be dense, as in stupid. I was practicing on an old blog I use for the university http://elteintrojournalism.blogspot.com. I was not able get the icons in. The first time, Digg was at above the post, while the rest were under it. I tried entering the code from http://www.stumbleupon.com/buttons.php, but each time, I get the XML message that div needs an end tag. After reading through above, I tried putting Stumble as the first and Digg second, but I still received the XML error message.
Thanks for any help. Ryan drryanjames@gmail.com

Reply
avatar
March 23, 2009 12:15 PM delete

Hi Ryan,

you can place the images in any order as you want, the error means that the the div tag has not been closed, so if the code is like this

You just have to put this at the end of whatever code you are using for stumble button:
</div>

This closes the div tag.

Reply
avatar
March 24, 2009 9:25 AM delete

Thanks for the information. It was exactly what I was looking for. I'm suprised I never found this site from dropping. I found you on Google. :) Keep up the good work.

Reply
avatar
March 24, 2009 1:18 PM delete

Welcome Chris, and thanks for your encouraging comment !
Regards
Sai

Reply
avatar
April 03, 2009 11:50 AM delete

Hey!

Thanks for the great post, It already helped me a lot.
But I would also like to insert the social icons for:
*Blogger
*Youtube
*Google
*LinkedIn

Can you give me the codes? I can't seem to find them anywhere on the web.

Thanks a lot!

Emma

Reply
avatar
April 03, 2009 12:36 PM delete

Hello Emma,
For Google button, you may visit this link:
http://www.google.com/webmasters/add.html

And regarding others, are you sure, they give you the option to add links in to their sites ?

Regards
Sai

Reply
avatar
April 16, 2009 11:44 AM delete

Hi Div it is me again, I uploaded the code to hotlinkfiles.com, but from there I am stuck . I do not find the url of each icon to paste to the code "src" to my blog. Any Idea how to make the url for each code so I can paste it

tx.

Reply
avatar
April 17, 2009 12:05 AM delete

Hi Ambara,

For images, instead of hotlinkfiles upload them to gigaimage.com
Now just after the uploading process, you will be displayed a number of links to the same image, use the DIRECT LINK (first in the list) from the list of links in this code.

Regards
Sai

Reply
avatar
April 20, 2009 10:13 PM delete

I really liked your post, it has been very useful for me as a new user of blogger.

Reply
avatar
April 28, 2009 3:19 PM delete This comment has been removed by the author.
avatar
May 07, 2009 8:02 AM delete

Thanks Buddy form http://sfasoft.blogspot.com

Reply
avatar
May 08, 2009 12:13 PM delete

Wow! You're so awesome! Thank you :D

Reply
avatar
June 09, 2009 1:37 AM delete

I tried this, and this is the error message i got:

please help!!

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 element type "b:includable" must be terminated by the matching end-tag "".

Reply
avatar
June 17, 2009 8:29 AM delete

Sai Ramji Divya,

Can u please add two more social bookmarking sites i.e. Digg and Reddit to the code above. I tried doing myself on my blog, but failed :( For digg i found the button, but it does not match with other buttons. It would be very much helpful if you can add these two in the list and provide the code.

Thanks in advance

Sai Ki Deewani
Hetal Patil

Reply
avatar
Sai
June 17, 2009 9:51 AM delete

Hello Hetal,
try this code:

<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Digg It</a>

<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Reddit</a>

Regards
Sai

Reply
avatar
June 17, 2009 9:55 AM delete

Oops they are not smileys in the comment above, replace them with this :

:P

Reply
avatar
June 19, 2009 7:34 AM delete

I really liked your article, written well and clearly serving the purpose. I was looking forward to add twiter link below post, i hope with your help I will be able to do that.http://www.techzee.com

Reply
avatar
June 19, 2009 7:40 AM delete

For twitter buttons, of course you can either use this method, or you may also read this post:

http://bloggerstop.net/2009/04/tweet-it-and-retweet-buttons-for.html

Reply
avatar
June 26, 2009 2:46 PM delete

this is not working for me :(.
I'll try harder later. I did everything like you said and my icon are uploaded on flickr.
here is an example

http://farm4.static.flickr.com/3041/3554373391_cd28ab7c8d_o.png

Reply
avatar
July 04, 2009 1:16 PM delete

merci ça marche trés bien ;)

Reply
avatar
July 19, 2009 1:06 PM delete

wer is the code for the button friendster,youtube etc. ? :D

Reply
avatar
July 25, 2009 10:38 PM delete

Thanks for posting this how to! I have link Within on my blog and would like these icons below that, where do I need to add this code to do that?

Reply
avatar
July 26, 2009 3:02 AM delete

Hi Joana,
Simly follow the steps instructed here, but as the position of linkwithin widget is defined in their own code, so you cannot easily control it's position, if the icons appear above that widget, then comment back here ...

Reply
avatar
July 26, 2009 3:05 AM delete

And if you want to hide the linkwithin code in the homepage and wanna show it only in the post pages, then add this code to it:

<b:if cond='data:blog.pageType == "item"'>
LINKWITHIN CODE HERE
</b:if>

Reply
avatar
July 26, 2009 3:43 AM delete

Thanks for the hint, but... ~x(

It's not working on my blog. Either the button does not show, or it shows, but does not catch the URL of the post correctly. Please, advise.

Reply
avatar
July 26, 2009 3:47 AM delete

I mean, if I add the button to Facebook as you describ above, it does not show on the main page and it shows up on each post, but does not link to a proper URL of the post and instead it links to '; + data:post.title"

Reply
avatar
July 26, 2009 5:09 AM delete

Due to the bolded part of the code, it is being shown only in posts and not in the homepage, if you delete those two lines, then the buttons will be displayed in the homepage too, but then it is not recommended.

Are you facing the problem only in the facebook button or in all of them ?

Reply
avatar
July 26, 2009 5:16 AM delete

I am facing a problem only with the FB button, since I do not want to add others.

I do what you write and the address is not correct. Shall I show?

Reply
avatar
July 26, 2009 6:40 AM delete

Well I just tried to post to FB, from your blog, and the redirection was successful, here's the screenshot:
http://i31.tinypic.com/9rnneu.png

If you want to recheck it, please ask any of your friends to try it out for you...

Reply
avatar
July 26, 2009 4:25 PM delete

Thanks, Divya! I somehow made it. I was probably doing sth. wrong earlier and that is why the code was not working well. Now all looks correct. Thanks again and great job though!

Reply
avatar
August 05, 2009 5:45 AM delete

Hi, how can I add some words like, "Share this Article" before the buttons? This works great. You've helped me a lot so far.

Reply
avatar
August 05, 2009 6:26 AM delete

Add it after the first bolded line and before the first button (i.e. DIGG)

Reply
avatar
raj
August 14, 2009 6:21 AM delete

well i m trying to add stumble upon button to my each blog post but getting error message

i tried the code after writing data:post.body and also tried deleting this code and writing after it but no help

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "img" must be followed by either attribute specifications, ">" or "/>".

please help me out at your earliest

Reply
avatar
Guest
August 14, 2009 6:25 PM delete

I went thru all your steps and can't get any images in the bottom. Only get the digg button when i log in my site thru google. on 1 post. not on all either

Reply
avatar
Divya Sai
August 19, 2009 11:02 AM delete

@ Raj,

the closing image tag is already present in the code above, use exactly this code for stumble button:

<!--<span style="color: blue;">Stumble</span>-->
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' <span style="color: red;">src=' '</span>/></a>

Reply
avatar
yooray
August 25, 2009 6:57 AM delete

i tried putting this code...and installed successfully. But what i got is they are not aligned properly like yours. So please provide me the exact code you used. MY template is icyblue. Please help

Reply
avatar
August 29, 2009 4:44 PM delete

hey s@i i hav done all d editions in d template but i cant find dose buttons below my post
am using Langit template......
pls help.....
my blog -> http://hack-krishna.blogspot.com
pls...reply at
harry_krish_143@yahoo.co.in
pls pls pls pls pls.................

Reply
avatar
August 30, 2009 4:34 AM delete

@ yooray,

For proper alignment, use all images of same size, or make sure symmetry is maintained between the images set.

@ hack-krishna
No code found in your blog, make sure you have done the coding right.

Reply
avatar
September 11, 2009 11:03 PM delete

Thank you SO much. I was beating my head against my desk trying to figure this out. This is BY FAR the easiest, most user-friendly article I've found, and your step-by-step instructions worked like a charm. Thanks again!

Reply
avatar
September 12, 2009 2:12 AM delete

Glad to know that Fifer....you may try these butons too:
http://bloggerstop.net/2009/03/change-opacity-image-hover-effect.html

Reply
avatar
September 13, 2009 5:19 PM delete

Hey Divyaa !! Please this is urgent xD

Can you tell me how to change the icon to the Digg code ? I mean, I read the other comment you made but it's not working and can't seem to make it work.

I get this error: "The reference to entity "url" must end with the ';' delimiter."

Reply
avatar
September 14, 2009 8:04 AM delete

Hi Daniel,
yeah there's some problem in that code, try this one:

<a expr:href="&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" target="_blank" rel="external nofollow"><img border="0" src="http://www..........png"/></a>

Regards

Reply
avatar
September 14, 2009 8:07 AM delete

err...Here's the code without smilies

<a expr:href="&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" target="_blank" rel="external nofollow"><img border="0" src="http://www..........png"/></a>

Reply
avatar
September 14, 2009 4:13 PM delete

Hey, thanks anyways ^^.. I already discovered that by myself and sorry for late response, that's because I'm at school =))

And thanks for the comment too :D

Reply
avatar
September 29, 2009 12:58 PM delete

I kind of used your code in a different way: I've put it under the line [div class='post-footer-line post-footer-line-3'/]. I only use the facebook icon and it works, but:
although the link is created for the right item, it won't indicate the post title. Instead, I have the blog title and description. How can I solve this? Also, there is a choice of image to embed with the shared item, and some part of a banner ad show up in there. Any way I can get rid of this? Thanks
(check it out on www.enroutepourlacoupe.com)

Reply
avatar
September 30, 2009 12:48 AM delete

Ah, I seem to have a problem. Everything works fine, except I have a forwarding url, and when I click on the post it changes to a blogspot url. Is there anything I can do about this so it doesn't do that?

Thanks,
Lina

Reply
avatar
September 30, 2009 7:50 AM delete

Hi Lina,

Couldn't see any url redirection in your blog. And why don't you use some images/logos too?
BTW, nice pics !!!

Reply
avatar
September 30, 2009 10:11 AM delete

ah, probably because my blogger profile leads to the blogspot url. My redirected url is www.makeuptomakeout.co.uk.

I did use images but I guess they're not loading quick enough? Sometimes only a few load up when I'm looking at it. IS there any way I can fix this?

Thanks about the pics. :)

Reply
avatar
September 30, 2009 10:24 AM delete

Hi Sai! Any idea how to solve my problem (see previous comment)?

Reply
avatar
September 30, 2009 10:44 AM delete

@Lina,
okay...if that domain is owned by you, then instead of redirection, use DNS-management. WWW is a subdomain on your domain "makeuptimakeout.co.uk"
so go to DNS-settings of this subdomain (www.makeuptimakeout.co.uk) and edit its CNAME records and use it as a custom domain.
some details here:
http://bloggerstop.net/2008/10/get-domain-unlimited-hosting-and.html (Read 5th comment too)

@Fred
Actually I am not a frequent user of FB, but I tried posting an article from your blog to FB, and I think I was successful in doing so.
Moreover your icon placement was also perfect, no overlapping by any ad was noticed by me...
Here are 2 screenshots:
http://i35.tinypic.com/2cn9j83.jpg
http://i36.tinypic.com/2eg4qx3.jpg

Reply
avatar
October 01, 2009 1:05 PM delete

Sai, thank you so much for your help! I am a total novice but following your advice in the posts recommended I managed to delve into the dangerous and mysterious world of CNAME and actually fix the url prob (momentarily atleast, anyway) - is there any way to show a distinct url for a post without having to use the blogspot one? A point in the right direction would help immensely. :)

Another thing, not major at all, the images load up fine now for the social networking buttons, just wondered if you had any code for tumblr? Would love to add that button too.

Thanks!

Reply
avatar
October 19, 2009 7:02 AM delete

Wow, that was ridiculously easy! Thanks so much!

Reply
avatar
November 10, 2009 8:14 AM delete

any chance in pointing me in the right direction for a weebly site? I am too deep into weebly to switch... Any help would be much appreciated.

Reply
avatar
November 26, 2009 3:11 AM delete

That was the first code that has worked properly. I would like to know how I could put text in beside my icons to entice people to Share!

Reply
avatar
November 26, 2009 3:19 AM delete

Just before this code:
</a>
in any of those buttons, put your text, like this:
nofollow' target='_blank'<>img alt='Stumble' src=' '/>STUMBLE IT!</a>

Reply
avatar
December 27, 2009 8:55 AM delete

cool but other than digg icon, for me it doesnt show any other icons

Reply
avatar
January 12, 2010 2:10 PM delete

Yeah, it's not working for me either, unfortunately. Nothing shows up at all. Thanks anyway.

Reply
avatar
January 12, 2010 2:26 PM delete

@izdelava internet strani and @Lana Gramlich
Give me your blog address where you are trying this hack. And leave the code intact so that I can check it properly (of course add the images - icon addresses in the code - highlighted in RED).

Reply
avatar
January 13, 2010 2:34 PM delete

Divya,

I like your use of share buttons, especially with Twitter and how it connects to your Twitter account with a "currently reading..." How do I do this for my website?

Thanks!
Alyse

Reply
avatar
January 13, 2010 3:15 PM delete

I'm glad you liked those buttons Alyse, here's the code for the twiter button: (use this instead of the one in the post)

<a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'><img alt='Tweet It!' src='http://i50.tinypic.com/vpzyus.jpg' width='122'/></a>

Reply
avatar
January 16, 2010 11:58 PM delete This comment has been removed by the author.
avatar
January 17, 2010 3:14 AM delete

In the above, after these two lines:

<!--SOCIAL-BOOKMARKING-ICONS-STARTS-->
<b:if cond='data:blog.pageType == "item"'>

write your text, like this:

<!--SOCIAL-BOOKMARKING-ICONS-STARTS-->
<b:if cond='data:blog.pageType == "item"'>
<center>Like This Post , Then Share...</center>

Reply
avatar
January 17, 2010 4:41 AM delete

Hey Thanks, but that digg button is pissing me of i wanna change it ..
Any way out ?

Reply
avatar
January 17, 2010 4:46 AM delete

Yes that's possible Anmol, I'll update the post with a new code in a few minutes.

Reply
avatar
January 17, 2010 4:50 AM delete

Post updated buddy...try the new code :)

Reply
avatar
January 27, 2010 6:47 PM delete

My icons are showing on two different rows. I am using six icons and three show right after the last sentence in my post and the other three show on the line below. What am I doing wrong? Thanks so much for all of your great information!

Reply
avatar
January 27, 2010 10:10 PM delete

Hey Kelly,
Need your blog address to check the code...

Reply
avatar
January 28, 2010 11:57 PM delete

Thanks! www.clevelandkidsrock.com

Reply
avatar
January 31, 2010 9:47 PM delete

I figured it out. Thanks.

Reply
avatar
January 31, 2010 11:29 PM delete

Sorry forget to reply you. Anyways that's great you got it. IF you need to know anything else, then plz feel free to ask,

Reply
avatar
February 10, 2010 2:24 PM delete

I got all of them to work except for twitter : (
I am no coder and am a little lost as to trouble shoot it. Please help.

Reply
avatar
February 10, 2010 10:48 PM delete

@vanderengel

Use this code for twitter, instead of the one from the post above:

<a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'><img alt='Tweet It!' src='http://i50.tinypic.com/vpzyus.jpg' width='122'/></a>

Reply
avatar
February 11, 2010 5:53 AM delete

How Can I use These Social Bookmarking Buttons in Collapsible Multi-Tabbed Widget Like You Also have in your blog below every post.

Reply
avatar
February 13, 2010 4:31 AM delete

Nice

But, what if i want two post on my home page and i want these icons on both posts.

Reply
avatar
February 13, 2010 4:52 AM delete

Go to settings, and change the no. of posts to be displayed in the homepage.
You can have as many posts as you want in the homepage, the buttons are unique to the post, beneath which they are present. Just click on any button, and it will add that specific post to that networking website.

BTW, I have used a code to hide these buttons, in the homepage, you may show these buttons in the homepage too, by deleting this code (bolded):

<b:if cond='data:blog.pageType == "item"'>
...
...
...
</b:if>

Reply
avatar
February 23, 2010 6:11 AM delete

Hi Divya,
This is pretty good. But I have a better suggestion.
http://www.omgubuntu.co.uk/2010/02/enable-rgba-window-transparency-in.html

In that link, you can see the share this button below the post. Do you know how to get that collection. I really like it, but I have no idea how could I possibly install it in my blog. Can you help me with this. Thanks.

PS: I am presently using sociofluid widgets for my blog. It is nice, a bit heavy though.

Reply
avatar
February 23, 2010 7:59 AM delete

You mean 2 columns of 4/5 buttons in each?

Reply
avatar
February 23, 2010 9:38 AM delete

Exactly, It is simple yet functional. Do you have some hack on it. Thanks in advance ;-)

Reply
avatar
February 23, 2010 9:57 AM delete

Well, that page doesn't require any other separate code. Just put the above code in two different columns of a HTML table, like this:


<table border="0"><tr>
<td> Code_FOR_4/5_Buttons_WILL_COME_HERE </td>
<td> Code_FOR_OTHER_4/5_Buttons_WILL_COME_HERE </td>
</tr></table>

Reply
avatar
February 27, 2010 7:34 AM delete

Thanks so much - this works beautifully!

Reply
avatar
February 27, 2010 7:57 AM delete

I have Link Within on my blog and I'd really like these buttons to appear below it, instead of above as they are now - is there a way to fix this? Thanks so much!

Reply
avatar
March 07, 2010 3:33 PM delete

Actually the position of linkwithin is fixed in their code, so just try shifting the code above/below the code you are using for your bookmarking buttons. BTW you have a great blog-layout :)

Reply
avatar
March 07, 2010 3:35 PM delete

Hey just checked a post on your blog and found the linkwithin widget above the buttons, just as you wanted. So I hope you have fixed the problem yourself.
Cheers
Sai

Reply
avatar
March 11, 2010 1:24 AM delete

Thank you so much! I drew versions of the icons by hand but didn't know what to do after uploading them! Now they look great :)

Reply
avatar
March 13, 2010 10:15 PM delete

Ugh.

Numerous errors that make no sense.

Reply
avatar
March 13, 2010 10:27 PM delete

Holy cow, somebody help. We're a bunch of dumb journalists, not hackers.

Reply
avatar
March 14, 2010 1:21 AM delete

What are the errors?
What's the url of your blog...???

Reply
avatar
March 14, 2010 5:14 PM delete

It's www.360degrez.blogspot.com

The errors have to do with not closing the XML or something like that. Grrrr.

360degrez@gmail.com

Reply
avatar
March 15, 2010 8:58 AM delete

All the tags in that code are already closed, may be there's some other code error in your template...

Reply
avatar
March 16, 2010 2:35 AM delete

No other code errors in our template, otherwise they would be evident - errors only appear after the social networking code is placed in the template. We've verified and reverified and frankly, we're stumped. We do have the code of our template if someone would like to look at it; otherwise we'll either keep working on it or keep looking for a solution online.

Many thanks!

Reply
avatar
Anonymous
March 22, 2010 1:39 PM delete

Thank you so much for this.

Reply
avatar
March 30, 2010 7:22 AM delete

hi sai i want to add Bookmark this blog button like, the buttons that are placed in yours Bookmark this blog that are placed in yours multi tab.pls give me the code for that.pls hlp.
Thanks in advance.

Reply
avatar
April 06, 2010 1:45 PM delete

Is there anyway to use this code and intead of showing Images just show "Tweet This", Stumble This" text links?

Reply
avatar
April 06, 2010 1:53 PM delete

Yup that's possible...delete the entire image tag;

<img src..../>

and instead of that, write your own text.

Reply
avatar
April 08, 2010 5:19 PM delete

http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif

Reply
avatar
April 13, 2010 2:38 PM delete

Hi i found another site that takes all the hard work out of the coding, its http://www.freesocialbuttons.com here all you have to do is enter your social network site profile and it does all the coding, you just have to choose the button you want and copy and paste to your site/blog. http://freebuttons.ws also have a good selection of buttons

Reply
avatar
April 13, 2010 2:42 PM delete

Hey mark....nice find...thnkx for sharing them with us !

Reply
avatar
April 25, 2010 10:31 AM delete

i'm trying to add the facebook and twitter link to each of my blog (like i did with the stumbleupon) and i can't figure out how to get a direct link. i tried the website posted by mark, but it's coming up as a reported attack page! is there any other website i could use to get a direct link? any help would be greatly appreciated.

i added a forum page as well. are the archives and everything else supposed to be shown underneath? http://www.umommy.ca

p.s. thanks for all the tips! i'm new to blogging and have NO idea what i'm doing.

Reply
avatar
April 25, 2010 3:32 PM delete

Hi there,
this is the code for twitter buttons, (similar to that of SU):
http://bloggerstop.net/2009/04/tweet-it-and-retweet-buttons-for.html

and here's the tutorial for FB buttons:
http://bloggerstop.net/2009/11/add-facebook-buttons-and-widgets-to.html

Reply
avatar
mii
May 10, 2010 2:52 PM delete

Hi, it worked to post the code to display a facebook and twitter button. However the buttons are displayed right next to my last sentence of my post. Is there a way to place them a few enters below the post? Or next to the Comments link?

Reply
avatar
May 11, 2010 1:41 AM delete

@ mii,

After this line in the code:
<!--SOCIAL-BOOKMARKING-ICONS-STARTS-->

type this:
<br />

each "<br />" will send the buttons one line below.

Reply
avatar
mii
May 11, 2010 2:05 AM delete

Thanks! It worked!!
Do you also know how i can remove the border around the twitter and facebook buttons? example

Reply
avatar
May 11, 2010 2:18 AM delete

It is of course possible to remove the border around the images, but that will be specific to your ....so I need your blog address to tell the additional code.
By the way do you want to remove the border around only Twitter/Facebook, or off your all images?

Reply
avatar
mii
May 11, 2010 5:59 PM delete

Hi, the border around only the Twitter & Facebook buttons. This is my blog. Thank you so much btw!

Reply
avatar
May 12, 2010 9:59 AM delete

Nice blog...

Do this ...go to "Edit HTML", and immediately above the tag </head>

paste this code:

<style type="text/css">
# nobr {
border: 0px !important;
}
</style>


and then go to your twitter/facebook images code, and edit them like this:

<!--Twitter-->
<a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'><img id="nobr" alt='Tweet It!' src=' ' width='122'/></a>
<!--Facebook-->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img id="nobr" alt='Facebook' src=' '/></a></b:if>

Notice the bolded "id=nobr" code at two places in the code, that is what you have to add. That's it, save the template. Your wrk is done :)

Reply
avatar
mii
May 12, 2010 1:53 PM delete

Hi, i added these codes but it doesn't work :( Did I forgot something?

Reply
avatar
May 12, 2010 2:02 PM delete

Oops sorry a space should not come in the code,
use this:

#nobr {

instead of this:

# nobr {

Reply
avatar
mii
May 12, 2010 2:32 PM delete

Awesome! It's working perfect. Thanks so much for your help! :)

Reply
avatar
May 12, 2010 2:39 PM delete

You are most welcome :)
Glad I could help ...

Reply
avatar
May 12, 2010 2:42 PM delete

From now onwards, in case you want to remove the border from any image (inside a post/widget) use that id="nobr" in that specific image tag, that's it. That image will be displayed without a border...

Reply
avatar
May 14, 2010 3:54 PM delete

Do you have the code for LinkedIn Share or Blogger Share? I have room for two more buttons.

Thank you!

Reply
avatar
Anonymous
May 18, 2010 5:55 PM delete

Hey, I just wanted to say thanks for putting together a nice set of icons! thanks again!

www.tjg-designs.com

Reply
avatar
June 12, 2010 5:42 AM delete This comment has been removed by the author.
avatar
June 21, 2010 2:46 AM delete

thanks for your post i was looking for something like this. Ill be subscribing to your RSS feed.

Reply
avatar
June 25, 2010 10:44 AM delete

Thanks for that.i pasted the code.but because i have not a digg icon so i cannot paste the link of digg,but i pasted another all codes right.but when i click on preview there aren't any share icons,plz tell me what can i do?
Thanks Again.......

Reply
avatar
June 25, 2010 11:36 AM delete

You cannot see these buttons in preview mode.
Because, in preview mode, only homepage is shown, whereas these buttons are displayed ONLY bloe posts and are hidden in homepage by default.
So, paste the code, save the template, go to ANY of your POSTS and see the buttons below that specific post.

Reply
avatar
June 30, 2010 1:02 PM delete

Hi,
I'm doing exactly what your asking, I copy and pasted the code under
I added the direct links but nothing shows, I saved the template, went to the blog and there's nothing bellow the posts. I don't know what I'm doing wrong :(

Reply
avatar
Anonymous
July 21, 2010 4:08 AM delete

This is exactly what I have been looking for!

My question is, how can i hide the bookmarks from showing up on STATIC pages only?

Please keep up the great work!

Reply
avatar
July 21, 2010 10:33 AM delete

Hi there,
yes that's possible ...read Case #6 of this tutorial.

Reply
avatar
July 22, 2010 10:59 PM delete

Hi! Thank you for sharing this awesome tips. I would like to add several icon into my blog. I follow exactly like your steps stated, however I don't know why the icon won't appear.. Could you please help me on how to sort it out... This is my blog link http://iebol12.blogspot.com
Thank you!
Xxx. Zaffi.

Reply
avatar
July 22, 2010 11:58 PM delete

Hey Zaffi,
I can see the icons on your blog. Just make sure that all those icons are of equal size, as presently Twitter-icon is larger than others. Feel free to ask all your queries on this blog...

Reply
avatar
July 23, 2010 8:24 AM delete

Divya,
Thank you for your reply!! I'm grateful for it :)I've managed to arrange all icons properly, but I want all the icons to appear at the main page of my blog as well. Now, they are all appear when I click at the entry title only...

Reply
avatar
July 23, 2010 10:07 AM delete

Welcome Zaffi,

Just delete these two lines from the code:

<b:if cond='data:blog.pageType == "item"'>
...
...
...
</b:if>

and save the template.

Reply
avatar
July 28, 2010 2:20 AM delete

You said...

Just delete these two lines from the code:


...
...
...


and save the template.


..............................................

this did not work for me. i deleted those lines and the icons still only show up on the individual posts.

Reply
avatar
July 28, 2010 2:25 AM delete

well, the issue must be situational because it worked on another blog of mine but not on another.

one question...

is there a way to get more space before the icons? they are right under the typing of the blog posts. see here: http://iwantawin.blogspot.com/

Reply
avatar
July 28, 2010 11:21 AM delete

Hi Lesa,
Immediately after this line:
<!--SOCIAL-BOOKMARKING-ICONS-STARTS-->

add this code:
<br />

Reply
avatar
August 20, 2010 5:57 AM delete

Thanks for the outstanding suggestion for blogging……all should follow your instructions.

Reply
avatar
September 16, 2010 4:34 PM delete

Thank you so much for sharing this! It worked like a charm. :D

Reply
avatar
September 20, 2010 5:42 AM delete

Thankyou for your code information. It helped me to customize my blog and keep some social bookmarking buttons in my site.

Reply
avatar
October 01, 2010 2:03 PM delete

Loved this!

Please could you provide the code for an RSS feed too? (that would be VERY welcomed :)

Frogster.

Reply
avatar
October 01, 2010 2:16 PM delete

Hey Frogster, here you go:

Add this code, before the </b:if> code

<!--FEED-->
<a href="YOUR_FEED_LINK" target='_blank'><img alt='Subscribe to this blog' src=' ' /></a>

Reply
avatar
October 01, 2010 2:51 PM delete

Thanks so much! everything has worked a treat :)

Reply
avatar
October 03, 2010 3:13 PM delete

Hello,

You are a star for making these! It's just what I have been looking for :)

I have one question though, I currently have boarders set on my blog as I like they way they frame my cartoons but unfortunately by default they have also framed my social networking buttons.

Is there any code I can add to these that would remove the little grey border around each one without it affecting my other borders? Please have a look at them here:

www.giddyfingers.com

Many thanks!

Marsy

Reply
avatar
October 03, 2010 3:23 PM delete

Thanks Marsy,

Yeah that is possible.
Find this code in your blog,
</head>

and immediately above it, paste this code:
#nobg {
border: 0px !important;
}

and then in your buttons code, to each image tag, add id="nobg" attribute.
that means, presently the image tags (ex. for delicious) look like this:
<img alt='Delicious' src=' '/>
so make it this:
<img id="nobg" alt='Delicious' src=' '/>

If you still find a problem in this, then feel free to ask it here. Regards...

Reply
avatar
October 03, 2010 3:44 PM delete

Thanks for that I just tried it and unfortunately it didn't work - I think the new blogger template uses a webkit-box which controls the boxes around images. I have left you code in for now let me know if I should remove it and if there is anything I can try.

a big thanks!

Marsy

Reply
avatar
October 03, 2010 3:56 PM delete

okay, sorry i gave you incomplete code b-(
here's the complete code:

<style type="text/css">
#nobg {
border: 0px !important;
}
</style>

BTW your cartoons are really really good :)

Reply
avatar
October 03, 2010 4:08 PM delete

You are pretty amazing and fast, that has worked now. As you can see me no understandy cody! I only know about drawing and stuff :) Thanks for the compliments though!

A super big thanks to you and all your hard work here to give peeps like me a neat way to share content.

All the best.

Marsy

Reply
avatar
October 03, 2010 4:17 PM delete

Thanks Marsy :)
Have a great week ahead...

Reply
avatar
October 04, 2010 6:21 AM delete

Hi Sai,

Thanks for providing me with the code for adding an RSS feed button the other day :)

I was wondering if know how to get the code for an email 'this post' button? So when someone clicks the little envelope icon it will bring up an option where they can email that particular post to anyone they want?

That would be fantastic.

Hope you had a great weekend.

Frogster

Reply
avatar
October 04, 2010 7:53 AM delete

Hey Frogster, use this code:

<a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'> <img alt="mail to share this post" src=""/> </a>

Regards...

Reply
avatar
October 26, 2010 4:14 PM delete

Hello Sai,

How's it going?

I was wondering if you know how I can add a graphic that says "Sharing is caring" or something similar like how you have in your tutorial: http://bloggerstop.net/2009/05/add-autohiding-social-bookmarking.html
I would like to add this graphic to the top of my social networking buttons which I have here: www.giddyfingers.com

Thank you!

Marsy

Reply
avatar
October 27, 2010 12:07 PM delete

Hey Marsy,

You mean adding that graphic separately, or instead of the text "Sharing is Sexy"?
If you want to use exactly that widget with the text "Sharing is caring", then I have a "NOTE" in that tutorial, a simple editing in the code is required, I hope you'll get it easily.

And to use that graphic separately, anywhere else, you can use this image (you will have to crop it using MS-PAINT etc.):
http://i52.tinypic.com/sxd4e8.jpg

Reply
avatar
November 09, 2010 3:23 PM delete

Hi Sai,

Thank you for your response.

I would like to add just the graphic on its own - sharing is caring - above a set of social network icons I have on my blog (so not using the hidden ones you have in your tutorial).

I would like to simply add the sharing is caring graphic so that it appears just above my social networking icons on all my posts and was wondering if you would know the blogger code for this and where I would need to paste it.

Many thanks again!

Marsy

Reply
avatar
November 14, 2010 4:53 AM delete

thank you for the post...
I am looking for Tweeter and Facebook buttons that show the number of tweets and likes - they should be the same style, same size.
Do you know any such buttons?
Please share if you do!

Reply
avatar
November 22, 2010 6:14 PM delete

I am so stuck. I tried and tried and it won't even let me preview the page. XML error or something. I have no idea. My blog is blogbrownbear.blogspot.com and the first post that you see is the code that I have (since it won't let me post it here. I must have really messed it up) Could you look at it and tell if there is anything obviously wrong that you could fix up for me since I have managed to turn your wonderful code to crap. Thank you so much!

Reply
avatar
November 22, 2010 10:47 PM delete

Hi Amma,

In that code, wherever you are pasting the URL of images, then http is a must...

So, in some the code is like this:

src='://i51.tinyp

Make it this:

src='http://i51.tinyp

Reply
avatar
November 23, 2010 3:58 AM delete

I fixed those but now it says "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "img" must be followed by either attribute specifications, ">" or "/>"."

Reply
avatar
February 14, 2011 11:33 PM delete

thanks for sharing. it works for me.

Reply
avatar
March 22, 2011 11:52 AM delete

What is the Significance of "width='122'/>" at the end of Twitter Section. I removed that part and it Still works fine for me.
Also when is try to SHARE VIA Twitter(on my blog www.techchasse.blogspot.com), i cant share as it Exceeds 160 characters, So i have to Delete some characters to post successfully. Can't the link Shorten Automatically or something. because the link only eats up half of 160 Characters on Twitter Post. Please Help.
U can try Sharing the First Post of my Blog and see for urself the Error. Thanking You.

Reply
avatar
March 22, 2011 12:11 PM delete

Well width=122 is the code, that tells a browser what's the size of the image...an SEO thing...let it be there in the code.

To have a truncater-code in the tweet this button, use this one:
http://bloggerstop.net/2009/04/tweet-it-and-retweet-buttons-for.html

Reply
avatar
ome
April 05, 2011 11:24 AM delete

hi i have problem... all is well but 5-6px width white border appear around icon. originally icon have no boarder.i try 2-3 different icon but problem not solved. my blog background is not white.

Reply
avatar
April 05, 2011 11:35 AM delete

Hey there,

Read comment #127 and do exactly what I have advised in that comment.

Reply
avatar
ome
April 06, 2011 1:12 AM delete

Still not working.... =((

Reply
avatar
April 07, 2011 6:16 AM delete

Hi thanks so much for this, but when I add the code all the icons except the twitter icon appear huge.

Is there a way to fix it?

Reply
avatar
April 07, 2011 6:25 AM delete

Hey, never mind I just added the width=70 to all the images. they look great!

Thank you so much!

I have another question although slightly related to this. If I want to add the same icons to a widget in the side bar, how do I make them closer together? I'd like 9 of them. In a 3x3 square.

Thank you for this amazing site!
Vanja

Reply
avatar
April 09, 2011 12:57 PM delete

very good informatic site for bloging gadgets and thanks u very much to very good way and add this gadget

Reply
avatar
May 23, 2011 4:41 AM delete

I DIDN'T GOT IDEA WHERE TO GET THE URL CODE FOR THE BUTTONS

Reply
avatar
July 03, 2011 9:24 AM delete

Hi thanks so much for this, but when I add the code all the icons except the twitter icon appear huge. You really solve my problem. i have added these one on my blogger. thanks.

-sara angel

Reply
avatar
July 03, 2011 9:27 AM delete

thanks for this wonderful social buttons you shared!

Reply
avatar
July 06, 2011 10:45 PM delete

Social media is a very crucial part of business these days.
It connects many people different cultures,traditions and countries within short time.We plan to thrive and grow thanks to social media.Very nicely and created list, and also helpful blog.

Reply
avatar
July 20, 2011 4:19 PM delete

LOVE this... I so want to get this on my blog, but keep getting an error. Here's the message I get:
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 element type "b:includable" must be terminated by the matching end-tag "".

Can you tell what's wrong??

My blog is at FreshMommyBlog.com

Reply
avatar
August 10, 2011 9:36 AM delete

T.T

It didn't work. I already checked each post but still didn't work. I've tried a lot already but still none of them worked.

Reply
avatar
August 11, 2011 6:28 AM delete

Hi,

thank you for all. For me everything work perfect.

Thanks!

BR, Tim

Reply
avatar
August 30, 2011 4:43 PM delete

Okay, now I feel dense too. I'm not html literate and copied and pasted the code above into my template. I'm having a hard time with the icons. I've downloaded from one of the sites you mentioned, but neither of the links from your second post works (below is the post). Please help.

Now, to get the links [direct links] of the images, you can either upload them at
pages.google.com

or here:
hotlinkfiles.com

Reply
avatar
September 07, 2011 3:50 AM delete

Very nice icon, but not working for me :(

Reply
avatar
October 07, 2011 2:01 AM delete

One more do follow social bookmarking site :: http://www.Socialbm.info

Reply
avatar
October 07, 2011 4:42 PM delete

TRY IT HERE http://helpblog4u.blogspot.com/2011/10/facebook-like-button-below-every-post.html

Reply
avatar
October 14, 2011 12:13 AM delete

hello,
As I have read the blog above, I was glad because the topic is interesting and I learned a lot from it. Hope to see more likely this one.

Reply
avatar
Anonymous
October 31, 2011 7:20 AM delete

hello divya,
how do i embed thumbnails and put a link on it..if i click the thumbnail then go to specified link on my blog

thanks in advance..

Reply
avatar
Anonymous
November 04, 2011 12:19 PM delete

I like the resource :) Thanks very much.Well i found another very good social networking site www.goodwizz.com. Worth a check :)

Reply
avatar
December 19, 2011 10:52 AM delete

Hey I have a weebly website, can you tell me if this is compatible? And can I use my own image codes? Thanks.

Reply
avatar
December 19, 2011 4:03 PM delete

I've managed to add the images, but I'm not sure how to link to the relevant sites can anyone help?

Reply
avatar
January 13, 2012 3:48 AM delete

..u R AWEsome!!
but instead of adding icons n links..
i 'd like to ask whether HOW TO REMOVE the social networkin'icons like fb.twitter..that originally exist below every blog post?

Reply
avatar
January 22, 2012 9:13 AM delete

really best yaar awesome working

Reply
avatar
«Oldest   ‹Older   1 – 200 of 203   Newer›   Newest»

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon