How To Install Floating Buttons Of Facebook, Twitter, Google Plus On Blogspot Or Wordpress

The guides to install Facebook, Twitter and Google Plus floating buttons beside Blogspot / Wordpress post.

Google Plus, Twitter, Facebook and StumbleUpon are the social networking services that created to expose our stories, blogs and thoughts to the world and get new friends. With those services you can reach people far from your radar.

Anyway speaking about those services, as bloggers we can also utilize them to spread our stories to people who can't find our blog through search engines, like Google or Yahoo!

My point is if your blog / post shared by a Facebook user to its Facebook profile, then their friends see your shared post, if they are interested they can visit your blog then read the post. From that, we will get visitors.

So services like Google +, Facebook or Twitter can be sources of traffic that we can generate by simply adding their buttons.

If we provide our visitors / readers with those social network buttons, they will easily share our post to their friends.

And in this post I will share to you the how to guide to install floating social networking buttons (Facebook, Google+, Twitter, StumbleUpon) at the right side of your post. Just like this.

The reasons I prefer floating social media buttons style is more attractive and easily reach reader's attentions. As the result we can expect them to click one of the social media buttons.

Also learn on how to install a single Twitter count button style on Blogspot / Wordpress.

So how to install floating Facebook, Twitter, Google Plus, StumbleUpon buttons on Blogspot?

• Now login to your blogger.com account.
• Then go to layout.
• Add the following codes to the HTML/Javascript (in add a gadget).
• Save.

So how to add floating Facebook, Twitter, Google Plus, StumbleUpon buttons on Wordpress?

• Dashboard > Appearance > Widgets > Available Widgets.
• Drag Text widget to sidebar.
• Then now you need to paste in the code.
• Save.

Here is the floating buttons codes for Google+, Facebook, Twitter and StumbleUpon.

<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;}
</style>
<div id='pageshare' title="Get this from Tilbit.Blogspot.com">
<div class='sbutton' id='like' style='margin-left:8px;'>
<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>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='BloggerSentral' data-related='' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div><!-- Do not remove this link -->
</div>

Now you will see the floating buttons of Facebook, Google Plus, Twitter and StumbleUpon on your Blogspot or Wordpress post.