電腦筆記:在Blogger中放置Facebook的讚按鈕的最佳位置

由於每個人的電腦不一樣，我自己也在網路上搜尋了一翻，並自己嘗試看看，才成功的把「讚」放在我希望的位置。筆記的目的是讓自己記得，也幫助有相同問題的人得到解答。我是新手不是高手，所以僅僅是分享我實驗的心得及網路學習的結果。

電腦及瀏覽器：IMAC的Safari
時間：2011年10月24日
Blogger：新版
參考網站:
小Mic報報: Blogger + facebook「讚」按鈕
在Blogger嵌入Facebook的讚(Like)按鈕 | 哲生博客 Jason Blog
Blogger / Blogspot 版面設計相關資訊總整理 | 萊恩之門 Lion Door

第一步:從範本中找到修改HTML

↓

↓

 第二步:選擇你想放讚的位置

要複製的程式碼如下，把它貼到你想要的位置

<script>
document.write(&#39;&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?href=<data:post.url/>&amp;layout=standard&amp;show_faces=false&quot;&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:30px&quot;&gt;&lt;/iframe&gt;&#39;);
</script>

1.標題前

搜尋 <h3 class='post-title entry-title'>
把程式碼貼在 <h3 class='post-title entry-title'>的前面
呈現的結果會是

2.標題後
尋找 <div class='post-header-line-1'/>

把程式碼貼於 <div class='post-header-line-1'/>後面

呈現的結果會是

3.文章的後面
搜尋<div class='post-footer'>

把程式碼貼在<div class='post-footer'>的後面

呈現的結果會是

4.文章的後面工具列的右側
尋找<div class='post-footer-line post-footer-line-1'>

把以下程式碼貼於<div class='post-footer-line post-footer-line-1'>後面
<div style='float:right; margin-left:10px;'>
<script>
document.write(&#39;&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?href=<data:post.url/>&amp;layout=standard&amp;show_faces=false&quot;&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:30px&quot;&gt;&lt;/iframe&gt;&#39;);
</script> 
</div>
呈現的結果會是

這些都是我實驗過最美觀的擺放方式，其中我把會有FB照片的圖像改掉，只有文字呈現可讓部落格的版面不那麼亂，另外我還改了長度讓讚不致於空太多上下的空間。希望你也能喜歡，就幫我按個讚吧！