Skip to main content

How To Add Simple Floating Social Media Share Buttons To Blogger And WordPress

Social share buttons help bloggers or website owners to share their contents on social networking sites. You can add social share buttons in many ways and different places. Choice for social share buttons is different depending the users. Someone wants social share buttons just after end of the each blog post. Someone wants floating social share buttons. There are many ways to add social share button to your blog / websites.

This is the very simple way to add floating social share buttons. The main feature of this floating share button is no need to install any plugin as well as it will not slow down your blog also. This process works on both blogger and wordpress blog. Read also : how to add smart floating social share button to your blog.

This widget contain Pinterest, Google +, Facebook, Twitter, LinkedIn, StumbleUpon, Digg and Orkut. Below image is the screenshot with social media share buttons of my blog. You can customize the below code also. Suppose if you do not want Orkut share button then just delete the code for Orkut from the below code.


Important :- Copy the below codes first. In the below code you can change the numeric value 10% and 760 according to your template. Read also : how to protect your computer from WannaCry ransomware virus.

<style type="text/css">
#social-buttons {
position:fixed;
bottom:10%;
margin-left:-760px;
float:left;
border-radius:1px;
padding:0 0 2px 0; }
#social-buttons .button-share{
float:left;
clear:both;
margin:2px 2px 0 2px; }
</style>
<div id='social-buttons' title='Get This Widget'>
<div class='button-share' style='margin-left:3px; id='pinit'>
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
<a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.allbloggerbuzz.com%2F&media=http%3A%2F%2Fwww.allbloggerbuzz.com%2F&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="above"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<div/>
<div class='button-share' style='margin-left:3px;' id='gplusone'>
<div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60"></div>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script></div>
<br/>
<div class='button-share' id='like' style='margin-left:3px;'>
<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>
<br />
<div class='sbutton' style="margin-left: 3px;" ><a class='twitter-share-button' data-count='vertical' data-via='AllBloggerBuzz' 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>
<script src="//platform.linkedin.com/in.js" type="text/javascript">
 lang: en_US
</script>
<script type="IN/Share" data-counter="top"></script>
<br />
<div class='button-share' style='margin-left:3px;' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<br/>
<div class='button-share' id='digg' style='margin-left:3px; width:45px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<br/>
<div style="clear: both;font-size: 9px;text-align:center;"><a style="color: #3399BB;" href="http://www.allbloggerbuzz.com/2017/05/add-simple-floating-social-share-button.html">Get This Widget</a>
</div></div></div></div>

Click Here To get the Code

How to add to Blogger

Step 1. Login to your blogger dashboard

Step 2. Click Layout

Step 3. Click on Add A Gadget

Step 4. Now you need to select HTML/JavaScript from Popup Window. Read also : how to add AdSense ad anywhere inside your blog post.

Step 5. After that paste the above copied code inside the Content box. see the below image.


Step 6. After pasting the code click Save.

Step 7. Click Save arrangement to save the Layout. Read also : how to track lost / stolen smartphone and erase data remotely.

How to add to WordPress

Step 1. First Login to your wordpress account

Step 2. Go to Widgets

Step 3. Select a Text widget

Step 4. And now paste the above code to the text widget.

Step 5. Click Save to save the widget .

Watch this video


Was this information is helpful? If you think this information may help others then share it on social media. Your one share appreciate me lot.


Comments