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 201 – 400 of 410 Newer› Newest»
Greenlava July 18, 2011 at 5:08 PM    

@Lisa Ladrido
@Shirshak Bajgain
I've added a workaround. Check it out.

Greenlava July 18, 2011 at 5:27 PM    

@ulyssestone
Get Facebook like button iframe code here. Then paste it to replace code line 12.

ulyssestone July 18, 2011 at 7:01 PM    

Thanks , it works great. At first I panicked because after I pasted the FB Like code in, the share box covered the whole page. Then I change the width from 450 to 48 and it's done.

Amazing July 20, 2011 at 1:24 AM    

Thankx for your post.

Lasting Rose July 24, 2011 at 6:58 PM    

Thank you for your script which works well in CHROME for
http://lastingrose.blogspot.com/
However in IE and MAXTHON,the buttons and position get garbled.

Could you please let me know what might be wrong?

Aazib July 25, 2011 at 10:43 AM    

Thank you so much it worked.

Cullens Team July 25, 2011 at 10:28 PM    

Hi, I think the sidebar is excellent. I am having problems with adding a google +1 to it. http://cullensclearances.blogspot.com

As you can see I have no google +1...can anyone help?

Greenlava July 27, 2011 at 12:45 AM    

@Cullens Team
Have you read the update at the bottom of the post?

Peter Juszczynski July 27, 2011 at 2:47 AM    

hi, very helpful. thank you!

I want to add the official twitter tweet button and not the tweetmeme, and have followed your posts 42 and 84. It works, but... the tweet button is slightly larger than the rest! How do I make it so my buttons look exacly like your widget currently showing to the left of this msg? I want to have only FB share, Twitter Tweet, and Google+ but all the same size ?

Thanks!!

Peter Juszczynski July 27, 2011 at 2:50 AM    

I also see in your reply 168 that you can't resize the twitter button... but can you resize the FB and Google+ buttons? Your buttons all seem to be the exact same size, how do I make mine look exactly like yours?

Peter Juszczynski July 27, 2011 at 3:13 AM    

okay I figured out how to change the FB share page size... but how do I now change the Google+ size to make it the same size as the Twitter Tweet button (not tweetmeme button)? Thanks!!

Shirshak Bajgain July 27, 2011 at 1:35 PM    

I found it green lava why google +1 buttom is not shown.It is because we should cannot install tow+1

Peter Juszczynski July 27, 2011 at 7:43 PM    

hi, sorry for all the msg's. I have figured out how to change the size of +1 and FB, but now i see a slight issue. the buttons are positioned perfectly on my mac, but when i open the website on a larger/smaller screen, the button's position changes. is there a way to 'lock' the buttons so it's at the same spot on the screen no matter what the size of the screen is? Thanks!!

Conor O'Brien July 28, 2011 at 9:44 AM    

The Facebook share count box has disappeared from mine for some reason? Help?

Liz July 28, 2011 at 1:01 PM    

Is it just me, or is the Facebook counter not working anymore?

Jelly Gamat July 29, 2011 at 4:00 PM    

if using that to wordpress how ..????

Picnic Resort July 29, 2011 at 6:04 PM    

how to insert this bar at the right side of widget area ? i have sliding menu at the left hand side of my blog, hence i wish to remove this social button bar to the right side.

www.omkarfarm.com

Anonymous,  July 30, 2011 at 8:47 AM    

Awesome little piece of code you've developed here.
If I wanted to add a Tumblr button - do you know the location of a script that I could use?

Greenlava July 31, 2011 at 5:35 PM    

@Jelly Gamat
Put the code in a text widget.

@Picnic Resort
Use a positive value for margin-left property in line 3.
Try 920px.

Greenlava July 31, 2011 at 8:37 PM    

@Conor O'Brien
@Liz
Mine disappeared too. I guess Facebook is pulling the plug on Share button. I'm going to wait for a couple more days, before replacing it with a Like button-counter.

admin August 1, 2011 at 8:33 AM    

i love it

Picnic Resort August 1, 2011 at 6:41 PM    

if i changed it to 920px.....it disappeares. ;-(

Shirshak Bajgain August 1, 2011 at 10:37 PM    

Hey Green Lava How do i to number share above share buttom of that widget

Greenlava August 3, 2011 at 1:00 AM    

@Picnic Resort
Experiment with different values til you get the right one.

@Shirshak Bajgain
Read reply #220.

admin August 5, 2011 at 12:01 PM    

for the first time..i love this blog. usefull to me. thank's bro.

pyejal August 6, 2011 at 12:26 PM    

thanks for this cool widget. but I didnt get on adding the 1+ button. is it because i already add the button on every entry?

p/s: I've reviewed your weblog here:pyejal.theStory

Greenlava August 7, 2011 at 9:04 PM    

@pyejal
Have you tried the workaround (in the update at the end of the post)?

TheKrow August 8, 2011 at 6:04 AM    

Hi dude, great blog, I really want to replace the Share button with a Like button (number box style) but I'm not having any luck...any suggestions?

tripzibit August 10, 2011 at 9:23 PM    

Thank you for this awesome buttons code :)

Greenlava August 11, 2011 at 12:06 PM    

@TheKrow
Please read reply #202.

Vika F. Insanittaqwa August 11, 2011 at 2:20 PM    

Awesome widget!! ><
Btw I was wondering if I want to place the css before the [/b:skin] in the template instead of putting it inside the widget section, is there a possible way to do that?
Because after I directly copy-paste the css code before the [/b:skin], the widget won't float. It stucks in the bottom of my page...
Thanks for your help, Greenlava!

Greenlava August 11, 2011 at 4:21 PM    

@Vika F. Insanittaqwa
Assalamualaikum,
You have to remove [style type="text/css"] and [/style] tags when placing the code in the style sheet (ie. before /b:skin).

Kate V. August 12, 2011 at 10:50 PM    

Thanks a lot!

Kate V. August 12, 2011 at 10:52 PM    

Hi Greenlava! I just wanna ask if is it possible for me to make the background of this widget "transparent" instead of white? Thanks! :)

ngurah's August 13, 2011 at 2:44 AM    

thank you very much............

Kate V. August 13, 2011 at 10:02 PM    

Awwww! Never mind. It okay now.. Thanks. :)

Mark Horoszowski August 20, 2011 at 3:57 AM    

This is GREAT! How do you get yours to stay connected to content area of the page as opposed to floating on the left side of the page?

Thanks so much!!!

Greenlava August 21, 2011 at 2:29 AM    

@Mark Horoszowski
First, I'm going to assume you've tried putting the code inside a widget. It it didn't work, that why you put it direct in HTML.
Okay, to make it stick to the content area you need to place the code inside the content area. Try placing it right after
[div class="content-outer">]
line and adjust margin-right to position it.

@BenRacicot August 22, 2011 at 10:59 PM    

This is epic, you should keep posting scripts that work this well! Can you show us how to add buttons like Delicious and Facebook Like?

Eric August 23, 2011 at 12:03 PM    

By far the easiest way I've found, thanks! The code is running on my blog as we speak. I would like to add a Tweet button to each post separately as well, any help with that? I mean the floater Tweet for my entire page and a Tweet in posts just for that particular post. Thanks if you can help.

Greenlava August 23, 2011 at 12:24 PM    

@BenRacicot
For Like button, read reply #202. Sorry can't help you on Delicious button.

@Eric
Go here: Add Twitter tweet button to Blogger posts

GIS Ed August 24, 2011 at 4:31 AM    

why are the buttons overlapping?

http://www.educationgis.com/2011/08/crime-mapping-app-on-your-iphone.html

admin August 24, 2011 at 2:07 PM    

how to add the twitter at upper right "get free update" column ???

FourJandals August 24, 2011 at 8:17 PM    

Great little piece of code. You legend.
However I cannot quite get a space between the facebook and tweet buttons as you can see on my blog. I have tried adding padding but probably not adding it in the right spot. Hmmm I tried to switch the two around but no luck so reverted it back. I know I cannot resize the tweet button but I cannot seem to resize the other buttons either, well not stumbleupon anyway.

http://fourjandals.blogspot.com/

Thanks

Jav August 25, 2011 at 2:41 AM    

Thank you for widget!
But I have some trouble. I can't do the same width for buttons. I use the same buttons like in your blog, but I've changed "share" to "like" button. I couldn't use even div align="center" tags But it will be better if you'll help with width. Can you help me?
Thank you!

Greenlava August 26, 2011 at 10:08 PM    

@GIS Ed
You have this code in your CSS:
.sbutton {
margin-right:10px;
float: right;
margin-top: 0px;
background: #167498;
border: none;
font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:24px;
line-height:24px;
}

that's interfering with the floating sharebar "sbutton".
What you can do is change floating sharebar's "sbutton" with a different class name e.g. "sharebutton". You want to change it in all 6 lines -line 4, 11, 14, 17, 20 and 24.

@FourJandals
You should've added the Tweet button into a separate sbutton div, as explained in II.3.
Of all the buttons, you can only resize the FB button.

Thanks dud ;D Just one problem with it, there on top of other gadgets, so how can I fix that? look http://internetygaming.blogspot.com/....I'm spanish so my english is horrible, hope u can help me

gagamell August 28, 2011 at 11:52 AM    

Facebook button likes odd...

http://bit.ly/qIGeiv

Admin August 28, 2011 at 4:30 PM    

which HTML/Javascript shall we select there in the box and where to paste it

Conor O'Brien August 29, 2011 at 7:15 AM    

@Greenlava

Is there any way to have the buttons stay in the same position on my blog, so that it does not follow me when I scroll. I want to put the buttons beside my header/logo.

Greenlava August 31, 2011 at 10:12 PM    

@Conor O'Brien
Remove position:fixed; in line 3.

Hardy_Hunt2 September 3, 2011 at 12:06 PM    

hai green lava.nak minta tolg sikit..saya mengalami masalah dengan FB share & like button.code ini muncul apabila menekan FB share button.. tag. --> if (window.jstiming) window.jstiming.load.tick('headEnd'); manakala code berikut pla muncul pada like button
tag. --> (function(){var a;var b=navigator.userAgent;a=b.indexOf("Mobile")!=-1&&b.indexOf("WebKit")!=-1&&b.indexOf("iPad")==-1?!0:b.indexOf("Opera Mini")!=-1?!0:!1;if(a){var c;a:{var d=window.location.href,e=d.split("?");switch(e.length){case 1:c=d+"?m=1";break a;case 2:c=e[1].search("(^|&)m=")>=0?… please help me to fix this..utk gambaran sebenar,please visit my blog @ http://tekok-beriuh.blogspot.com thanks in advanced bro

Memulai Bisnis Online di Rumah September 7, 2011 at 7:54 AM    

How do I add email sharing button that can use yahoo, gmail, or other email client?

Anto.

Kewell September 8, 2011 at 12:16 PM    

it benefit for me, thanks.

Greenlava September 11, 2011 at 9:03 AM    

@Hardy_Hunt2
Look for this line in your CSS:

#Step 3. Copy below code and paste it just before the [/head] tag. [/script]

It doesn't belong in there. You need to remove it.

Bangladeshi Models September 12, 2011 at 1:00 PM    

This share bar looks good! Thanks for share this share bar!

The Dead Cockroach September 19, 2011 at 2:00 AM    

Something easy to install. Thanks for sharing! :)

Sandipan September 22, 2011 at 3:57 PM    

Superb!! Works very well.

ford insider September 23, 2011 at 9:08 AM    

how to resize original twitter button to fit with other buttons in width ... visit fordinsider.com to See 4 your self ... its bulging :S

Greenlava September 23, 2011 at 11:42 PM    

@ford insider
I'm afraid you can't resize Twitter button.

M. S. Rosyidi September 30, 2011 at 11:21 PM    

Thanks and I like it and use it on my blogs

Allen Cerezo October 4, 2011 at 4:06 PM    

Finally, I just found what I've been looking for. I've been searching for this widget for a week. And I came here via Google. Thanks for this great tutorial. Keep rockin'!

Mehmood October 5, 2011 at 3:54 AM    

superb thanx :)

Mehrin October 7, 2011 at 9:06 AM    

Hi. Could you pls add an email button to this? Thx!

ypseph October 8, 2011 at 10:54 AM    

tnx man..it helps my blog..
http://sephglee.blogspot.com..

I will definitely bookmark your blog!!!

Damn Amazing Things October 9, 2011 at 8:18 PM    

thanks you so much for this widget ..! i have done ..!

Greenlava October 10, 2011 at 11:23 AM    

@Mehrin
Please read reply #123.

Gian,  October 11, 2011 at 7:18 AM    

Greenlava, you are the man, this is so sickly awesome! Thanks!

APAN October 12, 2011 at 6:50 PM    

admin...macam mana ye kalau nak bagi center dia punya location antara atas dan bawah tu...kalau refer dlm ni, 'Change the value of bottom' tu.saya dah buat.memang jadi tapi kalau buka kat komputer office, mende tu jadi macam ke bawah lak.macam button dalam ni, saya bukak kat laptop sendiri and laptop office, dia punya vertical positin still same....macam mana tu...boleh tolong tak...?

http://kongsakongsi.blogspot.com/

stephanie derry@social media October 14, 2011 at 12:41 PM    

hello,
As I have read the blog above, I was glad because the installment was great. Hope to see more likely this one.

Pinoy Video October 17, 2011 at 11:00 PM    

Nice post Bro.It helped me a lot.I have successfully implemented this in my website.Take a look at this
http://www.techgadz.com/

But i want one help from u bro.
For this floating widget,i want to add digg button in it.So please tell me how i can add Digg button to floating widget.

Bro and also i want ur comment about my blog.Thnx in advance

Greenlava October 18, 2011 at 9:05 AM    

@APAN
Pastikan guna nilai dalam %. Nak betul-betul center (untuk semua skrin) susah sikit sbb takde CSS yang boleh buat camtu. Cuba ubah nilai tu, dapatkan yang terbaik.

Greenlava October 18, 2011 at 9:18 AM    

@Pinoy Video
Digg button is there already.

APAN October 19, 2011 at 9:18 AM    

oh...mcm tu ke...tq admin... :)

Saurabh Jha October 25, 2011 at 12:26 AM    

Hey I am new to blog I just have added this to my blog but as I added this it made my facebook like box disappear My blog is here:
http://computer-world-of-knowledge.blogspot.com/

ulyssestone October 26, 2011 at 2:55 PM    

Google Plus One button worked for me before, then it suddenly disappeared. I've tried the method in your Update, but it doesn't work. I've found out that, if I add an AddThis widget (including Google Plus One button), then the button would reappear in your widget... do you know why? And how can I fix? I'd rather use your widget without AddThis, thanks.

Nonoy October 27, 2011 at 2:42 PM    

Thank you so much for this. Now my social media share buttons are floating on my blog. I only wonder why the code you gave is not the same as it appears here on your blog. I want the tweet button you have and not the retweet. perhaps I have to research for this.

Thanks a lot anyway! This post is such a great help. Cheers!:-)

Greenlava October 27, 2011 at 6:50 PM    

@Nonoy
I've answered that question before. The answer lies in the comments somewhere.

Elspeth Evans October 28, 2011 at 7:13 PM    

Thanks a lot for this - I love it. Would also love to have something like this on the mobile version of the Simple Blogger template that I'm using on elspethevans.blogspot.com. Any advice on how to do this?

ryan October 29, 2011 at 1:15 AM    

is it possible to add on my wordpress site? i hope you can make 1 for wp :(

http://www.cheatanarchy.com mine doesnt look good

Greenlava October 29, 2011 at 9:46 PM    

@ryan
You can use the same code for WordPress too.
1. Go to Dashboard > Appearance > Widgets > Available Widgets.
2. Drag Text widget into a sidebar.
3. Paste in the code.
4. Save

Anonymous,  October 31, 2011 at 1:00 AM    

If this is actually your code, Good Job! (Y)

Gamma,  November 2, 2011 at 2:27 AM    

can I have the same code as you do? It defines perfection!

Miloš Topi Miladinović November 2, 2011 at 2:40 AM    

Thank you!!!

Justice for Father Pops November 4, 2011 at 8:09 AM    

thanks!

rockhyvez November 7, 2011 at 10:23 PM    

thanks for this awesome gadget, but how can I close this?, Can you add a close button for this.

nine November 10, 2011 at 11:57 AM    

bro, merujuk pd komen post 84

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.

[ with < and ] ni apa? aku cr xda pon mcm ne nk replace
sorry ak noob cket sal html

shah Blogger November 11, 2011 at 12:31 PM    

Greenlava. Thanks for sharing. Im intresting with this. thanks thanks.

Greenlava November 11, 2011 at 5:17 PM    

@nine
Kod sebenar menggunakan simbol "<" dan ">" sebagai bracket. Tapi saya tak boleh letakkan bracket tersebut dalam ruang komen sebab ia akan di render oleh Blogger. Sebab tu saya terpaksa gunakan "[" dan "]" di dalam kotak komen.
Contoh:
Kalau saya nak letak kod untuk bold text, saya terpaksa tulis macam ni:
[i]Tulisan italic di sini[/i]
Kalau saya guna actual kod, ia akan jadi macam ni:
Tulisan italic di sini -tak nampak kod, cuma nampak hasilnya

Greenlava November 11, 2011 at 5:18 PM    

@shah Blogger
You're welcome :)

Arham Vhy November 11, 2011 at 5:49 PM    

Thanks for sharing..

Lio November 14, 2011 at 4:18 AM    

Hi there :)
I came here looking for exactly one floating shares. You say that this can be used even in normal web pages: how should I do to have it in my pages and especially as I have it on the left instead of right.
Thank you very much
Lio

Passionate Writers November 14, 2011 at 3:22 PM    

Brother I want exactly the same as you have in ur blog 1.e: G+, FB like, FB share, and Tweeter

Please help me to get eh code. The above mention code display something else

Regards
Passionate Writers

Info Crispy November 16, 2011 at 12:09 AM    

This button is beautiful. Thanks for sharing the code.

kathyjames November 16, 2011 at 4:04 AM    

This is great thanks for sharing,Ive added a linkdin button but is a bit wider than the rest... how can I modify this
www.tricitypsychology.com/shrinkrap

Hot Pictures November 16, 2011 at 5:14 PM    

Thanks for code. Its amazing

Greenlava November 18, 2011 at 6:25 PM    

@kathyjames
I don't think you can modify LinkedIn button. If I'm not mistaken, the button is made up of fixed-size background images.

Greenlava November 18, 2011 at 8:56 PM    

@Passionate Writers
Here's the code for the Like button:

[div class='sbutton' id='like' style='margin: 5px 0 0 5px;']
[script src='http://connect.facebook.net/en_US/all.js#xfbml=1'][/script]
[fb:like layout='box_count' show_faces='false'][/fb:like]
[/div]

and the official Tweet button:

[div class='sbutton']
[a class='twitter-share-button' data-count='vertical' data-via='BloggerSentral' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet[/a][script src='http://platform.twitter.com/widgets.js'
type='text/javascript'][/script]
[/div]

bimo November 29, 2011 at 12:46 AM    

Thanks for sharing this tutorial.
It really works.

Unavailable December 8, 2011 at 12:37 PM    

Sir, I want the code exactly the same as you have, Google share.Facebook Like button, Share button and tweet .. Can I have 1 ? MrFendy00@Ymail.Com Thanks sir .. ( Sory for my bad english )

Greenlava December 11, 2011 at 1:02 AM    

@Unavailable
Please refer to reply #298 for the Like and official Tweet buttons. All you need to do is rearrange the codes to get the order you want.

animebodega December 23, 2011 at 3:31 PM    

Hi, I found this code interesting. I was thinking if the same feature(floating feature) can be made by using a custom image I made which links to my FB page. Any tips?

Greenlava December 24, 2011 at 2:13 AM    

@animebodega
Your code:
[div class='sbutton' id='myfbpage']
[a href="PUT YOUR FB PAGE'S URL HERE"][img src="PUT YOU CUSTOM IMAGE'S URL HERE"/][/a]
[/div]

Gaurav Bansal December 25, 2011 at 12:14 AM    

i want to set it right side to my blog

Greenlava December 25, 2011 at 7:37 AM    

@Gaurav Bansal
Change the value of margin-left in line 3 to a higher (positive) value.

Dewan Sohan December 26, 2011 at 1:15 PM    

Thanks for a pure code suggestion.

Seta Tutundjian December 28, 2011 at 8:25 PM    

it worked after half an hour, amazing! thank you for a wonderful site!

Seta Tutundjian January 2, 2012 at 2:30 AM    

GreenLave, I implemented this and it worked superbly for a few days. then FB decided to do some changes and now you cannot share on FB from blogger (you can check the Blogger Help Forum for news on this). how do I change the FB share button to the Like one?

Greenlava January 2, 2012 at 3:31 PM    

@Seta Tutundjian
Replace code line 12 with this Like button code:
[script src='http://connect.facebook.net/en_US/all.js#xfbml=1'][/script]
[fb:like layout='box_count' show_faces='false'][/fb:like]

geek world news January 2, 2012 at 8:37 PM    

Good tutorial.

miss_graccie January 4, 2012 at 11:51 PM    

thanks a lot! i've been finding ways to do this and now i did it thanks to you :)

Natalie Perez January 5, 2012 at 10:28 AM    

How do you put this sidebar on the right side of the page? PLZ reply!!!!

Greenlava January 5, 2012 at 11:05 AM    

@Natalie Perez
I've replied on Facebook

Software Crack January 6, 2012 at 5:45 PM    

i love it. thanks brothers :*

Anonymous,  January 7, 2012 at 3:50 AM    

How do I make the bar look just like the one you have on the left? I want the facebook like button, and the regular tweet button, not the green one. Thanks.

Greenlava January 7, 2012 at 11:44 PM    

@Anonymous
I posted the Like and official Tweet buttons codes in reply #298.

Erik Smith January 16, 2012 at 7:14 AM    

I must be the most illiterate person when it comes to adding code to this- but I have tried adding the code from replies 24 & 140 in this thread to the widget to get my twitter name to come up, but I keep getting errors. I'm adding it to the lines it says to, but I have a feeling I'm using the symbols [ ] where I should be using < >. I know most smart computer people would know where to substitute these, but I don't. Is there and explanation for this that a stupid person might be able to figure out?

I love this widget and would love to use it, but if it doesn't tweet my username, I can't. Thanks so much. Brilliant widget.

Limitation7 January 27, 2012 at 3:50 PM    

Thanks Dear , For the sharing this tutorial, its working fine on my blogs.

Blog Informer January 28, 2012 at 11:56 PM    

Woah! Thanks for providing us with the codes needed to get the widget. That is awesome.

Anara from able2able February 4, 2012 at 1:19 AM    

The plug in looks great. Placement is a little high in IE, but when I tried to make it fixed it still looked weird so I decided to let it go for now.

How do I add Pinterest to this? A lot of my followers are teachers and really into pinning things right now.

Greenlava February 6, 2012 at 8:22 PM    

@Anara from able2able
Here's the code for Pinterest's Pin It button:
[a href="http://pinterest.com/pin/create/button/" class="pin-it-button" count-layout="vertical"]Pin It[/a]
[script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"][/script]
Please read previous replies to learn how to add it to the bar.

Mathilde February 7, 2012 at 7:45 AM    

@Greenlava: Thanks for adding the codes for the Facebook like and official Tweet button. It works great, except for the tweet button that's a little too large...

Could you tell me where I could change its width please? Thanks!

Zakkiy ibnu bahrun February 9, 2012 at 5:07 PM    

Hi, i was scrolling through the comments, but i didn't found any topic about facebook send button, i would like to add it to the swirlingfloating bar, hehe

but this one doesn't work

[b:if cond='data:blog.pageType == "item"']
[script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/][fb:send colorscheme='light' expr:href='data:post.url' font='arial'/] [/script]
[/b:if]

what do you think?

Greenlava February 9, 2012 at 5:30 PM    

@Mathilde
Sorry, but you can't change the width. You can't apply CSS to Tweet button because it sits in an iframe (of a different domain).

@Zakkiy ibnu bahrun
Get the Send button code from this post: How to add Facebook Send button to every post

Kabayan Lulungu February 20, 2012 at 12:49 AM    

love it, thanks ...

Stephen Mooney February 20, 2012 at 7:30 PM    

Thank you

surya wings February 26, 2012 at 7:37 PM    

Expected one ... nice post ..thank u

Tonsil Apple March 5, 2012 at 12:46 PM    

its good.

Blogger March 6, 2012 at 7:39 PM    

I want to add twitter button instead of tweetmeme and fblike instead of fbshare.

Greenlava March 6, 2012 at 8:26 PM    

@Blogger
Read reply #140.

GC March 7, 2012 at 9:10 AM    

When someone clicks to retweet a post the URL is long and often takes up most of the tweet. Is it possible to convert & shorten the link via a URL shortening site?

Nairobian Perspective March 7, 2012 at 3:01 PM    

Hi, somehow the plus one button is not showing on my blogger classic template...and your blogger update is not clear ,by stating I.5 do you mean section I line 05 which relates to :.fb_share_count_top {width:48px !important;}

Rahul Dixit March 7, 2012 at 6:03 PM    

I want to add fblike button instead of fbshare.

Greenlava March 8, 2012 at 1:00 AM    

@Nairobian Perspective
I can see the Google+1 button just fine.
Thanks pointing out the mistake. I fixed it, now it reads "Copy the share bar code and paste it right below the line"

@Rahul Dixit
I've discussed that before. Please browse/search the comments.

Greenlava March 8, 2012 at 1:14 AM    

@GC
Yes you can shorten the URL. Just insert this line before the TweetMeme Javascript call (before line 15):
[script type="text/javascript"]
tweetmeme_service = 'bit.ly';
[/script]

That's for bit.ly URL shortener. Visit this page for the list of applicable shortener services:
http://help.tweetmeme.com/2009/08/17/url-shorteners/

GC March 9, 2012 at 9:41 AM    

@Greenlava
I'm actually using the official twitter button you mentioned in reply #298 so I'm assuming that tweetmeme line won't work with it?

Greenlava March 11, 2012 at 9:30 PM    

@GC
No that wouldn't work with the official Tweet button.
Having said that you won't be needing a URL shortener for Twitter Tweet button, because it shortens URLs automatically, using Twitter's own t.co URL shortener.

GC March 12, 2012 at 9:13 AM    

@Greenlava
Cool! Thats good to know, thanks for all the help Greenlava!

Itender Rawat March 14, 2012 at 12:32 AM    

Nice media buttons! Thanks a lot author.

Don Mashak March 23, 2012 at 5:54 AM    

Is there a way to make this bar horizontal, instead of vertical?

Ilia Konovalov March 23, 2012 at 8:28 PM    

Awesome widget , thanx a lot !

MyStyleVita March 24, 2012 at 12:03 AM    

Is there a way to add a pin it button with a tracker to this side widget? This has been the BEST tutorial ever by the way.

jessica@mystylevita.com

Anonymous,  March 24, 2012 at 2:40 AM    

I've been using this for a year or more now and it's been great, but then it stopped counting. It doesn't keep track of sharing anymore. Sometimes StumbleUpon works for a bit but the rest all drop their count.

Any advice?

Jon Thorsen March 27, 2012 at 6:22 AM    

Is there a way to direct code this into the html? I saw your earlier comment about adding after the content-outer but that didn't work for me.

The reason I want to code it directly in is because I can't remove the borders of the widget in IE. They go away in FF, but they still display in IE so I get an empty box after the post and above the footer.

I also tried moving the widget to the footer since there are no borders on those widgets, but then it was stuck to the bottom of the page in IE. (Again, worked fine in FF -- so frustrating!)

Jon Thorsen March 27, 2012 at 9:57 AM    

Did anyone get the Pinterest button with the counter to work in this gadget?

@Greenlava, I tried the code you posted for an earlier commenter but it just showed up as a text link for me with no icon or counter...

Jon Thorsen March 28, 2012 at 12:29 AM    

Just realized the widget is not working in IE8 for me...it shows up and the counters are all correct but you can't click on anything to share the page...

@Greenlava, any ideas?

Nwosu Desmond April 4, 2012 at 10:11 PM    

Thanks for this post...you have saved a life today.

umesh April 7, 2012 at 10:24 AM    

i am using your gadget it is good can you add linkdin to this gadget
thank you

Greenlava April 10, 2012 at 4:53 AM    

@umesh
Here's the code for LinkedIn:
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script>

Bob April 21, 2012 at 12:02 AM    

Thanks for giving all this help its much appretiated

I am just having trouble with Twitter codes I would love the coding for the tweet with the count above

This is for a Wordpress homepage.. Whatever I enter does not work

Bob

DaddyCastle April 21, 2012 at 12:08 AM    

this works fine but other fb plug ins (like, comment box, like box) were affected and not working. so i have to remove your widget. Its weird but did this happen to anyone?

CCIEDATE April 21, 2012 at 4:18 AM    

thanks brother i worked god bless you!

Greenlava April 22, 2012 at 8:11 PM    

@Bob
Try this code:
[div class='sbutton']
[a class='twitter-share-button' data-count='vertical' data-via='BloggerSentral' href='http://twitter.com/share' rel='nofollow'>Tweet[/a][script src='http://platform.twitter.com/widgets.js' type='text/javascript'][/script]
[/div]

replace BloggerSentral with your own Twitter username.

sketchup4architect April 27, 2012 at 3:39 PM    

it's really awesome..thanks..

gb May 15, 2012 at 5:19 AM    

nice tips.floating share button has a way of attracting visitors to click and share your post.

Year 11 Revision May 16, 2012 at 3:51 PM    

Thanks Great found by a friend and shared with me

Amber Phillips Ham May 30, 2012 at 12:13 AM    

I love this element! I am trying to add the Pinterest "Pin It" function and am having difficulty... can anyone help?

Mohamed Musthafa May 31, 2012 at 12:07 AM    

the share button is not showing counter pls help me pls pls pls pls pls pls pls pls pls pls pls pls i am searching for 1 week

gobizen June 3, 2012 at 12:56 AM    

thanks for sharing this , so nice post thanks for widget,

Greenlava June 4, 2012 at 10:15 AM    

@Mohamed Musthafa
Counter will appear once the count reaches 3.

ROY June 5, 2012 at 3:01 AM    

Aye man, great code! Better than any share bar plugin at least for wordpress

Vijendra Kumar June 6, 2012 at 4:45 PM    

I'm using Picture Window theme and this widget is not aligning properly. Please check the URL: www.softlexicon.com and suggest the fix. Thank you in advance.

Molly June 10, 2012 at 5:42 AM    

Hi Greenlava,

Thank you for another awesome feature!

I've added the Pin it button as recommended in post no. 321. It showed 'Pin It' only, no button. Went to the Pinterest site and copied some code from there. Now I have the button but it's a bit too small and it doesn't show the counter.

As I'm not good at html at all, I'm completely helpless now.

The code in my widget for this part is

[div class='sbutton' id='Pin It']
[a href="http://pinterest.com/pin/create/button/" class="pin-it-button" count-layout="vertical"][img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /][/a]
[script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"][/script]
[/div]

Of course with <> instead of [] ;-)

Any idea? My blog is www.katzentisch.com (other buttons removed on purpose)

Thanks a lot in advance,
Molly

Greenlava June 13, 2012 at 11:00 PM    

@Molly
Try replacing it with this one:

<div class='sbutton' id='PinIt' style='margin-left:8px;'>
<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>
</div>

and tell me if it works.

Molly June 15, 2012 at 1:00 AM    

Greenlava,

Sorry, no, it doesn't work. Again there was the text 'Pin it' only. I've replaced it with my version again.

Nevertheless, thank you for trying! If you have another idea, please let me know :-)

Molly

suwarjo June 17, 2012 at 5:55 PM    

Thanks for this article this plugin helper for blogger

Greenlava June 19, 2012 at 9:02 PM    

@Molly
I forgot to tell you, the code in #365 won't work if you install the floating social media using HTML/Javascript gadget.
It will only work if you install it via Template > Edit HTML as explained under "Update (for Blogger)".

Puisi Cinta June 20, 2012 at 3:05 PM    

thanks dud, ,.now, i can make it well...

caycanh July 14, 2012 at 4:37 PM    

Thanks to you

George Joe July 17, 2012 at 6:30 PM    

thnx for sharing this tutorial. great work

Animesh Chatterjee July 18, 2012 at 2:24 PM    

Hi,
I was using this widget...recently I have seen that the FB share button is not showing on my blog http://www.askqtp.com/

Only share a hyperlink is coming...
Please help.

Regards,
Animesh

Aleksander July 22, 2012 at 2:02 AM    

What's wrong with Facebook Like Buton. Button is indented to the right.

Tracy Simmons July 25, 2012 at 8:04 AM    

My facebook widget is looking strange. It has the word "share" next to the widget. Any ideas what the problem is?

Anara July 26, 2012 at 12:23 AM    

Greenlava, thank you for updating and replying to comments in this post. It's been very helpful!

I tried the Pinterest code you provided and am having the same problem as the gentleman in comments 345 & 346 - the line of Pinterest code is appearing in my buttons instead of the Pinterest icon. is it because there is no id in the code but there is in all the others?

I have a sudden new problem: My Facebook button has shifted to the right and the text "share" is now appearing in the floating bar. The only change I have made to my blog is adding rafflecopter as an embedded link in one post.

My code is now in the html - very neatly solved the g+ button problem as you described above and also shifted the floating bar further to the left, which I like. This was done after the problem with the Facebook icon started and did not affect that problem either way.

www.able2able.com

Greenlava July 27, 2012 at 3:17 PM    

@Aleksander, Tracy Simmons, Anara
I've updated the code, replacing Facebook Share with Like button. It seems Share button no longer works, since mid July.

photoshop August 13, 2012 at 11:10 PM    

brillant piece of information, I had come to know about your web-page from my friend hardkik, chennai,i have read atleast 9 posts of yours by now, and let me tell you, your webpage gives the best and the most interesting information

Dawn August 19, 2012 at 1:46 AM    

This is great, thank you! I always thought it was a Wordpress app and didn't know how people got the floating share buttons. I actually came across your blog while looking for the add me buttons (like the ones you would see in a line on the top of a blog) and this is just too cool! I just added it to my blog.

Ankit@ house music August 21, 2012 at 3:05 AM    

woah! helpfull but these codes are really confusing.! i need to get more used to them first! :(

ARBAL August 24, 2012 at 4:02 PM    

Can You add Pinterest button?

Greenlava August 25, 2012 at 8:41 AM    

@ARBAL
See reply #365.

mzarita August 28, 2012 at 8:51 AM    

good code

GistLand October 24, 2012 at 12:19 AM    

Great work GreenLava, please i would love to know if there is any available tutorials that can be applied to make facebook like button, twitter tweet button, and facebook comment box to appear on blogger mobile view. They are all visible on the desktop view.

Your reply would go a long way.Thanks

http://gistland.com

Admin November 10, 2012 at 11:24 AM    

thanks for ur nice info

anish@ windows os November 11, 2012 at 11:38 AM    

adding floating media brings you that extra style

Tracy Simmons November 21, 2012 at 3:15 AM    

The Tweetmeme button is not showing up in my widget. I think I copied and pasted the code correctly. Is there anything else I may have done wrong?

kfein January 5, 2013 at 1:44 AM    

awesome, thanks for the tutorial. i'm now using it on my blog :)

steve@ dance music January 19, 2013 at 3:08 AM    

I pretty much agree with you mate! using a code is always better rather than using plugins, if there are host restrictions then your definitely running into problem. anyways thanks for the great tutorial man

Durai Sankar January 26, 2013 at 12:59 PM    

What related post do you use in bloggersentral ? Pls help me sir.

Greenlava January 30, 2013 at 10:29 AM    

@Durai Sankar
I use nRelate. Just type "nrelate" in the search box for the tutorial.

atiqur rahman February 3, 2013 at 7:39 AM    

Good post, thanks for that. i am going to add this to my site.

Anonymous,  February 9, 2013 at 4:41 PM    

Hello, thanks for the tutorial, but what exactly is the code to display only: facebook, tweeter and google +?

Thank's

Vivek March 5, 2013 at 7:58 PM    

Awesome.. finding this one... your site is awesome

yadi April 10, 2013 at 10:30 PM    

this post helps me to apply on my blog. Thank you

seo April 11, 2013 at 6:30 PM    

If you like wordpress, I suggest trying Digg Digg which is another plugin that adds floating social media icons

Inghinyero April 24, 2013 at 4:01 PM    

The Twitter button does not appear in my website. :( How can I do that. Also, do you have any social media code for sharing below the post? Thanks.

blogger April 28, 2013 at 2:13 PM    

This is the best widget for social media sharing. thanx

Monster Blogger May 16, 2013 at 2:36 PM    

Your article helped me to understand the topic well and I would love to share this to my friends. I also love to
Get Likes for your website
Thank you for this and all the best.

Denzil Craddock May 18, 2013 at 11:51 PM    

Although this post is years old, it helped me so much! Thank you for giving such wonderful advice for something I've been looking for for so long!!!

Sophina Dillard June 13, 2013 at 7:08 PM    

hi Greenlava...I was searching to integrate social media button vertically (moveable)to my mobile app development blog http://mobileappstuff.blogspot.com/. I read many articles but found this article very useful. In this article the method you have mentioned is very easy and simple.

One thing I want to know how to add Linkdin button in list.

I have shared this to article to recommend others and further use.

Thanks for sharing such great article.

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