如何将Facebook的“喜欢”按钮添加到Blogger博客？

我想将the new facebook "like" button添加到我的Blogger网站。如何将Facebook的“喜欢”按钮添加到Blogger博客？

我必须将URL传递给iframe src中的博客文章。

我可以从<data:post.url/>获得Blogger发布的网址，但是我不能将它放在src字符串中，因为Blogger的模板系统很奇怪。

我想这样做：

<iframe allowTransparency='true' frameborder='0' scrolling='no' 
src='http://www.facebook.com/plugins/like.php?href=<data:post.url/>&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;colorscheme=light' 
style='border:none; overflow:hidden; width:450px; height:px'/>

但博客抱怨：因为它是没有很好地形成

您的模板无法解析。请确保所有XML元素都已正确关闭。
XML错误消息：属性的“SRC”与元素类型相关的“零”值不得包含“<”人物“

有谁知道这又工作

来源

2010-04-21 David

-1

STEP 1。？：请申请JavaScript SDK到您的模板

第2步：找到这一行<b:includable id='post' var='post'>

第3步：把这个后

<b:if cond='data:post.url'> 
    <fb:like action='like' colorscheme='light' expr:href='data:post.url' layout='standard' show_faces='false' width='450'/> 
</b:if>

保存它和你做;）

来源

2010-04-22 01:31:21 Irwan

-1

更改模板时，我也有同样的错误。于是，我找到了解决方案，通过使用JavaScript函数文件撰写：

<script> 
    document.write('&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?href=<data:post.url/>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowTransparency=&quot;true&quot; style=&quot;border:none; overflow:hidden; width:450px; height:80px&quot;&gt;&lt;/iframe&gt;'); 
</script>

只要将上面的代码在您的博客后段的结束。

有两点需要注意：

Irwan的解决方案应该工作（我还没有尝试），但是这意味着FB SDK必须加载。这可能是谁关心博客表现的一个问题。
Maggie的解决方案工作正常，但它不允许单独喜欢这些帖子。

人们可以看到它在这里工作：http://fliscorno.blogspot.com/

来源

2010-04-22 18:41:27 Jorge

我写了一步一步的指导使用wikiHow上的iframe方法： http://www.wikihow.com/Add-Facebook-Like-to-Blogger

让我知道，如果它不为你工作。实际上，您的src需要使用expr：src语法，并使用字符串/数据连接。

JavaScript版本声称更为灵活，但仍有许多人在其浏览器中禁用JavaScript或使用一些NoScript插件。

来源

2010-04-25 20:10:06 Phong

试试这个，

<iframe allowTransparency='true' 
     expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=button_count&amp;show_faces=false&amp;width=75&amp;action=like&amp;font=trebuchet+ms&amp;colorscheme=light"' 
     frameborder='0' scrolling='no' 
     style='border:none; overflow:hidden; height: 20px'/>

来源

2010-04-26 20:18:42

它从移动设备共享时附加参数m = 1。我如何获得没有任何参数的网址。 – StarWars 2015-04-04 14:46:56

使用'data：post.url.canonical'而不是'data：post.url'，因此它是没有查询参数的URL。 – OdraEncoded 2017-01-09 00:40:41