facebook - AJAX-Load 后 Facebook Like 按钮刷新

Question

我必须实现一个 Facebook-Likebutton，其中的 url 取自 ajax 请求……这意味着我在页面加载后设置了“href”属性。不幸的是，此时url已经设置好了，所以点赞的时候会以实际的page-url为url……有没有办法刷新likebutton？

Answer 1

如果您使用的是 jQuery，那么这个问题有一个非常简单而巧妙的解决方案：

$(document).ajaxComplete(function(){
    try{
        FB.XFBML.parse(); 
    }catch(ex){}
});

Answer 2

如果您使用的是 XFBML，我不知道更改 URL 的方法。但是，如果您使用的是 iframe，则此代码段应该可以工作：

HTML

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.google.com&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true" id="theiframe"></iframe>
<br />
<input id="url" />
<input id="btn" value="Change" type="button">

jQuery

$('#btn').click(function(){
    url = "";

    url += 'http://www.facebook.com/plugins/like.php?';
    url += 'href=' + $('#url').val() + '&layout=standard&';
    url += 'show_faces=true&width=450&action=like&';
    url += 'font&colorscheme=light&height=80';

    $('#theiframe').attr({'src': url});
});

Answer 3

如果使用 XFBML，那么你应该包装你喜欢的按钮代码，例如。

<fb:like href="http://example.com" send="true" width="450" show_faces="true"></fb:like>

进入 div 或 span，例如：

<span class="fb-like">    
  <fb:like href="http://example.com" send="true" width="450" show_faces="true"></fb:like>
</span>

然后，在通过 ajax 获得新 URL 后，您必须清除已经生成的 facebook like 小部件，并将其替换为新的 fb:like 代码

jQuery('.fb-like').html('<fb:like href="http://example.com" send="true" width="450" show_faces="true"></fb:like>');

而且你必须再次初始化 facebook like 按钮

FB.XFBML.parse();

最终代码可能看起来像这样。假设响应包含纯新 URL

<span class="fb-like">    
  <fb:like send="true" width="450" show_faces="true"></fb:like>
</span>
<script type="text/javascript">
$.ajax({
  url: "getMeUrl.php",
  success: function(url){
    $('.fb-like').html('<fb:like href="'+url+'" send="true" width="450" show_faces="true"></fb:like>');
    FB.XFBML.parse();
  }
});
</script>

概括：

To refresh facebook like button (or any other facebook XFBML) you have to:
1) destroy existing initialized widget (clear the content of XFBML code wrapper)
2) add new XFBML code into wrapper
3) initialize new code via FB.XFBML.parse();

Answer 4

如果您使用的是 fbml，则可以动态创建和解析元素，有关详细信息，请参阅此答案：

如何向 AJAX 驱动的页面添加 Facebook 的“Like”按钮

如果您使用的是 iframe，则无需重新构建 url，只需刷新 iframe。例如，要刷新页面上的所有 iframe：

$("iframe").each(function(){
  $(this).attr('src', $(this).attr('src'));
});