Question

I’m using PrettyPhoto lightbox for an image gallery. When the image pops up, Twitter and Facebook buttons appear under it. That’s built into the PrettyPhoto plugin, and it works fine.

The problem is, the Facebook button is the iframe kind (which doesn’t allow the user to enter a comment). I want to replace it with the HTML5 button (which opens a comment box when you click it, instead of just liking).

I want to replace this (standard FB code for iframe button):

<div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href='+pp_real_links[set_position]+'&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:23px;" allowTransparency="true"></iframe></div>

…with this (standard fb code for HTML5 like button):

<div class="fb-like" data-href="instagram.com/the-pic" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false">test text</div>

When I do the replacement, it doesn’t show up in the lightbox. It works anywhere else on the site though.

And yes, I replaced the prettyPhoto css code for .facebook with .fb-like. I also put text in the div to verify it’s showing up in the right place.

I think the root of the problem is that the social link code is defined in the JS; in the PrettyPhoto settings, there’s an attribute called ‘markup’ which stores the html for the lightbox and share buttons. So it’s probably not connecting with the FB JS code.

What’s the solution?

Answer 1

The code you posted (the old iframe one) does not require the use of the facebook javascript sdk since it just loads the iframe.

On the other hand, the html5 code you want to use does need the sdk to render it, you see the fb-like div is just a container in which the sdk inserts a new iframe.

From your code I can’t say if you are loading the js sdk, if not then load/init it as described in the documentation, just be sure to include the xfbml attribute:

FB.init({
    appId      : 'YOUR_APP_ID', // App ID
    channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
    status     : true, // check login status
    cookie     : true, // enable cookies to allow the server to access the session
    xfbml      : true  // parse XFBML
});

If you are already using the js sdk then it should work, unless the like button code is added dynamically after the sdk has finished loading and initializing.
If that’s the case then just use the FB.XFBML.parse method:

FB.XFBML.parse();

// or you can pass the container element:
FB.XFBML.parse(document.getElementById(ELEMENT_ID));