1

So...on a site I'm working on, there's a Facebook "Like" button that's supposed to turn gray after you click it, and to un-like you click the "X" in the grayed-out "Like" button.

Thing is...it doesn't work properly. In IE9, as soon as you click "Like," the "like" button becomes a small text box that, upon closer examination, is actually a Facebook comment window that attempts to fit in the slot! In Firefox and Safari (each on Windows 7), if you click "Like," the button turns gray as it should, but sometimes (seemingly randomly), if you try to "unlike" by clicking the "X," it becomes the very top of my FB profile pic, and again it appears to try to cram a Facebook window into that slot.

I do NOT want a Facebook comment window or ANYTHING -- I just want the FB "Like" button to toggle.

As per the FB developer info, I have this before the Javascript:

<div id="fb-root"></div>

Right after that, I have:

(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

The code around the button, again as per the FB developer page, is:

<div class="fb-like" data-href="http://www.facebook.com/(page to be liked)" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

The site is not online yet, so I can't really provide a link so you can try it, nor can I put it up online somewhere right now.

Also, the original code had the above-mentioned Javascript but at the end of the js.src assignment was an appid. Removing that made no difference.

There's also a link to Twitter that uses similar variables, but I tried removing that all together to no avail; thought maybe it was interfering.

What else should I be on the lookout for??

(BTW, I cannot reproduce the issue in Chrome or Opera. In fact, in Opera, the rendering is kind of slow. It looks like this happens: 1) Click "Like." 2) That thing that looks like a text box but is actually a compressed FB comment box appears. 3) The grayed-out "Like" button appears. If you click to disconnect, the same thing happens in reverse. I'm starting to think this might be a bug on Facebook's end rather than mine.)

Cœur
  • 37,241
  • 25
  • 195
  • 267
dauber
  • 330
  • 6
  • 20

1 Answers1

2

Well, I found out how to solve this problem on the Internet Exploder end, at least!

The problem is actually how Facebook renders the Like button. From what I can tell, here's what happens: 1) User clicks "Like." 2) User may have to log in to Facebook and "confirm" the Like. 3) Facebook logs the user in and marks user as "Like"-ing the page. 4) Facebook flyover appears. 5) "Like" button turns gray.

It's that fourth step that's the problem, partly because of the div tag in which we embed the "Like" button. The CSS we have specifically sets the overflow to "hidden," which means that anything that doesn't fit in the space of the "Like" button gets blocked out. So theoretically the flyover shouldn't be visible at all as it goes outside the bounds of the "Like" button. However, it seems that some browsers basically render ALL of the content (including the flyover), then push that content to the very end of the div tag (in other words, the lower-right corner of the comment box), and as a result, the "Like" button is pushed out completely, and THAT is treated as overflow and is therefore hidden.

Now, what I'm finding is that it seems that steps 4 and 5 tend to be in a race to see which step can get done first! If step 4 happens first, then the last thing that renders is the gray "Like" button – which is what I want. But if step 5 happens first, the last thing that renders is the comment box, a portion of which is now visible where I need to have the grayed-out "Like" button. I figured that if I actually force the entire Facebook box (via div tag) to go away, then have it come back, the rendering would reset and I'd get what I want. And it DOES work - provided I put in a delay of at least 1 millisecond, or else step 5 will be done before step 4 is done. THIS seems to have solved the issue that exists with IE. The only thing is that for a very, very tiny fraction of a second, one can actually see the Facebook button disappear, a Twitter button we have to its left scoot over to the right, and then back to the left when the FB button comes back.

Also, this fix won't really do much to fix the aforementioned issue in Firefox: in Firefox, users can still click while the button is in the middle of rendering. (It takes a second.) If the user tries to un-"Like" before the button is finished rendering, the user will get that portion of the comment box. This appears to be completely on Facebook's end and unfortunately means that it's beyond my control. All I can do is hope that the average user won't be so trigger-happy with the mouse button!

This isn't a 100% solution, but it's a huge improvement over where I was before!

dauber
  • 330
  • 6
  • 20