使用JavaScript动态更新FB：Like URL

Question

我想使用JavaScript动态地更改FB:Like按钮的链接URL。

目前我只能更改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);
}

- RZKY

Answer 1

对于XFBML标签，即使不使用FB iframe，它也对我有效，并且甚至可以与多个FB like调用一起使用于AJAX。

您只需要将整个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代码：

<span id="like"></span>

- Mohammad Arif

Answer 2

不要使用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>

现在，您可以使用以下函数使用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);
}

当您更改src时，FB iframe将被更新。

- o6low

Answer 3

我使用以下代码重新初始化社交按钮：

//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();
}

使用这样的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>

- Andrey Nikishaev

---

你知道如何为领英按钮做同样的事吗？这是非常有用的代码。 - tsukimi

我在这里找到了一些东西，对于任何感兴趣的人都很有用。链接 - tsukimi

不，我没有。但我认为它很相似，你只需要调查一下按钮的渲染过程。另外，你可以尝试使用ShareThis按钮，它们有很好的API。http://sharethis.com/ - Andrey Nikishaev

这非常有帮助。简洁明了，且更新及时。谢谢！ - jonkeegan

Twitter没有起作用（我不得不显式地创建和插入新的twitter-share-button标记，然后重新加载Twitter），但Facebook代码运行良好！ - Fateh Khalsa

Answer 4

我认为你有几个选择...

1. 删除元素，构建并附加一个XFBML字符串，然后在父对象中解析XFBML.parse调用。 2. 删除元素或其容器，使用实际的XFBML对象构建和附加。 3. 构建一个iframe容器，从父页面传递like url（使用GET）。如果您可以在JS中获取查询字符串，则无需使用真正的后端即可完成此操作。然后，在初始化Facebook SDK之前构建标记，点赞按钮将呈现。Facebook总是使用它们的iframe，因此这种方法并不像听起来那么笨重。我尝试过这种方法，效果很好。

- jozecuervo