Question

我有一个小型的网络应用程序，它使用类似Facebook的小部件。此页面还使用querrystrings动态加载内容。我需要根据querrystring动态确定分配给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结尾，但第一个示例没有。我的问题是，我不知道将哪个值作为小部件的querrystring，直到我看到哪个querrystring传递给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>

动态设置Facebook小部件的href

1 个答案: