Add Floating Social Media Sharing Buttons To Blogger


Tutorials - Tutorials

User Rating: / 1

Add Floating Social Media Sharing Buttons To Blogger

The Floating Social Media Sharing is a very popular widget on all the top blogs and this is one of the ways to increase the number of times your posts get shared on Twitter, Facebook and other social networks.

This floating social bar has the following options: Facebook Like, StumbleUpon, Twitter Share, Digg This, Google+ and each of them comes with a live counter. You can add more sharing buttons or social bookmarking icons later if you want.

Blogger, WordPress, Facebook, Share

How to add the scrolling social bookmarking bar

Step 1. Log in to your Blogger Dashboard, select your blog and go to Layout 

Step 2. Click on Add A Gadget link

Step 3. From the pop-up window, scroll down and select HTML/Javascript 

Step 4. Copy the code below and paste it inside the empty box.

Step 5. Save the gadget.

The code to copy-paste (updated!):
<style type="text/css">
#social-buttons {
padding:0 0 2px 0;
#social-buttons .button-share {
margin:5px 5px 0 2px;
<div id='social-buttons' title="Get this from">
<div class='button-share' id='like' style='margin-left:7px;'>
<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); = id;
  js.src = "//";
  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>
<br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='Helplogger' expr:data-counturl='data:blog.url' href='' rel='nofollow'>Tweet</a><script src=''; type='text/javascript'></script>
<br />
<div class='button-share' style="margin-left: 3px;" id='su'>
<script src=""></script>
<div class='button-share' id='digg' style='margin-left:3px;width:48px'>
<script src='' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
<div class='button-share' style='margin-left:3px;' id='gplusone'>
<script type="text/javascript" src=""></script>
<g:plusone size="tall"></g:plusone>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="">widget</a></div></div></div>
  • Vertical alignment - Change the 15% value of bottom. The code positions the social bar 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 %.
  • Horizontal alignment - Change the -721px value from margin-left. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. Increase or decrease the value based on your needs.
  • Twitter setting - Replace Helplogger with your Twitter username
  • Replacing and removing buttons - You can replace existing buttons with your own. Each button is represented by this code:
<div class='sbutton'> BUTTON CODE HERE </div>
    Enjoy!!! :)

    About Us

    Royal Developer Top three Web Designing and Web Development Company in Dehradun, Uttarakhand, India. Royal Developer Best SEO Company in Dehradun takes pride in its philosophy of 'Employee First' which empowers to create a real value for the customers. Royal Developer can offer Best and cheap Website Development Software Development & SEO Services. We are the Best service Provider of SEO, SEM, SMO Services Company in Uttarakhand. Web Designing Course in Dehradun, Web Designing Classes in Dehradun, Web Design Training Institute in Dehradun, Web designing institute in dehradun, Best institute for web designing in dehradun, Web development training in dehradun, Web development course in dehradun, Web Designing Training in Dehradun.


    - Contact Information - 

    Add : RDIT Services Pvt Ltd, 3rd Floor, RGM Plaza, Above Chandu Canteen,
              23 Chakrata Road, Dehradun - 248001, Uttarakhand, India

    Email : 


     : +91 8171200108, +91 8979462451,
                                      +91 7895753921

    Quick Enquiry Form

    Enter your full name

    Enter your valid email address

    Enter your correct mobile number

    Invalid Input

    Your Message
    Invalid Input

    Enter Code
    Enter Code
      RefreshInvalid Input


    You are here: Home Tutorials Add Floating Social Media Sharing Buttons To Blogger