Search code examples
jqueryxmlajaxfacebookxfbml

Facebook javascript like button (xml, xfbml)

My problem is as follow:

when i will load a facebook xml tag (see below) in a with Ajax loaded page will it not be shown.

The table2.php page will load by Ajax in the follow div: <div id="update_div"></div>, but it will not be shown.

This is the tag i will use for printing a like button etc: <fb:like href="http://website_url.nl" send="true" layout="button_count" width="450" show_faces="false"></fb:like>

I cant find any solution for this problem and hope that anyone can help whit tis problem.

My page is code ass follow:

index.php

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" >
   <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
   <script type="text/javascript" src="/js/jquery.js"></script>
  <head>
   <script type="text/javascript">
   $.setDivContentAjax = function(){        
            var url = window.location.hash.replace( "#", ""); 
            var paramaters = null;
            try
            {
                var parameters = JSON.parse('{"' + decodeURI(url.replace(/&/g, "\",\"").replace(/=/g,"\":\"")) + '"}');
                //console.log(parameters);
            }
            catch(error) 
            {
            }

            targetdiv = $('#update_div');

            targetdiv.hide();
            $('#loading-image').show();

            $.ajax({
              url: '/includes/table2.php',
              context: targetdiv,
              type: "GET",
              timeout:18000, 
              data: parameters,
              success: function(data) {
                window.setTimeout(function() {$('#loading-image').hide(); targetdiv.html(data); targetdiv.show();} ,300);
              }

            });    
        }

        $(document).ready(function ()
        {   
            $.setDivContentAjax();

            $(window).bind('hashchange', function() {
                $.setDivContentAjax();
            });
        });
    </script>  
   </head>
  <body>
      <div id="loading-image" style="display:none; padding: 50px 0 50px 0; text-align: center;"><img src="/img/ajax-loader-circle.gif"></div>
  <div id="javascript" style="display:none;"></div>
  <div id="update_div"></div>
  </body>
</html>

table2.php

<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/nl_NL/all.js#xfbml=1&appId=APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
 </script>
 <fb:like href="http://website_url.nl" send="true" layout="button_count" width="450" show_faces="false"></fb:like>
Solution

  • This really pretty easy and well documented :) Just use the FB.XFBML.parse method of the JS-SDK to re-parse the while document or certain parts of the DOM!

    https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/