Add Floating Facebook like and Google Plus button in Website

These Days, Social Networking has become key role in website traffic. You can get direct, targeted users through Social Networking to your site and in this three main keyplayers are Facebook, Google Plus and Twitter.

Info : Even Google Plus can help you to get better ranking in Google Search for connected peoples.

Many website owner keeps like button at end of page but in many cases, user may leave your webpage after reading half. In this case, you should always keep Social button in front of users’ eyes and best option is Float Button.

Here is code which will show Facebook Like count and Google Plus count at bottom-right corner of page. If you scroll your page then also, it wont move anywhere.

<div style="bottom: 0px; position: fixed; right: 0px; opacity: 1; background-color: lightSteelBlue; padding-top: 8px;padding-left: 10px;width:65px; z-index: 1000;">
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<!-- Google Plus Code -->    
<g:plusone size="tall" href="http://news.worldsnap.com/"></g:plusone><BR><BR>
<!-- Facebook Like Code -->
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fworldsnap&amp;send=false&amp;layout=standard&amp;width=60&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=65&amp;appId=228330293846334&amp;layout=box_count" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:65px;" allowTransparency="true"></iframe>

</div>

Customization :
1) You can get your like code from Facebook Like Page here.
https://developers.facebook.com/docs/reference/plugins/like/

2) You can get Google Plus Code from below official page.
http://www.google.com/webmasters/+1/button/

3) You can set div’s right and bottom value inside style attribute as you wish.

Suppose, you like to have div 200px above bottom and 10px far from right then you can use as below in div style.

bottom: 200px; position: fixed; right: 10px;

You can follow Triotips to get best tips for your website.