动态设置 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&amp;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>