如何將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