2

我有一个使用 Facebook like 小部件的小型网络应用程序。此页面还使用查询字符串来动态加载内容。我需要根据查询字符串动态确定分配给 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 所以这可能是问题的一部分。

4

1 回答 1

3

您需要将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>
于 2011-05-19T01:20:54.973 回答