Floating Social media buttons
One of the most important widget on a blog is social media buttons. Because it allows our visitors to easily share our content on different social media sites to make our blog posts roll over on the web. Sharing our blog posts is not only for having a presence on social media sites and driving traffic to our blog, but according to studies of marketers, social media points or social shares will help a particular page to rank on the search engine despite of Google insisting that they are not included it in the ranking signal.

There are many ways to put a social media buttons on our blog, but on this page you will learn how to make floating social media buttons. Basically, if blog's visitors like your content and wants to share it on Twitter, Facebook and Google+, they should be able to do that without wasting a time looking for a social media sharing buttons. This widget is set to appear on the left side part of our blog, it's composed of Facebook like, Google+1, Tweet, Linkedin share and Stumbleupon button.

If you want to implement this widget on your site just follow the simple steps below.
  1. Go to your Blogger Dashboard
  2. Click on Layout
  3. Click any of Add Gadget
  4. A popup window will appear, just scroll the page and choose HTML/JavaScript
  5. Now copy the code below and paste it. Don't write a title of your widget.
<style type="text/css">
#floating_bar { background-color:#fff;position:fixed; padding:3px 0 3px 0;
bottom: 30%;margin-left:-5px;float:left; border: 1px solid #000000;
border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; z-index:10; }
#floating_bar { clear:both; }
</style>
<div id='floating_bar'>

<div id="fb-root"><div style='margin:3px 3px 3px 10px;' id='fb-root'>
<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>
<div style='margin:0px 0 0 10px;' id='gplusone'><script src="https://apis.google.com/js/platform.js" async='async'></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style='margin:5px 5px 5px 6px;'>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="intersmash" data-lang="en" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<!-- start linkedin -->
<div style='margin:5px 5px 5px 5px;' id='linkedin'>
<script>
if(!window.console){window.console={}
}if(typeof window.console.log!=="function"){window.console.log=function(){}
}if(typeof window.console.warn!=="function"){window.console.warn=function(){}
}(function(){var S={"bootstrapInit":+new Date()},p=document,m=(/^https?:\/\/.*?linkedin.*?\/in\.js.*?$/),b=(/async=true/),D=(/^https:\/\//),J=(/\/\*((?:.|[\s])*?)\*\//m),F=(/\r/g),j=(/[\s]/g),g=(/^[\s]*(.*?)[\s]*:[\s]*(.*)[\s]*$/),x=(/_([a-z])/gi),A=(/^[\s]+|[\s]+$/g),u=(/^[a-z]{2}(_)[A-Z]{2}$/),C=(/suppress(Warnings|_warnings):true/gi),d=(/^api(Key|_key)$/gi),k="\n",G=",",n="",I="@",o="extensions",Z="on",w="onDOMReady",ac="onOnce",aa="script",L="https://www.linkedin.com/uas/js/userspace?v=0.0.2000-RC8.40280-1420",h="https://platform.linkedin.com/js/secureAnonymousFramework?v=0.0.2000-RC8.40280-1420",H="http://platform.linkedin.com/js/nonSecureAnonymousFramework?v=0.0.2000-RC8.40280-1420",P="http://platform.linkedin.com/js/frameworkV2?v=0.0.2000-RC8.40280-1420",B=p.getElementsByTagName("head")[0],t=p.getElementsByTagName(aa),X=[],a=[],O=["lang"],R={},c=false,ad,l,W,r,K,E,ab;
if(window.IN&&IN.ENV&&IN.ENV.js){if(!IN.ENV.js.suppressWarnings){console.warn("duplicate in.js loaded, any parameters will be ignored")
}return
}window.IN=window.IN||{};
IN.ENV={};
IN.ENV.js={};
IN.ENV.js.extensions={};
statsQueue=IN.ENV.statsQueue=[];
statsQueue.push(S);
ad=IN.ENV.evtQueue=[];
IN.Event={on:function(){ad.push({type:Z,args:arguments})
},onDOMReady:function(){ad.push({type:w,args:arguments})
},onOnce:function(){ad.push({type:ac,args:arguments})
}};
IN.$extensions=function(ag){var aj,i,af,ai,ah=IN.ENV.js.extensions;
aj=ag.split(G);
for(var ae=0,e=aj.length;
ae<e;
ae++){i=V(aj[ae],I,2);
af=i[0].replace(A,n);
ai=i[1];
if(!ah[af]){ah[af]={src:(ai)?ai.replace(A,n):n,loaded:false}
}}};
function V(ag,ae,e){var ah=ag.split(ae);
if(!e){return ah
}if(ah.length<e){return ah
}var af=ah.splice(0,e-1);
var i=ah.join(ae);
af.push(i);
return af
}function v(e,i){if(e===o){IN.$extensions(i);
return null
}if(d.test(e)){i=i.replace(j,n)
}if(i===""){return null
}return i
}function N(af,ag){ag=v(af,ag);
if(ag){af=af.replace(x,function(){return arguments[1].toUpperCase()
});
if(af==="lang"&&!u.test(ag)){try{var ae=ag.replace("-","_").split("_");
ae=[ae[0].substr(0,2).toLowerCase(),ae[1].substr(0,2).toUpperCase()].join("_");
if(!u.test(ae)){throw new Error()
}else{ag=ae
}}catch(ah){if(!(ab||IN.ENV.js.suppressWarnings)&&ag){console.warn("'"+ag+"' is not a supported language, defaulting to 'en_US'")
}ag="en_US"
}}else{if(af==="noAuth"||af==="noApi"){ag=/^(?:true|yes|1)$/i.test(ag)
}}IN.ENV.js[af]=ag;
var ai=[encodeURIComponent(af),encodeURIComponent(ag)].join("=");
for(var i in O){if(O.hasOwnProperty(i)&&O[i]===af){a.push(ai);
return
}}X.push(ai)
}}l="";
for(U=0,q=t.length;
U<q;
U++){var f=t[U];
if(!m.test(f.src)){continue
}if(b.test(f.src)){c=true
}try{l=f.innerHTML.replace(A,n)
}catch(z){try{l=f.text.replace(A,n)
}catch(y){}}}l=l.replace(J,"$1").replace(A,n).replace(F,n);
ab=C.test(l.replace(j,n));
for(var U=0,T=l.split(k),q=T.length;
U<q;
U++){var s=T[U];
if(!s||s.replace(j,n).length<=0){continue
}try{W=s.match(g);
r=W[1].replace(A,n);
K=W[2].replace(A,n)
}catch(Y){if(!ab){console.warn("script tag contents must be key/value pairs separated by a colon. Source: "+Y)
}continue
}N(r,K)
}N("secure",1);
function M(e,i){return e+((/\?/.test(e))?"&":"?")+i.join("&")
}IN.init=function Q(i){var e=IN.ENV.js,ae,af;
i=i||{};
for(ae in i){if(i.hasOwnProperty(ae)){N(ae,i[ae])
}}E=p.createElement(aa);
if(e.v2){af=M(P,X)
}else{if(e.apiKey&&!e.noAuth){af=M(L,X)
}else{af=e.secure?h:H
}}E.src=M(af,a);
B.appendChild(E);
statsQueue.push({"userspaceRequested":+new Date()});
IN.init=function(){}
};
statsQueue.push({"bootstrapLoaded":+new Date()});
if(!c){IN.init()
}})();
</script>
<script data-counter='top' type='IN/Share'></script>
</div>
<!-- End linkedin -->

<div style='margin:0 0 10px 11px; id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<p style=' line-height:0px; font-size:11px; font-weight:bold; text-align:center;'><a href='http://www.internetsmash.com/2014/11/how-to-add-social-media-buttons-to-website.html' target='_blank' style='color:#050505;' rel="nofollow">Get this</a></p></div>

Customization

In a code above, you can see this text margin-left:-5px is in color red, all you need to do is to change its value according to your needs. It will allow you to move the widget to the left and right. Going to positive will move to right and if you add a negative value it will move left. You can also change the value of bottom which is on the orange text (bottom: 30%) above, it will allow you to move the widget up and down. You might notice also that intersmash text is in the color red, just replace this text with your own twitter username.

6 comments:

  1. Hi! Thank you for sharing about this. Been wanting to customize my blog layout

    ReplyDelete
  2. social buttons are always very helpful for any blog.thanks for this.

    ReplyDelete
  3. This is a nice tutorial. I think these floating social sharing buttons are cool.

    ReplyDelete
  4. Hello,

    There is some problem in linkedin button. You can check SolveMyHow.com

    Hope this helps.

    Can you please fix it and reply me to this comment.

    Thanks

    ReplyDelete

NOTE - Every input is always appreciated. However, comments are always reviewed and it may take some time to appear. Always keep in mind URL without nofollow tag will consider a spam.