CODEWITHSUNDEEP
javascriptfacebook
mingfish_004
mingfish_004

Reputation: 1413

how can I load facebook button after document loaded?

The Facebook button will load at the start of document loaded. But I want to load fb buttons when mouse over div, not at start of document. How can I do it?

And I don't want to use facebook iframe version, as it can not allow me to subscribe to the 'edge.create' event after click like button.

<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/zh_CN/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="box"></div>
<div class="box">
    <!-- 
        when hover box, facebook like button add to this box
        <fb:like href="https://developers.facebook.com/docs/plugins/" layout="standard" action="like" show_faces="true" share="true"></fb:like>
    -->
</div>

<script type="text/javascript">
    $('.box').mouseover(function (){
        // add facebook like button to .box
    });

Upvotes: 0

Views: 209

Answers (1)

chrisboustead
chrisboustead

Reputation: 1563

Try something like this:

$('.box').mouseover(function (){
    $(this).append('<fb:like href="https://developers.facebook.com/docs/plugins/" layout="standard" action="like" show_faces="true" share="true"></fb:like>');
    FB.XFBML.parse(this);
});

You may need to re-subscribe to edge.create after the parse method.

Upvotes: 1

Related Questions