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:
<!--SideBar Floating Share Buttons Code Start-->
<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;}
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>
.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>
<!--SideBar Floating Share Buttons Code End-->
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!"
This post was written by: Author Name
Author description goes here. Author description goes here. Follow him on Twitter
Subscribe to:
Post Comments (Atom)
0 Responses to “How to Insert Social Media Buttons on Blogger Blog ”
Post a Comment