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:
Then immediately after that code, add these lines:
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.
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='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg It!' src=' ' /></a>
<!--Stumble-->
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src=' '/></a>
<!--Delicious-->
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src=' '/></a>
<!--Technorati-->
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src=' '/></a>
<!--Twitter-->
<a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'><img alt='Tweet It!' src=' ' width='122'/></a>
<!--Facebook-->
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + 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.
202 comments
Write comments «Oldest ‹Older 1 – 200 of 202 Newer› Newest»This is probably dense, but how do I get urls for the buttons once I've downloaded them?
ReplyHi Erin
ReplyIf 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
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. :-)
ReplyThanks for your help!
Hey mate have a little atention about navigation bar.Your icons are reversed :D
ReplyHi Alin
Replythanks 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 !
Hi there,
ReplyI'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?
Thanks for commenting..
ReplyThe 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
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.
ReplyThank 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:
ReplyThe 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...
Welcome again
ReplyWhen 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
Great Work. Some cool resources. Keep up your good work. Only grunt is site takes quite some time to load. Please make it faster.
ReplyThanks 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!
ReplyHi,
Replyi 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
Give the link to your blog !
Replyi tried this one....
Replyits working properly but all buttons also showing at the homepage also below every post... I am using notepad template.. why it is so..
By the following method, you can show/hide widgets or anything in any of the pages of your blog..
Replypresently 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
Hi Divya,
ReplySorry 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:-)
Well, templates do affect a lot, it has to be both Search engine and visitor friendly.
ReplyTry 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 !
Man you are great!
ReplyCould 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___
Hi Mohammad,
ReplyHere'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 !
Nice Icons dude.
ReplyI 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.
ReplyThanks for any help. Ryan drryanjames@gmail.com
Hi Ryan,
Replyyou 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.
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.
ReplyWelcome Chris, and thanks for your encouraging comment !
ReplyRegards
Sai
Hey!
ReplyThanks 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
Hello Emma,
ReplyFor 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
be entertained
ReplyHi 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
Replytx.
Hi Ambara,
ReplyFor 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
I really liked your post, it has been very useful for me as a new user of blogger.
ReplyThanks Buddy form http://sfasoft.blogspot.com
ReplyWow! You're so awesome! Thank you :D
ReplyI tried this, and this is the error message i got:
Replyplease 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 "".
Sai Ramji Divya,
ReplyCan 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
Hello Hetal,
Replytry 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
Oops they are not smileys in the comment above, replace them with this :
Reply:P
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
ReplyFor twitter buttons, of course you can either use this method, or you may also read this post:
Replyhttp://bloggerstop.net/2009/04/tweet-it-and-retweet-buttons-for.html
this is not working for me :(.
ReplyI'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
merci ça marche trés bien ;)
Replywer is the code for the button friendster,youtube etc. ? :D
ReplyThanks 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?
ReplyHi Joana,
ReplySimly 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 ...
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:
Reply<b:if cond='data:blog.pageType == "item"'>
LINKWITHIN CODE HERE
</b:if>
Thanks for the hint, but... ~x(
ReplyIt'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.
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"
ReplyDue 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.
ReplyAre you facing the problem only in the facebook button or in all of them ?
I am facing a problem only with the FB button, since I do not want to add others.
ReplyI do what you write and the address is not correct. Shall I show?
Well I just tried to post to FB, from your blog, and the redirection was successful, here's the screenshot:
Replyhttp://i31.tinypic.com/9rnneu.png
If you want to recheck it, please ask any of your friends to try it out for you...
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!
ReplyHi, how can I add some words like, "Share this Article" before the buttons? This works great. You've helped me a lot so far.
ReplyAdd it after the first bolded line and before the first button (i.e. DIGG)
Replywell i m trying to add stumble upon button to my each blog post but getting error message
Replyi 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
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@ Raj,
Replythe 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>
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
Replyhey s@i i hav done all d editions in d template but i cant find dose buttons below my post
Replyam 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.................
@ yooray,
ReplyFor 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.
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!
ReplyGlad to know that Fifer....you may try these butons too:
Replyhttp://bloggerstop.net/2009/03/change-opacity-image-hover-effect.html
Hey Divyaa !! Please this is urgent xD
ReplyCan 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."
Hi Daniel,
Replyyeah there's some problem in that code, try this one:
<a expr:href=""http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title" target="_blank" rel="external nofollow"><img border="0" src="http://www..........png"/></a>
Regards
err...Here's the code without smilies
Reply<a expr:href=""http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title" target="_blank" rel="external nofollow"><img border="0" src="http://www..........png"/></a>
Hey, thanks anyways ^^.. I already discovered that by myself and sorry for late response, that's because I'm at school =))
ReplyAnd thanks for the comment too :D
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:
Replyalthough 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)
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?
ReplyThanks,
Lina
Hi Lina,
ReplyCouldn't see any url redirection in your blog. And why don't you use some images/logos too?
BTW, nice pics !!!
ah, probably because my blogger profile leads to the blogspot url. My redirected url is www.makeuptomakeout.co.uk.
ReplyI 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. :)
Hi Sai! Any idea how to solve my problem (see previous comment)?
Reply@Lina,
Replyokay...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
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. :)
ReplyAnother 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!
Wow, that was ridiculously easy! Thanks so much!
Replyany 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.
ReplyThat 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!
ReplyJust before this code:
Reply</a>
in any of those buttons, put your text, like this:
nofollow' target='_blank'<>img alt='Stumble' src=' '/>STUMBLE IT!</a>
cool but other than digg icon, for me it doesnt show any other icons
ReplyYeah, it's not working for me either, unfortunately. Nothing shows up at all. Thanks anyway.
Reply@izdelava internet strani and @Lana Gramlich
ReplyGive 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).
Divya,
ReplyI 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
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)
Reply<a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'><img alt='Tweet It!' src='http://i50.tinypic.com/vpzyus.jpg' width='122'/></a>
In the above, after these two lines:
Reply<!--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>
Hey Thanks, but that digg button is pissing me of i wanna change it ..
ReplyAny way out ?
Yes that's possible Anmol, I'll update the post with a new code in a few minutes.
ReplyPost updated buddy...try the new code :)
ReplyMy 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!
ReplyHey Kelly,
ReplyNeed your blog address to check the code...
Thanks! www.clevelandkidsrock.com
ReplyI figured it out. Thanks.
ReplySorry forget to reply you. Anyways that's great you got it. IF you need to know anything else, then plz feel free to ask,
ReplyI got all of them to work except for twitter : (
ReplyI am no coder and am a little lost as to trouble shoot it. Please help.
@vanderengel
ReplyUse this code for twitter, instead of the one from the post above:
<a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'><img alt='Tweet It!' src='http://i50.tinypic.com/vpzyus.jpg' width='122'/></a>
How Can I use These Social Bookmarking Buttons in Collapsible Multi-Tabbed Widget Like You Also have in your blog below every post.
ReplyNice
ReplyBut, what if i want two post on my home page and i want these icons on both posts.
Go to settings, and change the no. of posts to be displayed in the homepage.
ReplyYou 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>
Hi Divya,
ReplyThis 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.
You mean 2 columns of 4/5 buttons in each?
ReplyExactly, It is simple yet functional. Do you have some hack on it. Thanks in advance ;-)
ReplyWell, that page doesn't require any other separate code. Just put the above code in two different columns of a HTML table, like this:
Reply<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>
Thanks so much - this works beautifully!
ReplyI 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!
ReplyActually 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 :)
ReplyHey 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.
ReplyCheers
Sai
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 :)
ReplyUgh.
ReplyNumerous errors that make no sense.
Holy cow, somebody help. We're a bunch of dumb journalists, not hackers.
ReplyWhat are the errors?
ReplyWhat's the url of your blog...???
It's www.360degrez.blogspot.com
ReplyThe errors have to do with not closing the XML or something like that. Grrrr.
360degrez@gmail.com
All the tags in that code are already closed, may be there's some other code error in your template...
ReplyNo 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.
ReplyMany thanks!
Thank you so much for this.
Replyhi 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.
ReplyThanks in advance.
Is there anyway to use this code and intead of showing Images just show "Tweet This", Stumble This" text links?
ReplyYup that's possible...delete the entire image tag;
Reply<img src..../>
and instead of that, write your own text.
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
ReplyHey mark....nice find...thnkx for sharing them with us !
Replyi'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.
Replyi 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.
Hi there,
Replythis 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
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@ mii,
ReplyAfter this line in the code:
<!--SOCIAL-BOOKMARKING-ICONS-STARTS-->
type this:
<br />
each "<br />" will send the buttons one line below.
Thanks! It worked!!
ReplyDo you also know how i can remove the border around the twitter and facebook buttons? example
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.
ReplyBy the way do you want to remove the border around only Twitter/Facebook, or off your all images?
Hi, the border around only the Twitter & Facebook buttons. This is my blog. Thank you so much btw!
ReplyNice blog...
ReplyDo 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='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'><img id="nobr" alt='Tweet It!' src=' ' width='122'/></a>
<!--Facebook-->
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + 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 :)
Hi, i added these codes but it doesn't work :( Did I forgot something?
ReplyOops sorry a space should not come in the code,
Replyuse this:
#nobr {
instead of this:
# nobr {
Awesome! It's working perfect. Thanks so much for your help! :)
ReplyYou are most welcome :)
ReplyGlad I could help ...
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...
ReplyDo you have the code for LinkedIn Share or Blogger Share? I have room for two more buttons.
ReplyThank you!
Hey, I just wanted to say thanks for putting together a nice set of icons! thanks again!
Replywww.tjg-designs.com
thanks for your post i was looking for something like this. Ill be subscribing to your RSS feed.
ReplyThanks 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?
ReplyThanks Again.......
You cannot see these buttons in preview mode.
ReplyBecause, 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.
Hi,
ReplyI'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 :(
This is exactly what I have been looking for!
ReplyMy question is, how can i hide the bookmarks from showing up on STATIC pages only?
Please keep up the great work!
Hi there,
Replyyes that's possible ...read Case #6 of this tutorial.
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
ReplyThank you!
Xxx. Zaffi.
Hey Zaffi,
ReplyI 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...
Divya,
ReplyThank 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...
Welcome Zaffi,
ReplyJust delete these two lines from the code:
<b:if cond='data:blog.pageType == "item"'>
...
...
...
</b:if>
and save the template.
Sai, thanks a lot!!! :))
ReplyYou said...
ReplyJust 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.
well, the issue must be situational because it worked on another blog of mine but not on another.
Replyone 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/
Hi Lesa,
ReplyImmediately after this line:
<!--SOCIAL-BOOKMARKING-ICONS-STARTS-->
add this code:
<br />
Thanks for the outstanding suggestion for blogging……all should follow your instructions.
ReplyNice stuff! Awesome.
ReplyThank you so much for sharing this! It worked like a charm. :D
ReplyThankyou for your code information. It helped me to customize my blog and keep some social bookmarking buttons in my site.
ReplyLoved this!
ReplyPlease could you provide the code for an RSS feed too? (that would be VERY welcomed :)
Frogster.
Hey Frogster, here you go:
ReplyAdd this code, before the </b:if> code
<!--FEED-->
<a href="YOUR_FEED_LINK" target='_blank'><img alt='Subscribe to this blog' src=' ' /></a>
Thanks so much! everything has worked a treat :)
ReplyHello,
ReplyYou 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
Thanks Marsy,
ReplyYeah 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...
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.
Replya big thanks!
Marsy
okay, sorry i gave you incomplete code b-(
Replyhere's the complete code:
<style type="text/css">
#nobg {
border: 0px !important;
}
</style>
BTW your cartoons are really really good :)
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!
ReplyA 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
Thanks Marsy :)
ReplyHave a great week ahead...
Hi Sai,
ReplyThanks 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
Hey Frogster, use this code:
Reply<a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'> <img alt="mail to share this post" src=""/> </a>
Regards...
Hello Sai,
ReplyHow'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
Hey Marsy,
ReplyYou 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
Hi Sai,
ReplyThank 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
thank you for the post...
ReplyI 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!
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!
ReplyHi Amma,
ReplyIn 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
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.
ReplyXML error message: Element type "img" must be followed by either attribute specifications, ">" or "/>"."
thanks for sharing. it works for me.
ReplyWhat is the Significance of "width='122'/>" at the end of Twitter Section. I removed that part and it Still works fine for me.
ReplyAlso 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.
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.
ReplyTo have a truncater-code in the tweet this button, use this one:
http://bloggerstop.net/2009/04/tweet-it-and-retweet-buttons-for.html
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.
ReplyHey there,
ReplyRead comment #127 and do exactly what I have advised in that comment.
Still not working.... =((
ReplyHi thanks so much for this, but when I add the code all the icons except the twitter icon appear huge.
ReplyIs there a way to fix it?
Hey, never mind I just added the width=70 to all the images. they look great!
ReplyThank 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
very good informatic site for bloging gadgets and thanks u very much to very good way and add this gadget
ReplyI DIDN'T GOT IDEA WHERE TO GET THE URL CODE FOR THE BUTTONS
ReplyHi 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.
Reply-sara angel
thanks for this wonderful social buttons you shared!
ReplySocial media is a very crucial part of business these days.
ReplyIt 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.
LOVE this... I so want to get this on my blog, but keep getting an error. Here's the message I get:
ReplyYour 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
T.T
ReplyIt 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.
Hi,
Replythank you for all. For me everything work perfect.
Thanks!
BR, Tim
not working for me :((
Replygood icons found... thank you..
ReplyOkay, 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.
ReplyNow, to get the links [direct links] of the images, you can either upload them at
pages.google.com
or here:
hotlinkfiles.com
Very nice icon, but not working for me :(
ReplyOne more do follow social bookmarking site :: http://www.Socialbm.info
ReplyTRY IT HERE http://helpblog4u.blogspot.com/2011/10/facebook-like-button-below-every-post.html
Replyhello,
ReplyAs 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.
hello divya,
Replyhow 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..
I like the resource :) Thanks very much.Well i found another very good social networking site www.goodwizz.com. Worth a check :)
ReplyHey I have a weebly website, can you tell me if this is compatible? And can I use my own image codes? Thanks.
ReplyI've managed to add the images, but I'm not sure how to link to the relevant sites can anyone help?
Reply..u R AWEsome!!
Replybut 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?
really best yaar awesome working
Replyin my template is at three places.where should i paste this code
ReplyComments are moderated on this blog
Allowed HTML tags: <b>, <i> and <a>
Comment Like This! and Optimize your blog EmoticonEmoticon