title: Getting Facebook Like button (generated by JS) to appear
body: <p>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.</p>
  
  <p>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).</p>
  
  <p>I want to replace this (standard FB code for iframe button):</p>
  
  <p><code>&lt;div class="facebook"&gt;&lt;iframe src="//www.facebook.com/plugins/like.php?locale=en_US&amp;href='+pp_real_links[set_position]+'&amp;amp;layout=button_count&amp;amp;show_faces=true&amp;amp;width=500&amp;amp;action=like&amp;amp;font&amp;amp;colorscheme=light&amp;amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:23px;" allowTransparency="true"&gt;&lt;/iframe&gt;&lt;/div&gt;</code></p>
  
  <p>...with this (standard fb code for HTML5 like button):</p>
  
  <p><code>&lt;div class="fb-like" data-href="instagram.com/the-pic" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"&gt;test text&lt;/div&gt;</code></p>
  
  <p>When I do the replacement, it doesn't show up in the lightbox. It works anywhere else on the site though.</p>
  
  <p>And yes, I replaced the prettyPhoto css code for <code>.facebook</code> with <code>.fb-like</code>. I also put text in the div to verify it's showing up in the right place.</p>
  
  <p>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.</p>
  
  <p>What's the solution?</p>