更新 FB:Like URL 动态使用 JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2764129/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Update FB:Like URL Dynamically using JavaScript
提问by RZKY
i'd like to change the URL to like of an FB:Likebutton dynamically using javascript.
我想使用 javascript 动态地将 URL 更改为喜欢FB:Like按钮。
right now i've only been able to change the href attribute of the fb:liketag (i've pasted the code below). but simply changing the href doesn't seems to work. perhaps i have to re-initiate the FB:Like button, but so far i can't figure out how..
现在我只能更改fb:like标签的 href 属性（我粘贴了下面的代码）。但简单地更改 href 似乎不起作用。也许我必须重新启动 FB:Like 按钮，但到目前为止我不知道如何..
function update_share(container, url) {
// update fb:like href value
var container = container[0] || document.body;
var button = container.getElementsByTagName('fb:like');
button[0].setAttribute('href', url);
}
any help would be appreciated. thx..
任何帮助，将不胜感激。谢谢..
回答by Mohammad Arif
It works for me for XFBML tag as well without using FB iframe and even works with multiple FB like calls for AJAX
它也适用于 XFBML 标签而不使用 FB iframe，甚至可以与多个 FB 一起使用，例如对 AJAX 的调用
You just need to wrap the entire XFBML code in JS/jQuery and parse it as shown below:
您只需要将整个 XFBML 代码包装在 JS/jQuery 中并解析如下：
$('#like').html('<fb:like href="' + url + '" layout="button_count" show_faces="false" width="65" action="like" font="segoe ui" colorscheme="light" />');
if (typeof FB !== 'undefined') {
FB.XFBML.parse(document.getElementById('like'));
}
HTML code:
HTML代码：
<span id="like"></span>
Surly this is going to be helpful for more guys :)
当然，这将对更多人有帮助:)
回答by Andrey Nikishaev
For reinit social buttons i use this code:
对于重新初始化社交按钮，我使用以下代码：
//Facebook like
if(typeof(FB) !== 'undefined')
FB.XFBML.parse(document.getElementById('fblike'));
//Google plus one
if(typeof(gapi) !== 'undefined') {
gapi.plusone.render(document.getElementById('gplus'),{
'href':location.href,
'annotation':'bubble',
'width': 90,
'align': 'left',
'size': 'medium'
});
}
//Twitter tweet button
if(typeof(twttr) !== 'undefined') {
$('.twitter-share-button').attr('data-url',location.href);
twttr.widgets.load();
}
With html code like this:
使用这样的 html 代码：
<div style="float:left;margin-top: 5px;width:80px;">
<div id="gplus" class="g-plusone" data-size="medium"></div>
</div>
<div style="float:left;margin-top:5px;width:90px;">
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
</div>
<div style="float:left;margin-top:5px;width:80px;" id="fblike">
<fb:like send="false" layout="button_count" width="100" show_faces="false"></fb:like>
</div>
回答by o6low
another solutions :
另一个解决方案：
instead of your fb:like object, write a FB iframe in your html like this :
而不是你的 fb:like 对象，在你的 html 中编写一个 FB iframe，如下所示：
<iframe id="face" name="face" src="http://www.facebook.com/plugins/like.php?href=http://www.google.fr&layout=button_count&show_faces=false&width=400&action=like&font=arial&colorscheme=light" allowtransparency="true" style="border: medium none; overflow: hidden; width: 400px; height: 21px;" frameborder="0"scrolling="no"></iframe>
and now you can change with javascript with this function :
现在您可以使用此功能使用 javascript 进行更改：
function setUrl(url)
{
sUrl = url;
url = "http://www.facebook.com/plugins/like.php?href="+sUrl+"&layout=button_count&show_faces=false&width=400&action=like&font=arial&colorscheme=light";
document.getElementById('face').setAttribute('src', url);
//alert("url : "+url);
}
when you change the src, the FB iframe is updated.
当您更改 src 时，FB iframe 会更新。
回答by jozecuervo
I think you have a few options...
我想你有几个选择...
Remove the element, build and append a string of XFBML and then parse the parent object an XFBML.parse call.
Remove the element or it's container, build and append an actual XFBML object using
Build an iframe container gets passed in the like url (with a GET) from the parent page. You can do this without even using a real backend if you can get the query string in JS. Then just build the markup before you init the facebook SDK and the like button will render. Facebook iframes all their stuff anyway, so this method isn't as clunky as it sounds. Tried this, works well.
移除元素，构建并附加一个 XFBML 字符串，然后解析父对象一个 XFBML.parse 调用。
删除元素或其容器，使用构建并附加实际的 XFBML 对象
构建一个 iframe 容器从父页面传入类似 url（使用 GET）。如果您可以在 JS 中获取查询字符串，您甚至可以在不使用真正后端的情况下执行此操作。然后在您初始化 facebook SDK 和类似按钮之前构建标记。无论如何，Facebook iframe 都会对他们的所有内容进行 iframe，因此这种方法并不像听起来那么笨拙。试过这个，效果很好。
回答by Abby
Lately you can also use the HTML5 version, as described here: http://elure.co/43_facebook-like-button-dynamic-url-javascript.htm
最近您还可以使用 HTML5 版本，如下所述：http: //elure.co/43_facebook-like-button-dynamic-url-javascript.htm
