White box appears under the like button - facebook

When testing the like button on my page - I notice once pressed it shows a white box under it (where photos should be - although i have diabled that function). It can be removed by refreshing the page but i find this unsightly and covers vital content from the page.
Is there a way of stoping this happening?

Most likely relates to this known issue: http://developers.facebook.com/bugs/293075054049400.

Related

Facebook like button bug on page load

I have an irritating bug with the Facebook like button. When my page is loading, my share buttons (Facebook like, Tweet, +1 buttons) will start on the left side. Then they will appear in the middle of the page. And finally when the loading is finished, they will appear in the correct position on the left side again.
The shifting of the share buttons all over the page is kind of annoying and looks unprofessional, even though they end up at the correct position on the left side when the page is done loading.
I believe this is related to the Facebook like button. I have tested this in IE and Chrome in Windows. I have also tested this in Safari on IPhone. All browsers seem to have the same problem.
You can see the bug here:
http://www.alphabanter.com/
Is there any way to fix this?
I figured it out. Looks like width=450 was causing the problem. I removed width=450 and the Like button now stays on the left side of the page and does not jump around anymore. Maybe there is a deeper reason why width=450 causes problems for my page but at least it works now.

facebook share dialog gets cropped

The problem is that my like button is quite at the bottom at the page,
And when someone clicks the like button, the dialog just gets cropped,
and I just can't do anything with it.
Did anyone have a similar problem?
The only way to fix this is by using some CSS to your page to move the dialog box. This is kind of a hack, but its the only way to really do what you want. The only downside is that the tiny triangle in the top left corner of the dialog will seem out of place.
One other option that does not involve moving the dialog is to make your page slightly longer.

How to achieve slideToggle effect similar to facebook "New Stories" button with jQuery?

As you may know not long time ago facebook added several new features. One of them was a "New Stories" button which when clicked expands (with what I guess is a slideToggle effect) and shows new stories.
Here is the button I am talking about:
I would like to know How to achieve same slide / toggle effect and fade in effect that comes in after this button is clicked, with a help of jQuery.
I tried searching for this on internet, but all effects I found were regular slideToggle effects, I mean they started showing div from top and slided down to it's bottom (here is what I mean by regular content http://jsfiddle.net/TwxB4/), where as one facebook uses starts from the bottom of the hidden div and sort of slides to the top of it. (You will see what I mean if you check it on facebook).
Edit: I am only looking for a slideToggle effect and nothing else, I want to be abble to expand and shrink hidden div when user clicks on the link that lunches the effect.
Edit: Here is an illustration of the effect I'm looking for:
This example works the way you described, showing bottom content first:
http://jsfiddle.net/SBLNn/16/
Also full screen view here:
http://jsfiddle.net/SBLNn/16/embedded/result/
They may also do it by having the overflow of the feed hidden, and then setting a negative margin on the inner feed wrapper, then when you click they just animate that negative margin down to 0.
Does this works for you
http://jsfiddle.net/wb7h6/1/
updated version
http://jsfiddle.net/wb7h6/9/ I hope this is what you need
You want slideToggle() I think. See this jsFiddle.

Facebook "like" dialog box (XFBML) overflows normal page boundary, how to flip it?

The dialog that pops up after a user clicks "like" on my (in development) website overflows the main content area of my website:
Is there any way to flip it around so that it pops up to the left of the like button instead of to the right?
Thanks in advance.
No, this is not possible. Even if there are hacks for this, it won't be legal.
You just need to keep it the way it is, or change its place.

How to show loading animation with fancybox?

I got fancybox working but I have this problem:
First, I can't make the loading image appear. And second, if I use a link to show an image on click, sometimes it fails to show it, because of the time it takes to load it (if it were an image instead of a link, it would have been already loaded by the browser, that's why it never fails with images).
In summary, I have a link, when I click it a modal window with an image should appear. Instead, a white box appears. If I reload the page, sometimes the image appears, sometimes it doesn't.
If it is working some of the time, maybe the problem is elsewhere? Is the picture you are loading particularly large, if you are shift refreshing I have experienced such effects in the past.