How to Insert Social Media Buttons on Blogger Blog ~ Rathores blog

Trending: Bloggermint Blogger Template

Tuesday 22 January 2013

How to Insert Social Media Buttons on Blogger Blog

Do you like this story?

Social buttons allow you to share your contents with the rest of the world. It is also a way of increasing traffic to your website and making your blog more popular. Adding a floating social button in a blog is very easy since you only need to insert a HTML script code and you are done.

Here is a simple way to add the floating social media button in your blog page. The share button will contain the following social networks buttons; Facebook share, Stumble, Digg, Twitter and Google+.

· Login to Blogger Dashboard

· Design/Layout

· Add Gadget

· Select HTML/Javascript icon

· It will open to a new pop up window.

On the configure HTML/script space provided, copy and paste the following HTML script:

<style>

#pageshare {position:fixed; bottom:10%; right:10px; float:right; border: 1px solid black;

border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px
0;z-index:10;}
#pageshare .impbutton {float:right;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='impbutton' id='ww'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='impbutton' id='yy'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='impbutton' id='googlep'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='impbutton' id='xx'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='impbutton' id='dd' 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='impbutton' id='ll'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href=URL of Your Site Here
target="blank"><font color="black">[Get This]<font></font></font></a></div><div style="clear: both;font-size: 8px;text-align:center;">by<br/><a href="URL of Your Site Here" target="blank"><font color="black">Title of Your Blog Here<font></font></font></a> </div></div>

Please note the changes that I have highlighted with the red color. Make sure you insert the details of your site there. I had put my blog URL and title but I noticed that some people were just copying and pasting without changing.

Click on Save. If you view your blog, you will find the floating social media button. If you do not want to have a floating button but instead you would like to have a static one, check out this post on how to add social networking button on sidebar.

"Dont forget to subscribe,join my site for new Games and softwares Updates,and to leave comments!"