如何将 Facebook 的“赞”按钮添加到 Blogger 博客？答案

【问题标题】：How can I add Facebook's "like" button to a Blogger blog?如何将 Facebook 的“赞”按钮添加到 Blogger 博客？
【发布时间】：2010-04-21 20:54:10
【问题描述】：

我想将the new facebook "like" button 添加到我的 Blogger 网站。

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

我可以从 <data:post.url/> 获取 Blogger 帖子 URL，但我不能将它放在 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'/>

但 Blogger 抱怨：

您的模板格式不正确，无法解析。请确保所有 XML 元素都正确关闭。
XML 错误消息：与元素类型“null”关联的属性“src”的值不能包含“

有人有这个工作吗？

【问题讨论】：

转到page，您可以从那里轻松创建自己的点赞按钮。

标签： facebook iframe facebook-like blogger blogspot

【解决方案1】：

试试这个，

<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'/>

【讨论】：

它在从移动设备共享时附加一个参数 m=1。如何获取不带任何参数的 url。
使用data:post.url.canonical 而不是data:post.url，所以它是没有查询参数的同一个URL。

【解决方案2】：

使用本教程添加点赞按钮 - FB 推出了点赞按钮的新设计 - http://www.bloggerplugins.org/2010/04/facebook-like-button-for-blogger.html

【讨论】：

【解决方案3】：

我在 WikiHow 上编写了使用 iframe 方法的分步指南： http://www.wikihow.com/Add-Facebook-Like-to-Blogger

如果它不适合你，请告诉我。本质上，您的 src 需要使用 expr:src 语法，以及字符串/数据连接。

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

【讨论】：

【解决方案4】：

第 1 步：请将 JavaScript SDK 应用于您的模板。

第二步：找到这行<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>

保存并完成；）

【讨论】：

【解决方案5】：

我在更改模板时也遇到了同样的错误。于是我找到了使用 JavaScript 函数 document.write 的解决方案：

    <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/

【讨论】：

【解决方案6】：

Juan Jorge 的解决方案应该可行。

恕我直言，在博客上使用 javascript SDK 比使用 iframe 方法要优雅得多（我在我的博客上都尝试过）。

这是我就该主题发表的几篇文章的链接（包括在属性中使用博客表达式等，以及如何使用 javascript sdk 将点赞按钮合并到您的博客模板中）：

http://blog.yanivkessler.com/search/label/blogger

希望这会有所帮助...

【讨论】：