Add 3 in 1 Floating/Slide out Google Plus/Twitter/Facebook Like/Fan/Followers Box in Blogger

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.


3 in 1 Social Sharing Slide Widget Demo


Live 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

Widget Generator

Like it? Share it.

69 comments

13 April 2012 at 10:17

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.....

13 April 2012 at 10:34 Author

@Ritesh OzaUse this script <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

13 April 2012 at 21:40

@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......

13 April 2012 at 21:46

@sonu

For menu this script i am using...

13 April 2012 at 21:47

@sonu

For menu this script i am using...

13 April 2012 at 23:27

How to add this widget on left side of blogger??

13 April 2012 at 23:34 Author

@AnkurThis gadget does not move from right to left

14 April 2012 at 10:10

@sonu

Thank u very much...... Thanks a lot !!!

14 April 2012 at 10:38 Author

@RiteshWelcome!

15 April 2012 at 20:48

@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.....

23 April 2012 at 06:54 Author

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..

23 April 2012 at 07:12 Author

@Anil ParmarYou have add space between your facebook username. Reinstall the widget by typing GsmTricksbook in facebook username

26 April 2012 at 01:19

How to change google + widget width ?

26 April 2012 at 01:47 Author

@GANIDU tmwidth of google + widget cannot be changed

26 April 2012 at 10:44 Author

this widget not working, I mean its showing on my blog but not opening with mouse moving like your is working..

26 April 2012 at 11:22 Author

@demandbloggerAdd this script <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> above </head>

27 April 2012 at 10:07 Author

I have already added it but still same problem facing..

4 May 2012 at 22:40 Author

hi sonu, i had a problem.....Widget works on my homepage fine. but, when i open a post,slider not opening..please help me....ur blog is Awesome
my blog url: newtrays.blogspot.com

5 May 2012 at 01:52

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......

5 May 2012 at 07:46 Author

@viral_94Fixed and sent back to you

5 May 2012 at 07:55 Author

@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

30 May 2012 at 08:52 Author

@joshua121595 You already added 4 in 1 floating widget and it is working fine

8 June 2012 at 00:26

HELLO SIR THIS IS MY BLOG I HAVE A PROBLEM WITH THIS WIDGET .WWW.TECHROCKZ.IN

PLZ RLY ME EMAIL:-SIVASANKARNAIDU777@GMAIL.COM

8 June 2012 at 01:42 Author

@SIVA SANKAR You haven't put correct facebook username and Twitter username

8 June 2012 at 09:42

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

9 June 2012 at 02:11 Author

@SIVA SANKAR Your twitter username is not valid

9 June 2012 at 15:40

my twitter username is TECHROCKZ7

10 June 2012 at 00:30 Author

@SIVA SANKAR There was a problem with your facebook and twitter. I have tried many times but it does not work

Anonymous
14 June 2012 at 22:34

Please Help me

FB: pcamcinfotech
T: pcamcinfotech
G: 103900418817919778748

Send a code on
pcamcinfotech@gmail.com

thanks

Anonymous
20 June 2012 at 04:26

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?

20 June 2012 at 05:38 Author

@Andros Diablo Get facebook username from here http://facebook.com/username

21 June 2012 at 10:12

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......

21 June 2012 at 10:23

HEY IT IS WORKING NOW
BUT GOOGLE PLUS IS NOT WORKING!!
SORRY TO DISTURB U !!
BUT PLZ CHECK THE MAIL!!

22 June 2012 at 07:01 Author

I am not able to get anything in googleplus and my id is 114313493931178940986..plz help me

4 August 2012 at 00:50

@ admin sonu


can u please give me codes of ur template.


I need it, plzz tell me, as soon as possible

5 August 2012 at 11:39

It's cool, but sometimes I've got blank Google+ tab or "undefined" values in Twitter tab...

8 August 2012 at 04:21 Author

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..

8 August 2012 at 07:33 Author

@Asit Sonani You have put wrong facebook username in widget generator. Reinstall it by putting your correct facebook username

9 August 2012 at 11:41 Author

Got installed in no time but only twitter is working. Facebook and google+ is empty.
http://sportsbongo.blogspot.in

9 August 2012 at 11:58 Author

@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

16 August 2012 at 00:00 Author

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.

16 August 2012 at 05:38 Author

@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

17 August 2012 at 01:07 Author

When i applied this widget but after doing that border of my images are gone..
Why is this happened?Any solution?

17 August 2012 at 01:22 Author

@sonu
still its not working.

17 August 2012 at 02:18 Author

@sonu
after using this widget borders of images are not working..
Why ?? any solution?

17 August 2012 at 09:21 Author

@Asit Sonani Give me your email id i will send the code to you

17 August 2012 at 09:22 Author

@Rutwa Patel It's working on your website

17 August 2012 at 22:53 Author

@sonu
asitsonani@gmail.com
thank you for your reply please send me code on email id given above..

17 August 2012 at 23:49 Author

asitsonani@gmail.com

19 August 2012 at 08:10 Author

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?

19 August 2012 at 09:59 Author

@Asit Sonani Now this widget works fine. I think its your browser problem

23 August 2012 at 07:48

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

28 August 2012 at 07:37 Author

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

28 August 2012 at 08:27 Author

@sksubhash k You haven't add this widget to your blog. First add it your blog, then i will check it

30 August 2012 at 19:40 Author

twitter is not working in my blog.... how can i fixt it?

here's my blog

thegabblemouth.blogspot.com

thank you.

2 September 2012 at 06:35 Author

A priceless widgets from you ..........it's really amazing
thankx a lot from internettrickscorner.blogspot.in

27 September 2012 at 15:27

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.....

29 September 2012 at 02:58 Author

@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

4 October 2012 at 10:30

if i want only facebook tap can give my facebook code ? and what position tu change to my facebook id in that code

thank

4 October 2012 at 10:58 Author

@saranaru Go Here http://www.mybloggertools.org/2012/02/how-to-add-floating-facebook-likebox-in.html

13 October 2012 at 03:01 Author

Really Simply Awsome you r great Yr.......

21 October 2012 at 03:01 Author

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..

21 October 2012 at 03:10 Author

Please Help me

FB: muhammadasadsh
T: muhammadasadsh
G: 102980024509572812342

Send a code on
gumsum2015@gmail.com

thanks

21 October 2012 at 05:09 Author

@M Asad Shahzad When you generate the widget code, find this code and remove it.
<script type='text/javascript'> jQuery(document).ready(function(){ jQuery(&quot;#facebook_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -240}, 500); }); jQuery(&quot;#twitter_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#twitter_right&quot;).stop(true,false).animate({right: -240}, 500); }); jQuery(&quot;#google_plus_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#google_plus_right&quot;).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(&quot;#facebook_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -240}, 500); }); jQuery(&quot;#twitter_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#twitter_right&quot;).stop(true,false).animate({right: -240}, 500); }); jQuery(&quot;#google_plus_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#google_plus_right&quot;).stop(true,false).animate({right: -280}, 500); }); }); </script>

22 October 2012 at 10:14 Author

hi can you explain me with you creates pages with forms
widgets generators as you have on blogger ?

21 January 2013 at 06:03

Widget Generator is not work pls check and inform me for use this generator
my email id is arpitg2@gmail.com

24 April 2013 at 06:10

@ARPIT GUPTAI know its very late reply>but the widget generator is working now

Click to Add a New Comment

  • If you're asking a question click on Subscribe By Email link, on the comment form, to be notified of replies.
  • Do NOT add links to the body of your comment as they will not be published.
  • Only the comments posted in ENGLISH will be approved.
  • If you have a problem check first the comments , maybe you will find the solution there.