Append fb-like button using getScript()

Question

<script type="text/javascript">
    $.getScript('http://connect.facebook.net/sv_SE/all.js#xfbml=1', function(){
        $('body').append('<div id="fb-root"></div><div class="fb-like" data-href="http://www.google.se" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></div>');
    });
</script>

No button is showing. Isnt this the correct way to use getScript?

I think you need to pass app id also. For e.g. http://connect.facebook.net/en_US/all.js#xfbml=1&appId=<<your app id>> — Gagandeep Singh
– Gagandeep Singh, Commented Feb 4, 2012 at 10:31

DMCS · Accepted Answer · 2012-02-04 10:43:33Z

1

You should load the DIV into the DOM first, then load the script in to parse the DOM objects.

<script type="text/javascript">
    $('body').append('<div id="fb-root"></div><div class="fb-like" data-href="http://www.google.se" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></div>');
    $.getScript('http://connect.facebook.net/sv_SE/all.js#xfbml=1', function(){

    });
</script>

answered Feb 4, 2012 at 10:43

DMCS

31.9k14 gold badges73 silver badges104 bronze badges

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

Comments

techfoobar · Accepted Answer · 2012-02-04 10:44:28Z

0

The DIVs fb-root and fb-like need to be already in the DOM before the FB like button script executes. The script looks for a DIV with id=fb-root and attempts to insert the FB like button inside it. In your case, you are adding the DIV after the script is downloaded and executd. As a result, no button will appear.

It should work if you change your code to something like:

// append fb-root and fb-like DIVs (with display: none) before getting the FB script
// or even better, add them as part of your page itself with display: none
$('body').append('<div id="fb-root" style="display: none"></div><div class="fb-like" data-href="http://www.google.se" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana" style="display: none"></div>');

$.getScript('http://connect.facebook.net/sv_SE/all.js#xfbml=1', function(){
    $('#fb-root').show(); // show the DIVs
    $('#fb-like').show();
});

answered Feb 4, 2012 at 10:44

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

2 Comments

CoderFromOuterSpace Over a year ago

No need to hide the fb-root as it never displays anything anyways from what I've seen.

techfoobar Over a year ago

@CoderFromOuterSpace - +1 Yes, hiding fb-root is not really necessary. Put that there more to demonstrate the idea.

CoderFromOuterSpace · Accepted Answer · 2012-02-04 10:52:13Z

0

From the like button dox You can use javascript code like this to do async loading of the scripts.

<div id="fb-root"></div>
<script>
(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/sv_SE/all.js#xfbml=1&appId=113830492072210";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

answered Feb 4, 2012 at 10:52

CoderFromOuterSpace

4512 silver badges9 bronze badges

Collectives™ on Stack Overflow

Append fb-like button using getScript()

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related