How to Add Floating Social Media Sharing Button – Blogger

|

Add Floating Social Media Sharing Button : Today I m 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 the way to increase traffic through social media, that is not an issue reality is it wouldn’t work.

How to Add Floating Social Media 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 a 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 the traffic you need, so spread your networks for getting people involved.

Add Floating Social Media Sharing Button to blogs brings positive technique in a 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 much more. Best feature is you can add more counter of your choice.

Add Floating Social Media Sharing Button

Also : Add Facebook Like Button Below Blogger Post

Way to Add Floating Social Media Sharing Button

Follow each and every step properly while adding sharing button.

1. Log in to blogger.com Dashboard

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

3. Go to the layout.

4. Click Add to Gadget

add floating social media sharing button to blogger

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

add floating social media sharing button to blogger1

6. Now, important step copies below code and simply paste it into the box.

<style type=”text/css”>
#social-buttons {
position:fixed;
bottom:15%;
margin-left:-721px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index:10;
}
#social-buttons .button-share {
float:left;
clear:both;
margin:5px 5px 0 2px;
}
</style>
<div id=’social-buttons’ title=”Get this from digilogi.org”>
<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); 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: 2px;” ><a class=’twitter-share-button’ data-count=’vertical’ data-via=’Digi Logi‘ 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>
<br />
<div class=’button-share’ style=”margin-left: 3px;” id=’su’>
<script src=”http://www.stumbleupon.com/hostedbadge.php?s=5″></script>
</div>
<div class=’button-share’ 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=’button-share’ style=’margin-left:3px;’ 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 style=”color: #3399BB;” href=”http://digilogi.org/”>widget</a></div></div></div>

add floating social media sharing button to blogger2

7. Save it Now

Important customization :

Vertical alignment – change 15% of bottom
Its help to fix the distance when a 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 a step to Add 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 then simply stuck me via the comment section, I will definitely reply as soon as possible.

Leave a Comment