Note that there are some explanatory texts on larger screens.

plurals
  1. POadding facebook like buttons dynamically after loading
    primarykey
    data
    text
    <p>I am attempting to add like buttons to a page using the standard like button code as proided in the fb documentation:</p> <p><a href="https://developers.facebook.com/docs/plugins/like-button/">https://developers.facebook.com/docs/plugins/like-button/</a></p> <p>This is causing extremely slow loading due to the number of buttons I would like to add.</p> <p>To get round this I was hoping to load the buttons as needed using jquery, but if I add the button code this way, they are appended to the the correct location (visible in the developer tools elements window) but the buttons do not appear.</p> <p>Is there anyway to add these buttons dynamically? I am guessing it is not working because the buttons can't be added after initiation but I have no idea how to get around this.</p> <p>I included the required code inside the body tag</p> <pre><code>&lt;div id="fb-root"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; (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_GB/all.js#xfbml=1&amp;appId=************"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); &lt;/script&gt; </code></pre> <p>The fb-like code I am using is the one generated by the documentation:</p> <pre><code>&lt;div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="true"&gt;&lt;/div&gt; </code></pre> <p>I have tried adding a button this way:</p> <pre><code> $(".myitem").append('&lt;div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="true"&gt;&lt;/div&gt;'); </code></pre> <p>UPDATE:</p> <p>I have tried firing FB.XFBML.parse(); after appending the new buttons, but this refreshes all of the buttons on the page not just the newly appended ones.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload