How to load these facebook plugins on Dom Ready

Question

They take so long to load, I want to do it after Dom loaded.

    <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/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
      } (document, 'script', 'facebook-jssdk'));
    </script>
    <div class="fb-like" data-href="http://www.mywebsite.com<%=HttpContext.Current.Request.Url.AbsolutePath %>"
        data-send="false" data-width="450" data-show-faces="true">
    </div>

score 2 · Answer 1 · edited May 23 '17 at 12:21

First, if you're not already using jQuery, you don't need jQuery. Follow a solution more like the one here, or if you don't need that kind of complexity and support for very old browsers, you can put together a much simpler version.

Once you have your "DOM ready handler", you should do one of the following two things:

Move the JS SDK loading code into your DOM ready handler. No matter how many social plugins you have on the page, you only need to load the SDK once.
Take xfbml: true out of FB.init(...), if you have it (in this case, you don't), and take xfbml=1 out of the SDK URL. This prevents social widgets from being parsed and initialized immediately. Then, call FB.XFBML.parse() in your DOM ready handler. See the documentation here for that method.

score 1 · Answer 2 · answered Sep 28 '11 at 04:31

Thanks amosrivera :) Heres a code snippet I whiped up for anyone who finds this:

var Interface = {
 Facebook: (function () {
        function Init() {
        }
        function LikeButton() {
            var $facebookLike = $('.facebook-like');
            $facebookLike.html('<div id="fb-root"></div>');
            (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_US/all.js#xfbml=1";
                fjs.parentNode.insertBefore(js, fjs);
            } (document, 'script', 'facebook-jssdk'));
            $facebookLike.append('<div class="fb-like" data-href="'+$facebookLike.data('url')+'" data-send="false" data-width="450" data-show-faces="true"></div>');
        }
        function Comments() {
            var $facebookComments = $('.facebook-comments');
            $facebookComments.html('<div id="fb-root"></div>');
            (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_US/all.js#xfbml=1";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
            $facebookComments.append('<div class="fb-comments" data-href="'+$facebookComments.data('url')+'" data-num-posts="10" data-width="500"></div>');
        }
        return {
            Init: Init,
            LikeButton: LikeButton,
            Comments: Comments
        }
    })()
}

Cool, just consider setting my answer as accepted >for everyone who finds it. — amosrivera, Sep 28 '11 at 06:10
Absolutely don't do this. You only need the JS SDK once per page, and you really don't need to be parsing and inserting markup. See my answer for the better solution. — AndrewF, Oct 27 '13 at 22:59

score 0 · Accepted Answer · answered Sep 28 '11 at 03:52

0

Just use the document ready event from jQuery

$(document).ready(function(){
    //code here
});

Demo: http://jsfiddle.net/ZCcyy/

Note that this will only wait until the dom is ready. If you want to load until the whole page is loaded including images use the window load event instead.

$(window).load(function(){
    // code here
});

answered Sep 28 '11 at 03:52

amosrivera

24,359
9
65
76

Hey thanks for your answer, ok so I am using a system like this: var Interface = { Default: (function () { function Init() { //Can i put facebook code here? } return { Init: Init } })() } – williamsandonz Sep 28 '11 at 03:59
@Baconbeastnz You can put pretty much anything inside it while your code works. – amosrivera Sep 28 '11 at 04:02

How to load these facebook plugins on Dom Ready

3 Answers3