How to Add Floating Social Media Sharing Button – Blogger

In today tutorial am going to share something very important related to social media. A natural and organic way to increase website traffic, you’ve read many tactics and articles that explain way to increase traffic through social media, that is not an issue reality is it wouldn’t work.

How to add social sharing button – Only for you, i have created a step by step tutorial to add Social media sharing button to bloggers blog easily, before we start let me explain why to add social media button and what is the main goal behind it.

Social Media play key role to bring instant traffic to your blog, but its seem that common problem newbies do they only share their post to various social accounts, it won’t bring you traffic you need, so spread you networks for getting people involved.

Adding social sharing button to blogs brings positive technique in search engine and one of the best way to increase post sharing count on Twitter, Google Plus and Facebook etc. Floating Sharing button has many live counter option like Facebook Like, Stumble upon, Twitter Share, Digg this, linkedin share, Google Plus Share, Pinterest and many more. Best feature is you can add more counter of your choice.

Also : Add Facebook Like Button Below Blogger Post

Way to Add Floating Social Media Sharing Button

Follow each and every steps properly while adding sharing button.

1. Log in to Dashboard

2. Select your blog in which you want to input add button.

3. Go to layout.

4. Click Add to Gadget

5. One pop-up window will appear on your screen like below image select HTML/Javascript

6. Now, important step copy below code and simply paste it inside the box.

<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=’Digi Logi‘ 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>

7. Save it Now

Important customization :

Vertical alignment – change 15% of bottom
Its help to fix the distance when website is responsive or window is resized. fix the value in PX instead of %.

Horizontal alignment – Change -721px from marging -left.
Negative value push button to left and positive value push it to right, so adjust the value as per your need.

Note: Replace Digi logi with your twitter username and also you can add existing buttons by code.

Finally you are done with Adding floating social Media Sharing Button to bloggers blog, again i am regurgitating follow each and every step properly. Still in case if you suffer any problem while adding button than simply stuck
me via comment section, i will definitely reply as soon as possible.

The post How to Add Floating Social Media Sharing Button – Blogger appeared first on Digi Logi.

Leave a Comment