Many blogger friends asked me on how to add Blogger social media sharing button like what you can see in my blog. The button will help you readers share your posts faster and it look clean in your blog. In this tutorial, I only put Facebook Share Button, Twitter Share and Google plus in the widget. You can add any social button according to your preference. The button has help me since last year increasing my blog traffic and hopefully it will help your blog to.
How to add the Social Media sharing button:
- Login to your Blogger account.
- Go to Design and Page Elements/layout.
- Click "Add A Gadget".
- In Add A Gadget window, select "HTML/Javascript" .
- Copy the code below and paste it inside the content box.
- Save.
<style> /*-------lunaticg Floating Sharing Widget------------*/ #floatdiv {
position:fixed;
bottom:15%;
margin-left:-80px;
z-index:10;
float:left;
padding-bottom:2px; }
#mbtsidebar {
background:#fff;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding-left:5px;
width:60px;
margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-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="floatdiv">
<div id="mbtsidebar">
<table cellpadding="1px" cellspacing="0">
<tr>
<td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="malaysiacoin">Tweet</a><script type="text/javascript"
src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>
<tr>
<td style="padding:5px 0 2px 0;">
<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>
</td>
</tr>
<tr>
<td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
<g:plusone size="Tall" expr:href="data:post.url">
</g:plusone></td>
</tr>
<tr>
<td>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://lunaticg.blogspot.com/2011/10/blogger-social-media-sharing-button.html">Get this</a></div>
</div>
</td>
</tr>
</table>
</div>
</div>
--------------------------------------------------------------------------------
Join (Like) my fan page on Facebook at http://www.facebook.com/malaysiacoin and feel free to leave a suggestion, request or ask a question about the blog there. And get the latest news about my blogs on the Facebook fan page. Remember to become a fan on Facebook now!
--------------------------------------------------------------------------------
