How To Add Floating Social Media Buttons To Blogger

add floating social media sharing buttons for blogger.

Social sharing has always remain an important aspect on blogosphere. You can't neglect the power of social share. Yes ofcourse google do bring decent traffic on your blog but when people share your blog with their social media friends then it obviously get more visibility.

So do you wanted to increase your blog traffic and do you wanted to give it more visibility ? Well in that case you have to work on some important parameters of your blog and you have to optimize it.

If you're the regular reader of solvemyhow then you might have already learned few optimizing techniques. Please read the below mentioned tutorials in-case if you missed it.

And in this tutorial we will see how to add floating social media bar on your blogger blog.

Why we add floating social media sharing buttons ?

Well their are plenty of space on blog where you can add social media buttons. But just think for a while, what if your visitor liked your post and what if he/she wanted to share it with his/her social media friends ?

They do not have to look for social share buttons on your blog which obviously waste their time and this might change their mind too. So, in that case it would be only our loss not theirs.

So, that's why in this post we'll add floating social media bar which is designed as such it appears on the left side of your blog. Well at solvemyhow, I just use the same widget. You can see the live demo by clicking on any social media button.

This widget allows your visitor to share your blog post on following social media sites,

Facebook
Twitter
Google plus
Linked in
Stumble upon

This contains big 4 social media sites + stumble upon button to get even more traffic. I hope the look and feel is now clear to you right !

Must Read :-

Adding Floating Social Media Sharing Buttons To Blogger :

To install this widget on your blog you just have to copy and paste the below mentioned code. Just follow the simple step by step guide written below.

Step 1 :- Go to blogger.

I recommend you to take backup of your blogger template first.

Step 2 :- Now go to layout.

Blogger dashboard >> layout >> Add a gadget.
Now add HTML/JavaScript.

Step 3 :- Just paste the below mentioned code in it.

<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="piyush036" 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>

 
    
    <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>

Step 4 :- Customization.
To set its position i.e on left side and top to bottom, makes change in,

bottom: 23%;margin-left:-82px;

you will find this code in the 3rd line, starting from the top.

Now find the comment,



    <div style='margin:5px 5px 5px 6px;'>
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="piyush036" 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>

    

Change the highlighted part with your twitter username/id.

That's it these are the two changes you need to make in the above mentioned code.

Step 5 :- Save the widget.
Now leave the title blank and simply save the widget.

That's it. Congrats you have successfully installed the widget.

So, this was all about how to add floating social media buttons to blogger. I have made this code, which only requires 2 customization. Hope you found this tutorial informative and helpful. Install this today and it will surely improves your social share count. You can also subscribe for solvemyhow newsletter to get latest updates about blogging widget, SEO and hacking tips right into your inbox !

Found this tutorial interesting ? Why now help us by shooting those social media buttons on your left side,"after all sharing is caring" right !

Also See :-

How to Hack Wifi Password in 2 Minutes

[Exclusive] Top 10 URL Shortener Websites To Earn Money

[Exclusive] How To Hack whatsapp

DoFollow CommentLuv Enabled Blogs With High Page Rank

[Exclusive] Get PR9 Backlinks From Top Social Media Sites

[Exclusive] Get PR9 Backlinks for Free

How to Enable and Add Custom Robots.txt File in Blogger

Solve My How

How To Add Floating Social Media Buttons To Blogger

Why we add floating social media sharing buttons ?

Adding Floating Social Media Sharing Buttons To Blogger :

0 comments:

Post a Comment