adding facebook like buttons dynamically after loading

Question

I am attempting to add like buttons to a page using the standard like button code as proided in the fb documentation:

https://developers.facebook.com/docs/plugins/like-button/

This is causing extremely slow loading due to the number of buttons I would like to add.

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.

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.

I included the required code inside the body tag

<div id="fb-root"></div>
<script type="text/javascript">
    (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&appId=************";
        fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
 </script>

The fb-like code I am using is the one generated by the documentation:

<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"></div>

I have tried adding a button this way:

   $(".myitem").append('<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"></div>');

UPDATE:

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.

Mike Vranckx · Accepted Answer · 2013-11-17 20:04:01Z

28

To force the refresh / rendering of the Like button, you can use FB.XFBML.parse(); which go through the whole DOM document.

If you only want to go through a part of the document, you can pass a DOM object (which is for example a container element with 1 button).

FB.XFBML.parse(document.getElementById('containerX'));

answered Nov 17, 2013 at 20:04

Mike Vranckx

5,5973 gold badges27 silver badges28 bronze badges

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

1 Comment

Liam Over a year ago

Note that you don't pass the fb-like div to FB.XFBML.parse(), as @Mike says, you pass its parent!

Collectives™ on Stack Overflow

adding facebook like buttons dynamically after loading

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related