CODEWITHSUNDEEP
phphtmlcssfacebook
rockit
rockit

Reputation: 3796

Lazy loading facebook like buttons - Why dont they appear

I am creating a page for a client, and first - we load 10 results directly onto the page. Those results render the facebook like button perfectly. Looking at the code I see that the first 10 resutls have the facebook embedded page content directly where I expect it to be and I see the facebook like button!

Now. I click the bottom link of the page, which loads 10 more results. THese 10 more results use the exact same code as the previous 10, however the facebook like button does not appaer. When I look at the code I see that the html is simply the copy-paste of the original code, rather the embedded page in the first 10 examples.

My best guess is that by lazy loading those buttons onto the page, they are not being processed in the same way. But I don't know how to fix it...

Any thoughts on what I can do here?

Upvotes: 0

Views: 567

Answers (2)

Debajyoti Das
Debajyoti Das

Reputation: 2148

You can invoke the script portion of the FB like button each time the content div is loaded.

<script>
  function lazyload(){
    var wt = $(window).scrollTop();
    //* top of the window
    var wb = wt + $(window).height();
    //* bottom of the window

    $(".content").each(function(){
      var ot = $(this).offset().top;
      //* top of object (i.e. content div)
      var ob = ot + $(this).height();
      //* bottom of object
      var script = document.createElement( 'script' );
      script.type = 'text/javascript';
      script.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1&appId=15496180XXXX';

      if(!$(this).attr("loaded") && wt<=ob && wb >= ot){
        //$(this).append(script);
        document.body.appendChild(script);
        $(this).attr("loaded",true);
        FB.XFBML.parse();
      }
    }
                  );
  }
  $(document).ready(function(){
    $(window).scroll(lazyload);
    lazyload();
  }
                   );
</script>

As pointed out but @alexl you have to call FB.XFBML.parse(); each time you're loading the like button script dynamically.

Upvotes: 0

alexl
alexl

Reputation: 1914

try calling FB.XFBML.parse(null,FB.Canvas.setSize) after doing next page

Upvotes: 2

Related Questions