Displaying the 'like' button in a Javascript pop-up

Question

My web site uses iBox (http://www.enthropia.com/labs/ibox/) to display information that I would like users to be able to share using the 'Like' and 'Send' buttons.

I have included the proper javascript and html for the 'like' button on both the parent page and the pop-up page, but the 'like' button itself (the xfbml in the pop-up page) does not appear at all.

I have tried different combinations of including the javascript and the fb-root div in both the parent and pop-up pages, but nothing seems to be working. Has anyone done this? Is there something else I should try? Viewing the pop-up page directly does reveal the 'like' button, but it does not show up in the pop-up.

Code from the pop-up HTML:

<span id="fblikebutton">
    <fb:like action="recommend" show_faces="true" width="450" send="true" href="http://..."></fb:like>
</span>
<script type="text/javascript">
    FB.XFBML.parse(document.getElementById('fblikebutton'));
</script>

Semun Lee · Accepted Answer · 2011-12-22 06:40:19Z

1

If you are adding popup dynamically, you might need FB.XFBML.parse() call after you add the XFBML like button.

http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

answered Dec 22, 2011 at 6:40

Semun Lee

1912 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1111164 Over a year ago

Hmm, I added that call to the popin HTML surrounded by <script> tags after the 'like' button (and even tried putting the button in a span and referring to its ID), and it seems to execute, but still no button. Any other ideas? Thanks so much for your fast help; I had definitely not seen that before.

user1111164 Over a year ago

Sure. In the root page, I have links like this: <a href="http://********.com/popin/special.php?..." rel="ibox&height=450" class="l1 info"> In the HTML for the pop-up, the facebook like code is as follows:

<span id="fblikebutton"> <fb:like action="recommend" show_faces="true" width="450" send="true" href="http://..."></fb:like> </span> <script type="text/javascript"> FB.XFBML.parse(document.getElementById('fblikebutton')); </script>

Everything else seems to check out. I put the javascript function code and fb-root div in the parent page.

user1111164 Over a year ago

Actually, I put that command as an action for a button and it worked--I think the command just wasn't being executed. Thanks so much for your help!

Ar3s Over a year ago

@SemunLee : You sir saved my day, I had the same problem of a FB-Like button "magically" showing (or not) when displayed in a light-box. The button's context must be displayed before the button itself is built by fb api. Now with that neat little function call strategically placed you solved my problem. A question yet remains ... Why does this button need to be rendered in an "already displayed" context to get it's proper size ?

Collectives™ on Stack Overflow

Displaying the 'like' button in a Javascript pop-up

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related