Subscribe:

Ads 468x60px

Showing posts with label social media button. Show all posts
Showing posts with label social media button. Show all posts

Sunday, September 9, 2012

Get Floating Sidebar for facebook, googleplus and other social media buttons


Hi,
I am writing precise and easiest way to understand Social media button on the sidebar, like you can see in the Right of you. As it has to appear in every page/post. So, you need to include the code in layout of your blogspot or css of your website. I am writing for blogspot now.
Step.1) Open your blog in design mode and go to Layout.
Step.2) Add a Gadget. as shown in pic below

Step.3.) copy the code below to the 
<!--SideBar Floating Share Buttons Code Start by http://usefultechtalk.blogspot.in/2012/09/get-floating-sidebar-for-facebook.html-->
<style>
#pageshare {position:fixed; bottom:15%; left:10px; float:left; 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 .sbutton {float:left;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='sbutton' id='gb'><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='sbutton' id='rt'><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='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script><g:plusone size="tall"></g:plusone></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'><script src='http://widgets.digg.com/buttons.js'
  type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><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="
http://usefultechtalk.blogspot.in/2012/09/get-floating-sidebar-for-facebook.html" target="blank"><font color="red">[Get this for your Blog/Site]<font></font></font></a></div></div>
<!--SideBar Floating Share Buttons Code End by http://usefultechtalk.blogspot.com-->

Step.4.) Change the paramters highligted in Green to chagne alignment of plugin. Save the Code in the Add Gadget. and change URL in yellow to your blog/website. Otherwise everytime someone will like or share in your website. My URL get liked or shared :P.
Step.5.) That's it Done !!



{I have 2 suggestions for you: First, Drag the Gadget to the bottom, otherwise you will unnecessarily see a blank gadget in your top of page. Second, Preferably keep the alignment to left  because if you will keep it right, while someone will like/share/+1 to your post the popup will hide to further right that is outside monitor and somehow fit in pageview. that's look ugly.}
[Please like/share/comment if you find it useful !]