Adding floating social media sharing buttons

As promised to some of my readers, here’s a tutorial on how to add a floating social media bar to a blog. I made it into a widget, so you don’t have to go into your template HTML to install (or remove) them. Just drop the whole code into a HTML/Javascript gadget.

I have included Facebook Share Like, Retweet, StumbleUpon, Google Buzz, Digg This and Google+1 buttons in the bar and each of them comes with a live counter. You can add more social bookmarking or sharing buttons later if you wish.

floating social bookmarking buttons

 

I. Adding the buttons

  • Adding to Blogger
    1. Go to Layout (old interface: Design > Page Elements).
    2. Click Add A Gadget.
    3. In Add A Gadget window, select HTML/Javascript .
    4. Copy the code below and paste it inside the content box.
    5. Save the gadget.
    6. Drag the gadget and reposition it under Blog Posts gadget.
    7. Click Save button (top right hand corner).
  • Adding to WordPress
    1. Go to Dashboard > Appearance > Widgets > Available Widgets.
    2. Drag Text widget into a sidebar.
    3. Paste in the code.
    4. Save.
<!-- floating share bar Start bloggersentral.com-->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;}
</style>
<div id='pageshare' title="Get this from BloggerSentral.com">
<div class='sbutton' id='like' style='margin-left:8px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.bloggersentral.com/">widget</a></div><!-- Do not remove this link -->
</div>
<!-- floating share bar End -->

Updates
July 2012: Remove Facebook Share button and related CSS, and replace it with Like button. You can refer to the old code below.
Oct 2011: Add instructions for WordPress.
July 2011: Remove Google Buzz button. Who needs Buzz when you have Google +1?
July 2010: Add Digg This button. June 2011: Add Google +1 button.


The old code (for reference only, do not copy). Comments 1 to 375 refer to this code:

<!-- floating share bar Start bloggersentral.com-->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Get this from BloggerSentral.com">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.bloggersentral.com/">widget</a></div><!-- Do not remove this link -->
</div>
<!-- floating share bar End -->

 

II. Customizing

  1. Vertical alignment
    Change the value of bottom in code line 3. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.
  2. Horizontal alignment
    Change the value of margin-left in code line 3. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right.
    To position the button relative to the left or right edge of browser window, replace the margin-left with left (as in left:10px;) or right (as in right:10px;) respectively.
  3. Replacing and removing buttons
    You can replace existing buttons with your own. Each button is represented by this code:
    <div class='sbutton'>
    BUTTON CODE
    </div>
    To replace the button, simply replace the button code with the new code.
    To remove the button, delete the whole div.

Update (for Blogger): If somehow your Google +1 button doesn’t appear despite other buttons appear successfully, try this workaround:

  1. Go to Template > Edit HTML (old interface: Design > Edit HTML) and find this line:
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
    or
    <body>
  2. Copy the share bar code and paste it right below the line.
  3. Replace the margin-left:-71px; in code line 3 with left:10px;.
  4. Preview before saving.

Enjoy!

410 comments to "Adding floating social media sharing buttons"

«Oldest ‹Older 1 – 200 of 410 Newer› Newest»
spk July 16, 2010 at 11:04 PM    

its beautiful, superb!

spk July 16, 2010 at 11:08 PM    

i want this widget to place little low...
how to make it, when ever i opened the page this widget is just falling on the static page tabs, so i want to put this widget little lower

spk July 17, 2010 at 12:07 AM    

i am having issues with this widget, please help me clearly:

1. i want to have this widget to just float till the posts end

2.this widget is not showing the shared numbers (tweet,buzz-number of persons shared) uniquely for different posts.
(i.e its showing same numbers for all posts, not unique for different posts)

3.i want them to open them in a new tab, not as a pop-up

please tell me how to do

Greenlava July 17, 2010 at 2:32 AM    

@spk
1. I'm afraid that's not possible with fix positioned element.
2. It does show unique counts. Look at your Chicken post and Coffee post.
3. Sorry, can't help you on that.

Robin July 17, 2010 at 9:51 AM    

Thank you very much

spk July 17, 2010 at 11:45 AM    

1.if not possible how can i make a widget just like yours, the floating widget only visible when somebody after clicks the "read more"

2. how to place non floating widgets, on the posts in home page.
* finally it should be like yours non floating widget in the home page posts, floating widget in full post view.

Dave Preston July 18, 2010 at 3:16 AM    

Out-bloody-standing. Very cool, very simple, easy to move around. Thanks.

Anup@Hack Tutors July 18, 2010 at 10:42 AM    

Nice work Greenlava! But, it doesn't fit on m blog :(

Greenlava July 18, 2010 at 11:31 AM    

@Robin
@Dave Preston
The buttons are looking good guys.

Bibin July 19, 2010 at 11:47 AM    

Thank you . nice gadget

Greenlava July 19, 2010 at 11:22 PM    

@Dave Preston
@Bibin
My pleasure and thanks for visiting. Do come back :)

@spk
1. Follow Display widget on specific pages in Blogger to display the buttons only on post pages.
2. Read Add retweet button (with counter) to every post and Add Facebook share button with counter.

Anshul July 21, 2010 at 12:16 PM    

I want to add digg button to this. As you suggested, I added the script for digg just before the second last div tag.

But after adding this code when I see my blog post page, all the widgets present in the sidebar have moved towards the bottom of the page, i.e., in the footer.

For the time being I have removed digg code from my blog. Please tell me how to add this so that sidebar remains intact.

Also is there a way to add email this button ?

Greenlava July 21, 2010 at 8:08 PM    

@Anshul
Use this code:
[div class='sbutton']
[script src='http://widgets.digg.com/buttons.js' type='text/javascript'][/script][a class="DiggThisButton DiggMedium"][/a][/div]

For email button, use this:
[a href="mailto:YOUR_ADDRESS_HERE"][img src="YOUR_BUTTON_URL"/][/a]

Anshul July 21, 2010 at 8:44 PM    

Thanks that worked :). The widget however became very broad and started covering some part of my text. So I shifted it to further left. Since I have a white background, so no one can notice that the widget is actually so broad.

Tera@® July 22, 2010 at 8:16 PM    

Hi, thanks for this superb gadget, i would like to now how can i keep it from the right side of my blog post. if you can check my blog http://stharanga.blogspot.com/

Thanks

R-Patz July 23, 2010 at 10:24 PM    

thanks. your blog is great

Greenlava July 23, 2010 at 11:35 PM    

@Anshul
@R-Patz
Thanks for stopping by :)

@Tera@®
In code line 3, replace bottom:15%; to bottom:60px; and margin-left:-71px; with right:40px;
It will position the buttons on top of your Back to Top button.

Thanx for this awesome widget!
I added it to one of my blogs and will probably use it again.

Pam July 27, 2010 at 11:52 PM    

Thanks so much for the widget. It works great and looks awesome. Now... just need to figure out how to get a Delicious button to work for me.

ed July 29, 2010 at 1:22 AM    

Very handy. Is there anyway to make it smaller? Thanks.

ed

Greenlava July 29, 2010 at 2:03 PM    

@ed
I'm afraid the answer in no :(

TechDart July 30, 2010 at 2:55 AM    

Thanks for the code...
Its working.

Mysticle August 7, 2010 at 4:40 AM    

Great widget! Much easier to install as a gadget rather than editing within the template.

I'm having trouble with my retweet button - won't seem to pull my twitter username. The retweet button I have built into the blog posts works fine, but I would rather have this floating in the sidebar.

Also, I tried to change the FB Share to the Like button - but don't think I did this correctly, because the count isn't showing.

Can you help? http://mysticle.blogspot.com/

Thanks!

Greenlava August 8, 2010 at 1:50 AM    

@Mysticle
1. To add your username, insert this code right before code line 16:
[script type='text/javascript']
tweetmeme_source = 'TWITTER_USERNAME';
[/script]

2. I don't think Like button (plus counter) would fit into the floating column.

Mysticle August 10, 2010 at 5:17 AM    

Thanks, that worked great for the Retweet button.

I'm still playing with the Facebook Like (instead of Share) - the smaller 'button-count' style without faces.

Michael August 14, 2010 at 12:11 PM    

this is awesome... i've added this to my blog and it's great... i have a question though, is there any way for the 'stumble upon' link to open in a new tab or at least a pop up. i don't want guests leaving the blog abruptly... thanks!

Greenlava August 16, 2010 at 1:22 AM    

@Michael
I'm afraid that's not possible with StumbleUpon hosted bsdges.

Jinna Boo August 17, 2010 at 10:20 PM    

when i view my blog in a PC it turns out fine, but when it is viewed on a mac (safari) the box is stuck on the middle of the screen. could you help?

http://greaseandglamour.blogspot.com

Greenlava August 17, 2010 at 11:26 PM    

@Jinna Boo
In your code, try replacing
margin-left:-90px;
with
left:30px;

a good catch August 18, 2010 at 10:06 PM    

I made it again! Thank you very much bloggersentral
It looks good in my site http://agoodcatch.co.cc/
again, my sincere thanks!!

Greenlava August 19, 2010 at 1:08 AM    

@a good catch
Looks good...congratulations!

Berbatov,  August 26, 2010 at 4:13 AM    

Is there any way to get rid of that liddle white triangle at the facebook icon? My background is not white so it looks a little bit stupid. The corners have transparent corners, but the triangle at the bottom hasn't...

Greenlava August 26, 2010 at 10:19 AM    

@Berbatov
Add this:

.fb_share_count_nub_top {display:none !important;}

right before code line 9.

pigpigscorner August 27, 2010 at 9:36 PM    

I think i found out what's wrong, I changed the code to this:[script type="text/javascript"]
tweetmeme_url = 'http://yoururl.com';
[/script]
[script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"][/script]

pigpigscorner August 27, 2010 at 9:55 PM    

Just figured the change of code only retweets the homepage =( it still doesnt work.

Greenlava August 28, 2010 at 2:28 AM    

@pigpigscorner
Just use the original code posted here in this tutorial and you'll do fine.

Yhane September 15, 2010 at 9:37 AM    

bro can you tell me how to make the widget float horizontaly?

Greenlava September 15, 2010 at 6:29 PM    

@Yhane
Try replacing clear:both; with display:inline; in code line 4.

John September 15, 2010 at 7:01 PM    

Hi! I want to add a twitter follow button to the end but no combination I've tried works. Could you help me with a code please.

Greenlava September 16, 2010 at 2:12 AM    

@John
Insert this code right before code line 29.

[div class='sbutton']
[a href='http://twitter.com/USERNAME'][img alt='Follow me' src='YOUR TWITTER BUTTON URL' style='border: medium none;'/][/a]
[/div]

replace [ and ] with < and >. "YOUR TWITTER BUTTON URL" is the direct link to your twitter button/image. Size the button to 49px wide.

Anshul September 17, 2010 at 10:44 AM    

Can I add official twitter button instead of tweetmeme button ?

Greenlava September 17, 2010 at 5:51 PM    

@Anshul
Yes you can -by replacing code line 16 with Twitter's own
Twitter / Tweet Button code.

Sam,  September 27, 2010 at 8:34 PM    

Hi...any idea to remove this social bookmarking?

i found the code under page source.

but not in html template. OMG

please help..

Greenlava September 27, 2010 at 10:08 PM    

@Sam
You mean you installed this widget, and want to remove it?
Go to Design > Page Elements. Locate the HTML/Javascript gadget and click "Edit" link. Once in Configure HTML/JavaScript window, click "Remove" button.

AMalobago October 4, 2010 at 3:04 PM    

Please tell me how minimize the float button.

Ellie K October 4, 2010 at 4:16 PM    

Hello Greenlava! You have the most feature-rich Blogger blog I have ever seen! I think you just might be a CSS3 Master! I love the numbered comments, and that gorgeous typeface you use for them. I'm glancing around again, and I see features on your blog that I didn't think Blogger even supported!

You really help a lot of people, I found my way here through the Google Help forum.

Okay here's my question: I saw at the top of this article that you enabled 4 of those wonderful floating left-side social bookmarking tabs for this site, one of which was Google Buzz. However, there are only 3 now (FB, Twitter and stumbleupon). I don't see Google Buzz anywhere else on your sites. I don't trust FB, and I don't use stumbeupon, just Twitter, Buzz and blogger. I can post to Google Buzz from the Google toolbar of course, but I'm curious if there's a reason not to use Buzz from a social share button, or if I should use the toolbar only. Sorry for the lengthy comment. Thanks for all that you do!

Greenlava October 4, 2010 at 9:14 PM    

@AMalobago
Sorry but you can't minimize it.

@Ellie K
I'm blushing! Thank you :)
I have no particular reason for not using Buzz. I assume it's not as popular as the others (because it was relatively new).

Mary October 9, 2010 at 12:07 AM    

Urg! I just looked at http://blogger-hints-and-tips.blogspot.com/ using Chrome, and the floating bar that should be over on the left is bang-smack in the middle! It's ok on when I'm viewing articles on your site though. got any suggestions where I went wrong?

(Apart from not testing it on Chrome earlier, of course!)

Jim October 9, 2010 at 10:49 AM    

Hello, I added your code and it works great! Just one question: Is this ment only for single pages and not a blog where I continually add blog posts? If not, when someone wants to share a post, how does it know what post/entry to share? Thanks a lot!

Here is my blog if you need to look at anything to see if I added the code correctly and it looks correct on your computer:
http://arizonagardenproject.blogspot.com/

Greenlava October 9, 2010 at 1:08 PM    

@Jim
The buttons will share whichever page you're at when you do the clicking.
To share a particular post, you have to go to the post page and click the buttons while you're in there..

Greenlava October 9, 2010 at 1:20 PM    

@Jim
If you click them while on homepage, then homepage will be shared.

Greenlava October 9, 2010 at 2:04 PM    

@Mary
That's strange. I tested the code on Firefox, IE and Chrome.
Anyway you can try replacing margin-left:-115px; (in #pageshare) with left:110px; and see what happens.

Jim,  October 9, 2010 at 3:01 PM    

OK, thanks. So I guess it would be better for me if I just added each badge on the bottom of each post instead of using this side banner of badges, correct? I'll use your other posts on how to add them. If there is anything else I can do to make adding all these badges you have here into one bar across the bottom of each of my posts please let me know. Thanks again!

Valerie October 17, 2010 at 5:20 AM    

This is great, Thank you.
Is there a way I can have just the icons without the counts above them? I tried adding
.fb_share_count_nub_top {display:none !important;}

But it didn't do anything...unless I'm not sure where line 9 is?

Greenlava October 17, 2010 at 12:55 PM    

@Valerie
I've answered this question here: Add Facebook share button with counter.

Carol,  October 19, 2010 at 1:29 AM    

I like what Jim asked. Is there anything you've built that would allow me to have this side bar be made into a horizontal banner in a widget?

Greenlava October 19, 2010 at 10:27 PM    

@Carol
1. To place the bar under each post, go to Add Facebook share button with counter
Use the code from this tutorial instead of the code given in there.
2. To lose the floating effect, remove "position:fixed; bottom:15%; margin-left:-71px;" in code line 3.
3. To make it horizontal, remove "clear:both;" in line 4.

J October 23, 2010 at 4:53 AM    

Hi. I just want to thank you for the code. I tried it on my blog and it worked wonderfully. Thanks.

Greenlava October 23, 2010 at 1:29 PM    

@J
You're welcome. Thanks for the feedback :)

Sree October 27, 2010 at 1:26 AM    

thank you.... just the way i wanted :)

----------------------
http://mytraveljournal-sree.blogspot.com/

Admin November 1, 2010 at 2:55 PM    

Hey i dont want that buttom in home page in blogger...
what code i have to remove??? or add plz add....
reply

Greenlava November 1, 2010 at 4:36 PM    

@Admin
Read this tutorial: Targeting specific pages with conditional tag.
Choose to display post (item) page conditional tag.

Anonymous,  November 15, 2010 at 11:17 PM    

Looks like it doesn't work well in latest IE8. My site onixom.com
Any ideas how to fix it?

Greenlava November 16, 2010 at 1:40 AM    

@Anonymous
Looks good from here (with IE8). What's the problem?

JackHarvestMoon November 18, 2010 at 6:03 PM    

hi! can i get a transparent background of this widget?

Sorry for my English

Greenlava November 19, 2010 at 1:25 AM    

@JackHarvestMoon
Change background-color:#fff to background-color:none in code line 3.

elmyra November 19, 2010 at 11:05 PM    

hey,,thanks man for this awesome gadget! you've help me a lot in designing my blog! thank you so much n hope you can provide another awesome gadget later :)

Anonymous,  November 20, 2010 at 3:09 AM    

Thank you

Works great

gala November 26, 2010 at 8:30 PM    

Great! Explains so excellently that even a dummy like me has understood it. I've translated the most important things into German and made it available on my Blog. If not desired, please short feedback at ganzkurz Blog

Greenlava November 26, 2010 at 9:54 PM    

@gala
No problem, as long as you link back to this blog :)

Laurie Harrison November 29, 2010 at 4:52 AM    

Thank you very much. I like this!

Greenlava November 29, 2010 at 10:40 AM    

@Laurie Harrison
Welcome to this blog. Thanks for commenting :)

One problem: twitter and stumble icons are not visible, others are.

thnx for the widget :)

Greenlava December 2, 2010 at 9:45 PM    

@Naveed Murad
I see it from here.

Todd Michael Greene December 7, 2010 at 2:32 PM    

Found you article through an Internet search for ways to add social media share buttons to my new blog as Blogger's default provision's don't work with the template I use. Your idea wasn't exactly what I had in my but I've added it to my site for now and will see how well it's used before deciding whether or not to pursue to different option. Your article was the easiest and most helpful of the ones I've checked out tonight. Thanks for writing it.

Greenlava December 7, 2010 at 5:36 PM    

@Todd Michael Greene
Good to have you here. Thanks for taking the time to comment :)

Jeff Cohn December 10, 2010 at 9:35 AM    

Anyone know how to adapt the margins so when someone views your page on a tablet, ipad, iphone or mobile phone that it will appear in the page? Love the floating buttons for web browsing. Here is my blog http://deadzones.com

Greenlava December 11, 2010 at 4:41 AM    

@Jeff Cohn
Try replacing this code: margin-left:-71px; in line 3 with left: SOMEVALUEpx;
It will position the buttons to the right of the left edge of your screen (as opposed to the original code which places the buttons on the left of the post area).

DevAngel December 11, 2010 at 8:48 PM    

hey dear thanx a lot, and i hv also add on my blog.

Pink Diva December 14, 2010 at 9:50 AM    

Thanx for sharing..

The Informer December 18, 2010 at 2:29 AM    

HOW AN I MAKE MY HTML/JAVASCRIPT GADGET, CONTAINING MY PAYPAL "BUY NOW" BUTTON CODE FLOAT THE SAME WAY...VERTICALLY ALONG THE POST WHEN SCROLLING THE PAGE? PLEASE HELP. THIS IS WHAT THE CODE LOOKS LIKE (EXCEPT I REMOVED THE MIDDLE FOR SECURITY REASONS, IF YOU KNOW WHAT YOU ARE DOING THIS SHOULDN'T MATTER)
parenthesis substituted for arrows i.e. ()= <>

code begins like this:
(form action="https://www.paypal.com/cgi-bin/webscr" method="post">
(input type="hidden" name="cmd" value="_s-xclick" /)
(input type="hidden" name="hosted_button_id"
(middle of the code removed)
(/form) <<<this is the last line in the code

please help

Zaaynab Le'Von December 18, 2010 at 7:29 AM    

Greenlava - you are amazing! So I've installed this gadget buuuuuttt .... I'd like to know how do I enter text like you've done on yours? You entered "Pls share this page" - I want to enter something similare - please teach me.

Greenlava December 18, 2010 at 8:19 PM    

@The Informer
Replace the first line with this:
(form style="position:fixed;top:20px;left:10px;" action="https://www.paypal.com/cgi-bin/webscr" method="post">

Greenlava December 18, 2010 at 9:19 PM    

@Zaaynab Le'Von
Add this immediately after line 10:
[center][p style="font-family: tahoma,arial; font-size: 12px; width: 55px; margin: 0pt;">Pls share this page[/p][/center]

Make sure you replace [ with < and ] with > when adding the code.

Nancy December 18, 2010 at 9:32 PM    

How did you add "pls share" text to your button?

Greenlava December 18, 2010 at 10:32 PM    

@Nancy
See reply #84.

Katie December 23, 2010 at 5:35 AM    

Hi there! Fantastic! Having trouble with FB Share counter....it's to the right of the button insead of on top, so it runs into my posting. Any help?

http://simplyanniekate.blogspot.com

Katie December 23, 2010 at 5:48 AM    

Hi there! My FB counter button is hanging over on the side and not on top. Any suggestions?

Thank you!

Greenlava December 24, 2010 at 3:45 PM    

@Katie
Replace bottom:15%; with top:0; (in line 3).

TAP December 28, 2010 at 5:09 AM    

@Greenlava
stunning work here, this is an awesome widget which i use already, love to read your blog, keep up this good work

http://theasianpunter.blogspot.com

Greenlava December 28, 2010 at 10:18 PM    

@TAP
Thanks. I'm glad like you like it.

Carmen January 4, 2011 at 3:08 AM    

I appreciate that you are so willing to share your knowledge. :) Could I ask you to share a little more? How do I get the Facebook share button to share the url and title and picture of the current blog post, rather than using the meta tags for the whole blog?

Greenlava January 4, 2011 at 1:58 PM    

@Carmen
I'm happy to do so :)
Find the solution here: Facebook share showing wrong description –solved!

Carmen January 5, 2011 at 12:10 AM    

Thanks @Greenlava - I found that on your site yesterday after searching around a bit, but alas! I still can't seem to get it to work. I paired that post with the metatags post (and I think I messed up, because your meta tag searcher can't find ANY) - could I talk you into looking at my blog? I haven't yet launched the floating widget, because I can't even get the static ones to post on Facebook properly. :(


http://thesocialmediabutterfly.blogspot.com/

Greenlava January 6, 2011 at 12:40 AM    

@Carmen
1. You need to omit the " http://" prefix when entering the URL.
2. It looks like you use [blog.title: blog.pageName] in the description meta tag on post pages. There nothing wrong with this, if that is your intention. This meta tag will display only blog title: post title as the Facebook share description, same as the share title!
But if you want the "normal" description, you have to remove the description meta tag from post pages (as explained in my meta tags tutorial) and add p tag inside your template (as explained in Facebook share showing wrong description –solved! post).

Jeff Cohn January 12, 2011 at 12:36 AM    

What happened to the Digg button? The image is not showing up on my blog? http://deadzones.com Thanks in advance for your help.

Greenlava January 12, 2011 at 9:39 AM    

@Jeff Cohn
It looks okay now. Maybe there was a glitch.

Anonymous,  January 30, 2011 at 9:07 PM    

thank you for this tip i am having a hard time integrating other solution to my blog http://onewiththemachine.blogspot.com

Anne Lyken-Garner February 3, 2011 at 10:11 PM    

I love it. It's perfect. Just what I was looking for. Thank you. xxx

Greenlava February 4, 2011 at 8:08 AM    

@Anne Lyken-Garner
You're welcome.

Ashley Trinity February 22, 2011 at 2:23 PM    

Help. I need this to float on the RIGHT. But I cant. Pray help!

Greenlava February 22, 2011 at 9:36 PM    

@Ashley Trinity
Try this: In code line 3, replace
margin-left:-71px;
with
right:10px;

Engineered to the MAX February 23, 2011 at 11:18 AM    

I like the widget. It's pretty cool. How would I change the colors though (background, font for "Pls share this page" and "Get this")? My blog background is dark, so my writting is white. The "Pls share this page" shows up as white text yet the "Get this" text shows up black.

Thanks and good job.

Greenlava February 23, 2011 at 8:42 PM    

@Engineered to the MAX
For the background, change #fff in background-color:#fff; in code line 3 with the color of your choice.
For the text colors, add this before line 9:
#pageshare, #pageshare a {color:COLORCODE;}

Logan Wallace February 24, 2011 at 11:43 AM    

I posted this to my blog http://www.wonderfulwhoopsie.com and it slowed down the load time of my site to a crawl so I had to remove it unfortunately. If this gadgets load time could be sped up I'll re-install it. Is there an easy solution? Please let me know! Thank you!

phillipbarroso.blogspot.com February 27, 2011 at 7:27 PM    

Hey, thank you so much for this wonderful widget. it really works. Thanks and More power!!!

Aadhil March 1, 2011 at 12:07 PM    

how can i make this float right?

Greenlava March 1, 2011 at 2:36 PM    

@Aadhil
Read reply #102.

Aadhil March 2, 2011 at 11:49 AM    

@Greenlava, thank you for that... i have another issue.. once i add this beautiful floating widget, my Facebook comment box get disappeared and if i remove this floating widget the comment box reappears :-( please find me a solution for this, i don't want to loose both!

Chick of All Trades March 3, 2011 at 12:46 AM    

Thank you thank you thank you! You are my HERO! I love your blog and the floater is just what I was looking for! Works great! God bless!

T.K. Goforth
http://www.chickyrama.blogspot.com

Greenlava March 3, 2011 at 4:06 PM    

@Aadhil
Which blog are you referring to?

Bright Career Coaching March 15, 2011 at 3:30 AM    

Hi guys

can this also work in sites other than Blogger ?

Anonymous,  March 15, 2011 at 4:16 PM    

the twitter button isn't working. It has a ? mark and when I click it it goes to a tweet me error page - (TweetMeme Button Error - Redirect)

Cracksevens March 16, 2011 at 12:48 AM    

bang..twitter nye button xde la..

Greenlava March 16, 2011 at 12:28 PM    

@Bright Career Coaching
This widget does not use Blogger-specific codes, so it should work on other platforms.

@Cracksevens
For Twitter tweet button refer to reply #42. Please be noted that Twitter button is slightly wider than the rest of the buttons.

robi March 16, 2011 at 12:29 PM    

hello can you tell me how to create like to copy code, icon <> on the right, like bloggersentral in you blog

thanks before

Greenlava March 16, 2011 at 5:37 PM    

@robi
There is a tutorial for that:
How to show code in blog post

testblog March 17, 2011 at 8:55 AM    

how would i add a delicious button to this?

Healthy Home Market March 18, 2011 at 1:14 AM    

I know this an old thread, but I came across your site yesterday and I have installed this widget. It's great, thanks! The only trouble I am having is that when you click on the individual posts, the Facebook count box does not show, any ideas?

http://healthyhomemarket.blogspot.com/

Greenlava March 19, 2011 at 11:57 AM    

@testblog
Delicious button is a bit difficult. Try Quite Delicious Button - A jQuery Plugin

@Healthy Home Market
It will appear when the count reaches 3.

Awesome Shares March 23, 2011 at 12:26 PM    

Looks amazing and awesome in my blog!

Thanks so much!

Εύη March 26, 2011 at 5:53 AM    

thank u so much for the gadget it works perfectly but i have only one question for you... can I put an email this button also ? and how ?
thanks in advance !!!

Greenlava March 26, 2011 at 2:30 PM    

@Εύη
Yes you definitely can. Use this code to replace"PUT BUTTON CODE HERE" in step II.3:
[a href="mailto:PUT EMAIL ADDRESS HERE">Email</a]

alphajatin March 29, 2011 at 12:39 AM    

Thank You !!

Catalina March 30, 2011 at 7:29 PM    

Thanks a lot for your contribution! I love this and it looks awesome in my blog www.goecofriendly.org

Greenlava March 30, 2011 at 7:51 PM    

@Catalina
You're welcome.

alphajatin April 2, 2011 at 1:47 AM    

How can i replace share button with my profile on social networking site button ?
like in place of sharing button for facebook i would like that button linked to my facebook profile page, I have been trying it for so long but getting no success !!
I have :-
1. Uploaded a batch for facebook on imageshack (http://img233.imageshack.us/i/facebook32x32b.png/)
2. Got a code from (http://www.allblogtools.com/static-image-code-generator/)
3. Created
(div class='sbutton'>
(pasted the script here !!)
4.Nothing is happening.

Please help me !!
Thanks in advance :) :)

GreenLava April 2, 2011 at 5:55 PM    

@alphajatin
Replace line 12 with this:
[a href="PUT THE URL TO FACEBOOK PROFILE HERE"][img src="http://img233.imageshack.us/i/facebook32x32b.png"][/a]

alphajatin April 3, 2011 at 6:26 PM    

Thanks Ive done that
www.jaguargeek.blogspot.com
and yeah
it requires [img] tag to be closed
thanks a lot for the whole thing !!

OgbongeBlog April 4, 2011 at 3:52 AM    

Nice trick..Thanks so much for sharing. I have modified your code. Included the Facebook Like button and replaced the TweetMeme button with the standard Tweet button. Check it out here: Add Digg, Facebook Share, Like buttons to the side of blogspot blog Let me know what you think about it. I have really introduced some Nigerian fans to you, you will notice that in your Facebook fans. Cheers!

Tillen April 4, 2011 at 1:01 PM    

This is so cool. Thank you for this...

Inga´s Haven April 8, 2011 at 5:41 AM    

hi and thank you for this - it looks good
one Q. is there any way you can see whoo shares your page?

Greenlava April 8, 2011 at 12:14 PM    

@Inga´s Haven
I'm afraid you can't.

hackersz April 10, 2011 at 4:08 PM    

how to make the icon small ???help pleas?

Greenlava April 11, 2011 at 9:40 AM    

@hackersz
I'm afraid you can't (for most of the buttons) because each of them lies inside an iframe.

Sheena,  April 12, 2011 at 4:16 PM    

Your tutorial is totally AWESOME!

Sheena,  April 13, 2011 at 11:18 AM    

How do i add email the article button on the widget? and how to change the Twitter link to twitter.com (currently set to twitmeme.com something like that..) Thanks bro!

Mark Andrew April 13, 2011 at 2:39 PM    

Hello, thanks for the excellent work you are doing!
Two questions: 1) How can I get my Twitter Username to show when people press the Retweet button (I tried the code you gave to someone else but it didn't work) and 2, if I want a Blue Tweet Button instead of the Green ReTweet Button (like you have on this page) how do i get that instead, and if I do will it tweet the specific blog entry (preferred) or just the blogsite in general?

Thanks again!

JelBee April 14, 2011 at 11:40 AM    

Very Cool. i have nothing to say. I like this stuff.

Greenlava April 15, 2011 at 9:02 PM    

@Sheena
Replace code line 15 with this one:
[a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="PUT YOUR TWITTER USERNAME HERE"]Tweet[/a][script type="text/javascript" src="http://platform.twitter.com/widgets.js"][/script]

@Mark Andrew
1) Add this script before line 15:
[script type='text/javascript']
tweetmeme_source = 'PUT YOUR TWITTER USERNAME HERE';
[/script]
2) See the answer above (@Sheena).
The button will tweet whatever page it is on. If you click while on homepage, it will tweet the blog in general. If you click while on post page, it will tweet the post.

soutien4all April 17, 2011 at 6:46 PM    

Very interesting tutorial.
thank's for your efforts.
visit us :http//www.soutien4all.blogspot.com

vikash shankar April 18, 2011 at 3:45 AM    

hi i use your gadget but i have a problem when any one share on facebook then it lokes like this on facebook....

Free Favor Points for Castle Age | BlodicTion
blodiction.blogspot.com
‎'); if (r '); } //]]> summary_noimg = 450; summary_img =350; img_thumb_height = 100; img_thumb_width = 100; if (window.jstiming) window.jstiming.load.tick('headEnd');

Greenlava April 18, 2011 at 8:13 AM    

@vikash shankar
I hope this post helps: Facebook share showing wrong description –solved!

sheena April 19, 2011 at 6:01 PM    

Hi there, Thanks for the reply. It solved the issue. I have another problem. I had a different name for my blog when I first published my blog(knight), then I changed it as my URL(8thcanvas). Now when I share any article on FB, the blog name shows the old name(knight) and not 8thCanvas. Do you know how to fix this?
Again, thanks a million.

Greenlava April 20, 2011 at 12:07 AM    

@sheena
It should change after 24 hours.
Or if you want to get instant result, run the URL through the Facebook URL Linter.

FAVORAZZI April 20, 2011 at 4:09 AM    

i loooooooooooooooooooove this, i used the widget on my blog and it works like a dream, luv ya,luvya,luv ya.
you can also see how it looks on my blog www.favorazzi.com

cheers

Greenlava April 20, 2011 at 6:01 PM    

@FAVORAZZI
I'm happy for you too :)

Anonymous,  April 22, 2011 at 3:50 PM    

Hi,
How to add Official Twitter button and not the tweetmeme button. and how can i add text " pls share this page "
pls help.
Thank you.

Greenlava April 22, 2011 at 6:03 PM    

@Anonymous
I answered this in reply #42 and #84.

Taimur April 23, 2011 at 8:22 PM    

Thanks man for sharing such a great tutorial. I just added this on my blog and I deleted the digg button because it was occupying more space.

I loved your article again as it has no competent. Further I'm waiting more articles like this.

Arcmond April 30, 2011 at 3:11 AM    

I have a proablem with the widget the faceebook share image look very weird, please take a look at this.
www.arcmond.com
how can i solve this proablem?

Arcmond May 1, 2011 at 3:31 AM    

I solve the proablem, i put the codes in HTML codes in footer and i positioned as i want :), and now it-s work perfectly :D.
Many thanks.
Arcmond

Greenlava May 2, 2011 at 8:11 AM    

@Arcmond
Refer to reply #143.

favour May 19, 2011 at 3:44 AM    

Hi, thanks for this superb gadget, i would like to know how i can keep it from covering the content of my blog post and keep it more to the border of the blog post. if you can check http://www.payepalalternatives2earncash.com/ and tell me what to do pls

Thanks

Beatdown May 20, 2011 at 11:48 PM    

Hi Greenlava

Thank you for this wonderful tip! this is great and it looks perfect for my website www.theoppositelifestyle.com

more power to you!

Greenlava May 24, 2011 at 8:20 AM    

@favour
You can move the bar horizontally by changing the value of margin-left.

Vinesh Balan May 24, 2011 at 12:12 PM    

Hey Greenlave, Awesome app! Im already using it, and is of great help. However I was wondering how to tweak it to make it better. Do you know how to limit the Scroll of the Widget? Like Mashable does to scroll only when the Post Begins and stop scrolling when it reaches the Bottom? Thanks in Advance!

Greenlava May 26, 2011 at 9:54 AM    

@Vinesh Balan
You won't be able to achieve that using CSS alone. It requires Javascript or jQuery. Try google "mashable floating buttons javascript".

DeadZones.com June 2, 2011 at 5:43 AM    

Any chance you could add Google Plus One?

http://www.google.com/webmasters/+1/button/index.html

Matt June 2, 2011 at 6:20 AM    

Any plans to add Google's new "plus one" system?

Greenlava June 2, 2011 at 6:30 PM    

@DeadZones.com
@Matt
I've added Google Plus One button. Check it out!

djseanstyles June 3, 2011 at 11:36 AM    

The Google Plus 1 button is only appearing on some pages of my blog for me. In particular, it seems to disappear on the actual, individual post pages.

Maya June 3, 2011 at 4:31 PM    

man the plusone button doesnt seem to be loading in my blog at http://liveblogs.in

Sir Gregamus Dalbus June 4, 2011 at 1:54 AM    

I'm having trouble getting the +1 button to show, is there a limit to how many buttons this bar can include?

ulyssestone June 4, 2011 at 7:47 PM    

Thanks for the tutorial. I replaced the tweetMeMe button with the twitter's official one, but it looks bigger than the other buttons. Would you please tell me how can I resize it?

JelBee June 4, 2011 at 9:36 PM    

I added this floating bookmark to my site. Thanks for sharing. Is it possible to add a delicious count button?

Greenlava June 5, 2011 at 6:44 PM    

@ulyssestone
You can't resize Twitter button :(

@JelBee
Read reply #120

Erika June 15, 2011 at 8:58 AM    

A big thank you - I LOVE this floating widget! I put it on my site http://www.inerikaskitchen.com/ . The only question I have is how to move it down the page a tiny bit, because right now it lays over the navigation buttons in my header. Thank you in advance for your help!

Greenlava June 15, 2011 at 10:46 AM    

@Erika
Move it down by reducing the value in "bottom:15%" in line 3.

incomediva June 15, 2011 at 5:08 PM    

i just placed your code on my blog incomediva.com, and i must say this... it looks absolutely fantastic also i edited the -71 to -60
thank U thank U thank you!

Jamie June 16, 2011 at 1:14 PM    

my button is floating in the middle of my blog! help!

Greenlava June 16, 2011 at 4:04 PM    

@Jamie
You can move the button horizontally by changing the value of margin-left:-71px;.

Nickie June 16, 2011 at 10:57 PM    

Hi I left a comment a couple of weeks ago with a question but you don't seem to have displayed it.

Can you have the buttons floating across the bottom of the screen rather than on the left hand side (ie horizontally rather than vertically)?

Greenlava June 17, 2011 at 1:24 AM    

@Nickie
Sorry about that. Maybe it landed into the spam box.
Remove "clear:both;" in code line 4. That should do the trick.

Angelo June 18, 2011 at 7:07 PM    

this widget is sooo cooool! i had it on my blog and i am so happy that i found it!

try to see how it blended well with my blog http://w7xtreme.blogspot.com

THEMGPRODUCTIONS June 18, 2011 at 7:29 PM    

Can you help me ?
http://photoshopph.blogspot.com/

its not strecthed according to original size. i tried to configue the html, but there is no height tag stated.

Greenlava June 18, 2011 at 11:06 PM    

@THEMGPRODUCTIONS
The "sbutton" classname is being used somewhere else in your template thereby causing a style conflict. You need to rename "sbutton" in this widget with another name.

moonimage June 19, 2011 at 9:09 AM    

How about Tumbrl button?

moonimage June 19, 2011 at 9:56 AM    

regarding Tumblr button

already found )

http://www.tumblr.com/docs/en/share_button

Anonymous,  June 28, 2011 at 2:58 AM    

Thanks this helped me a lot Greenlava! Visit and check out my floating buttons @ www.mustrepeat.blogspot.com

Tech news page June 28, 2011 at 2:54 PM    

Thank you its working on my blog thank for the help once again

ulyssestone July 2, 2011 at 11:00 AM    

Hi, the widget works great, but on my site, the buttons seems a bit stretched in Chrome, FB Share is shown in two lines, how can I fix it?

http://www.spotifyclassical.com/

It looks perfectly all right in Firefox and Safafi.

ulyssestone July 2, 2011 at 11:43 AM    

I tested your site on my Chrome and Firefox, it seem the same: the bottons all look bigger in Chrome. Why?... But the FB "Share" on your site is still shown in one line, not like mine "Sha
re"...

Greenlava July 3, 2011 at 8:02 AM    

@ulyssestone
That's weird, it looks okay from here.

Online Dating Chat July 3, 2011 at 10:13 PM    

Thanks man for sharing such a great tutorial. I just added this on my blog and I deleted the digg button because it was occupying more space. superb articles.

Nisheeth July 4, 2011 at 2:20 PM    

Hiii.Thanks for such a great article..I have implemented it in my blog http://allboutwebsites.blogspot.com/ as well, but the problem is its alignment in google chome browser. Its appearing in the middle of the page when i check it in google chrome..its in the right position in mozilla and iexplorer.. Please help..Thanks

Prayag Verma July 4, 2011 at 3:50 PM    

thanks a lot

Greenlava July 4, 2011 at 5:06 PM    

@Nisheeth
That's strange.
Let's try another way, replace:
margin-left:-91px; (this is your present setting)
with
left:75px;

Max Ginez III July 7, 2011 at 12:27 PM    

Thanks for sharing this tutorial.
It really works.
Here is my Blog for you to see how the button floated.
http://maxginez3.blogspot.com
Thanks for posting this comment.
Max

Zubair July 8, 2011 at 3:37 AM    

Thank you so much for sharing this info, I have now been able to successfully add a share bar to my blog.

All the best

Reyad010 July 8, 2011 at 9:13 PM    

great! Working fine in my blog. Can you make this start floating from a fixed position and end in another fixed position like wordpress plug in?great! Working fine in my blog. Can you make this start floating from a fixed position and end in another fixed position like wordpress plug in?

Greenlava July 8, 2011 at 10:57 PM    

@Reyad010
Please refer to reply #159.

Haz Issac July 13, 2011 at 12:49 PM    

hye greenlava.. just nak tanya sikit, sy ada letak loating social bookmarking ni, tapi button google buzz terkeluar la.. lari dari tempat asalnya.. so, sy remove google buzz tu.. macamana nak fix ek?

Greenlava July 13, 2011 at 9:28 PM    

@Haz Issac
Sorryla susah nak tau punca sebenar kalau tak tengok button tu in action.
Tapi saya ingat tak payah pasang Google Buzz tu, sbb Google plus one dah ada :)

Haz Issac July 14, 2011 at 2:49 AM    

owh, ok.. thanks ya greenlava :)

Lisa Ladrido July 15, 2011 at 4:05 AM    

For some reason the Google+ button isn't showing up on mine. All the rest are though. Thank you. Lisa

ulyssestone July 17, 2011 at 2:29 PM    

Would you please tell me how to replace FB Share with Like? I think the box count style fits in this widget, and Like is easier for the users to share. Thanks.

Shirshak Bajgain July 17, 2011 at 8:41 PM    
This comment has been removed by the author.
Schnäppchen July 18, 2011 at 6:51 AM    

Ah, this is exactly that what i was looking for. the sharethis plugin wasn't goog enough for me. thx

«Oldest ‹Older 1 – 200 of 410 Newer› Newest»
Click to go to top Click to comment