动态设置 Facebook 小部件的 href

Question

我有一个使用 Facebook 类似小部件的小型网络应用程序。此页面还使用查询字符串动态加载内容。我需要根据查询字符串动态确定分配给 Facebook 小部件的 href。以下是我如何定义小部件的示例：

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="http://apps.facebook.com/inflatableicons/image_preview.html" send="true" width="450" show_faces="true" font="">
</fb:like>

但我真正需要的是这样的：

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="http://apps.facebook.com/inflatableicons/image_preview.html?y=119" send="true" width="450" show_faces="true" font="">
</fb:like>

请注意，第二个示例中的 href 以 ?y=119 结尾，但第一个示例不是。我的问题是，我不知道将哪个值作为小部件的查询字符串，直到我看到哪个查询字符串被传递到 html 页面。谁能解释一下如何将动态值插入到 href 中？我首先尝试在事实之后设置 href，如下所示：

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="#" send="true" width="450" show_faces="true" font="">
</fb:like>
<script>
  var url = 'http://apps.facebook.com/inflatableicons/image_preview.html?y=120';
  document.getElementById('fbLike').setAttribute('href', url);
  console.log(document.getElementById('fbLike'));
</script>

但是当我这样做时，小部件抱怨未设置 href，奇怪的是，当我打印 getElementById 的值时，它显示我使用 setAttrbibute 设置的 href，即使小部件认为它设置不正确并给出错误。我相信由于某种原因，小部件不允许我在事后设置 href。

编辑：

我还尝试使用 ferni 在他的答案中描述的 jQuery 示例，但这似乎不起作用：

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="#" send="true" width="450" show_faces="true" font="">
</fb:like> 
<script>
    var url = 'http://apps.facebook.com/inflatableicons/image_preview.html?y=120';
    jQuery("#fblikeblock").html('<fb:like id="fbLike" href="'+url+'" send="true" width="450" show_faces="true" font=""></fb:like>');
    FB.XFBML.parse(document.getElementById('fblikeblock'));
    console.log(document.getElementById('fblikeblock'));
  </script>

我将 console.log 添加到脚本末尾以打印 fblikeblock 的值，返回 null，因此这可能是问题的一部分。

Answer 1

您需要将 fb:like 按钮添加到页面，然后调用其上的 XFBML 处理器。所以像这样的东西（我假设 jQuery 是正在使用的库：如果您使用其他库，则必须更改它）：

var url = "http://apps.facebook.com/inflatableicons/image_preview.html?y=119";
jQuery("#fblikeblock").html('<fb:like id="fbLike" href="'+url+'" send="true" width="450" show_faces="true" font=""></fb:like>');
FB.XFBML.parse(document.getElementById('fblikeblock'));

编辑：此解决方案的潜在实现是这样的。

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&xfbml=1"></script>
<div id="fblikeblock"></div>
<script>
    var url = 'http://apps.facebook.com/inflatableicons/image_preview.html?y=120';
    jQuery("#fblikeblock").html('<fb:like id="fbLike" href="'+url+'" send="true" width="450" show_faces="true" font=""></fb:like>');
    FB.XFBML.parse(document.getElementById('fblikeblock'));
    console.log(document.getElementById('fblikeblock'));
  </script>