页面内容加载完成后加载 Facebook Like Box

发布于 2025-01-07 07:43:45 字数 1186 浏览 5 评论 0原文

我试图延迟 Facebook Like Box 在页面内容已加载。我尝试通过 AJAX 实现此目的，但到目前为止结果好坏参半。我所做的是采用下面的代码（HTML5 版本）：

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

<div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="292"   data-show-faces="true" data-stream="false" data-header="false"></div>

...并将其单独放置在我网站上的某个位置。

然后，我设置一些 jQuery 来获取代码并将其附加到页面，如下所示：

// set 1 second timeout
setTimeout(function () {
    $.ajax({
        url: "/facebook/likebox.php",
        success: function(data){

            // add loaded data to page
            $('#foo').append(data);
        }
    });
}, 1000);

在某些情况下（在同一页面上按 F5）这有效，而另一些则无效。

我想知道对于我想要完成的事情是否有更好的解决方案，或者我是否实际上忽略了某些事情。

原文

I'm trying to delay the Facebook Like Box from loading before the page content has been loaded in. I'm attempting to achieve this via AJAX but have so far had mixed results. What I did was take the code below (HTML5 version):

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

<div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="292"   data-show-faces="true" data-stream="false" data-header="false"></div>

...and had it sat on its own somewhere on my website.

I then setup some jQuery to get the code and append it to the page like so:

// set 1 second timeout
setTimeout(function () {
    $.ajax({
        url: "/facebook/likebox.php",
        success: function(data){

            // add loaded data to page
            $('#foo').append(data);
        }
    });
}, 1000);

In some instances (hitting F5 on the same page) this worked and some it didn't.

I was wondering whether there are any better solutions for what I'm trying to accomplish, or whether I have actually overlooked something.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如梦亦如幻 2025-01-14 07:43:45

您应该将 JavaScript 放入 fbAsyncInit() 回调函数中，这样您就可以确保在放入点赞框之前 Facebook JavaScript SDK 已完全加载。插入相似框的 DOM 后，不要忘记调用 FB.XFBML.parse()

window.fbAsyncInit = function() {
 $.ajax({
    url: "/facebook/likebox.php",
    success: function(data){

        // add loaded data to page
        $('#foo').append(data);
        FB.XFBML.parse($('#foo')[0]);
    }
 });
};

You should put your javascript into the fbAsyncInit() callback function so you can be assured that the Facebook JavaScript SDK has completely loaded before putting your like box. Dont forget to call FB.XFBML.parse() after inserting the DOM for the like-box

window.fbAsyncInit = function() {
 $.ajax({
    url: "/facebook/likebox.php",
    success: function(data){

        // add loaded data to page
        $('#foo').append(data);
        FB.XFBML.parse($('#foo')[0]);
    }
 });
};

回复收藏 0 原文

~没有更多了~