Dynamically show/hide Facebook like button

Tag: facebook , facebook-like Author: louhuo Date: 2010-08-11

Here is my problem:

I have successfully included the Facebook Like button on my test page. There are several items per page and there is a facebook like button per item. I am using the XFBML version.

Everything runs fine if the buttons are present in the page on load. However, Now I want to show the buttons per item only on mouseover on the container element having the item and the button.So, the fblike button html is hidden on page load and I added some code like this to show them on mouse-hover:

    $(content).mouseenter(function(){
      $(this).find('.fblike').show(); // toggle the display of the button

      FB.XFBML.parse( this ); //re-parse xfbml
    });

The button shows up perfectly on mouse-hover on the container now but never works. Clicking the button doesn't do anything.

Has anyone run across this problem before ?

EDIT:

.fblike is a class on a div containing the fb:like tag.

Re-parsing is required because on page-load, each div with the class .fblike is hidden. The Facebook JavaScript SDK doesn't parse the xfbml tags inside elements which are hidden.

I have made a solution that works, without any additional re-parsing (maybe FB has changed the SDK). Have you yet solved the problem? My problem right now is that it parses and loads every iframe when the content has loaded, even though each button is hidden, and it slows the page load.
did it work..??

Other Answer1

I think you problem is in this variable scope. Try this:

FB.XFBML.parse($(this));

Because you don't need this (anonymous function being called) but element (on which this anonymous function was called).