Few weeks ago i have introduced a 2 in 1 Floating/Sliding Twitter/Facebook Like/Fan/Followers Box for Blogger, now again this time i came with a new widget. If you don't have a space for your social subscribing widgets then don't worry.Here I have a solution with this problem.Hide and show them out with smooth jQuery slide out hover effect.This 3 in 1 slide out widget contains a floating facebook like box, twitter fan box,Google +1 widget, means all in one :). Here I am providing a widget generator so that you don't need to edit any code,just change my username with yours hit the generate button and finally add the widget.
Live Demo
Widget Generator
3 in 1 Social Sharing Slide Widget Demo
How to Add 3 in 1 Social Sharing Slide Widget To Blogger
- Go to Blogger Dashboard
- Click on DropDown Menu and select Template
- Backup your Template before making any changes to your blog
- Now Click on Edit HTML --> Proceed --> Expand Widget Templates
- Press Ctrl + F and search the code shown below
</head>
- Copy the code shown below and paste Before/above </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- If you already have install this script in your template then there is no need to add this
- Now Click on Widget Generator button shown below
- Then Replace my twitter/facebook username with your twitter/facebook username
- Get your own Google+ API key
- Go to https://code.google.com/apis/console#access
- Login and click "Create Project".
- Under service list, click "off" button next to "Google+ API" to turn it on.
- Accept the agreement.
- From the left menu, Go to "API Access" and copy your API key and then paste it in widget generator
68 comments
HI.... My Blog is http://techguru2012.blogspot.in/. As u can see i have dropdown Menu. When i try this widget my menu is disable ....
Inshort i cant enable your this widget .... plz help me.....
@Ritesh OzaUse this script <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
@sonu
Thnks for your reply.... But when i am trying to do that your this widget works... But my jquery menu which contain mobile,laptop etc... that disable.... Plz help me ... I want your this 3 in 1 widget & my menu both working properly..... Plz help me out......
@sonu
For menu this script i am using...
@sonu
For menu this script i am using...
How to add this widget on left side of blogger??
@AnkurThis gadget does not move from right to left
@sonu
Thank u very much...... Thanks a lot !!!
@RiteshWelcome!
@sonu
I have one question.... May i use that 3 line script in other jquery i want to use... I want to use Smoothing going to TOP button on my Blog... But when i am trying to do that my other jquery is not working.... Plz help me... thanks for your support.....
Hi Friend,
I got error in facebook button "Could not retrieve ID for the specified page. Please verify correct href was passed in"
please help..
@Anil ParmarYou have add space between your facebook username. Reinstall the widget by typing GsmTricksbook in facebook username
How to change google + widget width ?
@GANIDU tmwidth of google + widget cannot be changed
this widget not working, I mean its showing on my blog but not opening with mouse moving like your is working..
@demandbloggerAdd this script <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> above </head>
I have already added it but still same problem facing..
hey its showing on my blog but not opening with mouse moving like your is working..
http://androidianbuzz.blogspot.in/
i have already mail u my .xml templete with the soo many jquery script added plz edit it and make it work......
@viral_94Fixed and sent back to you
@new eraRemove this script from your template
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
it is very nice widget but it is not working in my blog, i sent u my xml and hope to help me
hello, its showing on my blog but not opening with mouse overing like the way yours is,..please help me..my test blog is at joshua121595.blogspot.com
@joshua121595 You already added 4 in 1 floating widget and it is working fine
HELLO SIR THIS IS MY BLOG I HAVE A PROBLEM WITH THIS WIDGET .WWW.TECHROCKZ.IN
PLZ RLY ME EMAIL:-SIVASANKARNAIDU777@GMAIL.COM
@SIVA SANKAR You haven't put correct facebook username and Twitter username
hey then this is my fb profile name provide me the code
SIVASANKARNAIDU777
TWITTER
SIVASANKARNAID7
G+ URL
https://plus.google.com/101488073145692140868
PLEASE MAKE ME CODE
@SIVA SANKAR Your twitter username is not valid
my twitter username is TECHROCKZ7
@SIVA SANKAR There was a problem with your facebook and twitter. I have tried many times but it does not work
Please Help me
FB: pcamcinfotech
T: pcamcinfotech
G: 103900418817919778748
Send a code on
pcamcinfotech@gmail.com
thanks
Can i not have only facebook and google+ ? and also will you tell me which username do i use as in my facebook profile or my fan page's name? do i have to first subscribe on the facebook plugin?
@Andros Diablo Get facebook username from here http://facebook.com/username
hey its showing on my blog but not opening with mouse moving like your is working..
http://androidianbuzz.blogspot.in/
i have already mail u my .xml templete with the soo many jquery script added plz edit it and make it work......
HEY IT IS WORKING NOW
BUT GOOGLE PLUS IS NOT WORKING!!
SORRY TO DISTURB U !!
BUT PLZ CHECK THE MAIL!!
I am not able to get anything in googleplus and my id is 114313493931178940986..plz help me
@ admin sonu
can u please give me codes of ur template.
I need it, plzz tell me, as soon as possible
It's cool, but sometimes I've got blank Google+ tab or "undefined" values in Twitter tab...
I have done this with my website but its facebook plugin is not working..
it displays "Could not retrieve the specified page. Please verify correct href was passed in."
plz plz plz help me..
@Asit Sonani You have put wrong facebook username in widget generator. Reinstall it by putting your correct facebook username
Got installed in no time but only twitter is working. Facebook and google+ is empty.
http://sportsbongo.blogspot.in
@Biswajyoti Mukherjee I have checked your blog facebook is working and it is a default problem for google plus, wait for some time it works automatically
Why my google+ is not working till date.it was working when i tried this very first time...
Now your websites google+ is working fine
but mine is emty.is there any change to make?
plz help me.
@Asit Sonani Reinstall this widget, it's not working because google plus api problem . Now i update the post. You have to use your own google plus api
When i applied this widget but after doing that border of my images are gone..
Why is this happened?Any solution?
@sonu
still its not working.
@sonu
after using this widget borders of images are not working..
Why ?? any solution?
@Asit Sonani Give me your email id i will send the code to you
@Rutwa Patel It's working on your website
@sonu
asitsonani@gmail.com
thank you for your reply please send me code on email id given above..
asitsonani@gmail.com
Now this widget displays at bottom of the page like yours..
its not working well..after every 2 days i m facing some problems with this.
should i remove this widget?
@Asit Sonani Now this widget works fine. I think its your browser problem
Please send me it in .xml format to shreyankmankani20@gmail.com
Its not working for me, when I hover it...Its just an still image..plz help
Its displaying in my blog but not working, link:www.al4-blog.blogspot.com
I used all that correct but not working email id subhash.sboss100@gmail.com
@sksubhash k You haven't add this widget to your blog. First add it your blog, then i will check it
twitter is not working in my blog.... how can i fixt it?
here's my blog
thegabblemouth.blogspot.com
thank you.
A priceless widgets from you ..........it's really amazing
thankx a lot from internettrickscorner.blogspot.in
fb n g+ r not working in my blog
fb users : manimishratipsandtricks
g+ : https://plus.google.com/101772357246389747045
email : mani89mishra@gmail.com
plz help me.....
@MANI MISHRA Facebook is working in your blog and for google plus you haven't add google api . to add google api read full post
if i want only facebook tap can give my facebook code ? and what position tu change to my facebook id in that code
thank
@saranaru Go Here http://www.mybloggertools.org/2012/02/how-to-add-floating-facebook-likebox-in.html
Really Simply Awsome you r great Yr.......
HI.... My Blog is http://muhammadasadsh.blogspot.com/. As u can see i have dropdown Menu. When i try this widget my menu is disable ....
Inshort i cant enable your this widget .... plz help me..
Please Help me
FB: muhammadasadsh
T: muhammadasadsh
G: 102980024509572812342
Send a code on
gumsum2015@gmail.com
thanks
@M Asad Shahzad When you generate the widget code, find this code and remove it.
<script type='text/javascript'> jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -240}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -240}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -280}, 500); }); }); </script>
Now copy the code shown below and paste it below ]]></b:skin>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -240}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -240}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -280}, 500); }); }); </script>
hi can you explain me with you creates pages with forms
widgets generators as you have on blogger ?
Widget Generator is not work pls check and inform me for use this generator
my email id is arpitg2@gmail.com
@ARPIT GUPTAI know its very late reply>but the widget generator is working now
Click to Add a New Comment