How To Add Floating Share Buttons Gadget To Blogger?

Everybody wants to get top ranking in SERPs (Search Engine Result Pages) but only those people who analyze the ever-changing SEO field carefully and change their strategy according to the trends get good positions.

 

It’s been a while since Google has started considering social signals as a significant ranking factor. So, you should have social sharing buttons on your blog to make it easier for the visitors to share your content, which in term give SEO benefits.

Why Social Signals are important?

Do you know how important is the social signals?

Neil Patel describes in this post that SEO has changed a lot from making backlinks only.

In today’s world, you need to focus on three main factors to get top search engine ranking. It will be impossible for you to rank top if you avoid any of them.

New Face of SEO

New Face of SEO

If you are not still convinced of the power of social media, you can also check this article from Search Engine Journal out.

In short, every blog needs social signals. If you make a balance between links, on-page factors and social shares, your website will climb up positions in search results like a rocket.

That’s exactly why everyone puts some sharing buttons on their blog. (Don’t know how floating share buttons look like? Just have an eye on the left side of your screen).

Add Floating Social Share Buttons To Blogger

Do you want to know how to add floating share buttons on Blogger? Follow the steps I am going to list out.

Step 1: As you all know the first step is logging into blogger.com and being in the dashboard of the blog on which you want to add the floating share buttons.

Step 2: We are not going to edit your template. So, you don’t have to worry about anything. Here, you will be adding a widget to the blog that can be removed anytime.

Click on the Layout link on the left sidebar of the dashboard.

Blogger Layout

Step 3: Now you can see all the widgets you have placed on your blog so far. Click on Add widget link (no matter from where you click, be it sidebar, after the post, header or footer).

Add a Gadget Blogger

Step 4: You will be provided with a number of predesigned widgets. For adding a customized code to integrate a new widget, you must select HTML/Javascript from the options.

Blogger HTML javascript Gadget

Step 5: Two fields are what you will see in this step. One is Title and the next one is Content. You can leave the first field as empty because a title is not needed for a floating share bar.

Floating Share Buttons Gadget Code

Paste the following code inside the Content field and click Save.

<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 Social Sharing Gadget”>
<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=’AnkitKrSingla’ 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;”><a style=”color: #3399BB;” href=”http://www.bloggertipstricks.com/floating-share-buttons-gadget.html” rel=”nofollow” target=”_blank”>[Get This]</a></div></div></div>

Hurray. You now know how to add floating social share buttons on Blogger.

Note: You can change the vertical alignment by putting a value instead of 15% and horizontal alignment by inserting altering -721px (check the highlighted texts). And it will lead to malfunctioning of the social share bar if you proceed to edit the code other than those two alignment items.

Bottom Line

What are you waiting for? Just sign in to your Blogger account and integrate the code with it.

Keep in mind that of all the social networks, Google gives the highest priority to Google +1s. That means higher the Google +1s, greater will be the chance to rank. But you should also care about other factors as well.

As I said earlier, social media is a criterion for Google to position search results. And, social media buttons are necessary to increase the number of shares.

If you enjoyed this tutorial that is about adding social sharing buttons in blogger, then please share this article with your friends. Also, if you face any problem in following this tutorial, feel free to leave a comment. I will try my best to solve your query.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: