javascript - 以编程方式更改 data-href 属性后重新加载 Facebook Like 小部件

Question

我正在创建一个网络应用程序，用户可以在该应用程序的页面中插入 Facebook Like 按钮。他单击“插入 Facebook 赞”，小部件代码被插入，如下所示:

<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";' +
        'fjs.parentNode.insertBefore(js, fjs);' +
        '}(document, \'script\', \'facebook-jssdk\'));</script>' +
        '<div class="fb-like" data-href="' + field.url + '" data-send="true" data-width="369" data-show-faces="true"></div>

然后用户单击“编辑小部件”按钮并看到带有 URL 的文本输入。他填写他想要的任何 URL，然后单击“保存”。在此之后 data-href 获取 URL 值。上面的一切工作正常，但更新 url 时小部件不会重新加载。我想我应该调用一些方法来重新加载小部件。我该怎么做？

Answer 1

据我所知，data-href 属性在上面的脚本执行时被读取一次。并且 div 本身成为一个容器，在脚本执行后实际上不会在 Like 过程中发挥任何作用。

您可以尝试使用 XFBML 点赞按钮。

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

当用户更改 URL 时，您只需销毁现有的 Like-button，插入更新后的 XFBML，然后使用 Facebook's JavaScript SDK , 调用 FB.XFBML.parse重新创建它。