Saturday, May 12, 2012

How to Insert Social Media Buttons on Blogger Blog

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;}
.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>
<!--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.

Related Post
How to Add Pinterest Button on a Blog
Add Media Buttons at End of Blog Post
Add Social Media Share Button Below Post Title
 

8 comments:

  1. This is something that i will try for sure on my blog. good job dear.

    ReplyDelete
    Replies
    1. Just make sure that you insert the URL of your page and title on the last part of the script. I noticed before I highlighted it with red, that most people were not changing it which has brought me alot of sitewide links (not good for SEO).

      Delete
  2. Hello,
    This is a very beautiful blog and very nice blog post.. we want come back on this blog.... Thanks

    ReplyDelete
  3. thanks for this... a great help for a newbie like me. and what a nice blog site. very informative. i will make a habit of visiting here for more tips and info. thanks again

    ReplyDelete