Add Floating Facebook Like, Tweet and Google+ in WordPress without Plugin

Without using the plugin, we can bring the floating social media button widgets by using this below code. The beauty in this below code is even when page scrolls down, this floating widgets will remains in a same fixed position.

Floating social media widget will looks like this image.

Add the below code in html/javascript code in header.php and add this CSS code in any of your stylesheet file.

stylesheet
[code type=css]
#floating
{
width: 60px;
position: fixed;
top: 100px;
left: 11px;
background-color: #DB2828;
padding: 10px;
border-radius: 3px;
}

[/code]

HTML &Javascript

[code type=html]

<div id=”floating”>

<!– Facebook like–>

<iframe src=”http://www.facebook.com/plugins/like.php?href=URL OF YOUR SITE&amp;layout=box_count&amp;show_faces=false&amp;width=450&amp;
action=like&amp;colorscheme=light” scrolling=”no” frameborder=”0″ allowtransparency=”true”
style=”border:none; overflow:hidden; width:54px; height:60px; float:left; margin-bottom:5px;”></iframe>
<br />

<!– g+ button –>
<div data-size=”tall” data-href=”URL OF YOUR SITE”></div>
<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>
<br />

<!– Tweet button–>
<a href=”https://twitter.com/share”
data-url=”URL OF YOUR SITE” data-count=”vertical”>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);
</script>
</div>

[/code]