沒想到小小一個按鈕有如此大的學問!! (新手如我弄了一下午|||||||||||
原本是想放在文章標題底下的，可是google小工具會把設定自動跳回"那一排分享按鈕全都放在文章底下"的狀態，我覺得可能是我套用的這個版型範本不適用的關係(因為看到其他人blogger網誌可以移到上方)
直接來上圖1↓
避免我廢話太多先來上code：
=============================
<!--Fb like按鈕(在文章底部跟blogger預設分享工具之前)-->
<script>
document.write('<iframe src="http://www.facebook.com/plugins/like.php?href=<data:post.url/>&layout=standard&show_faces=true&width=450&action=like&font=verdana&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:20px"></iframe>');
</script>
=============================
之所以要加上<!--Fb like按鈕...... --> 這一行是為了自己好找^w^|||
不貼上也沒差~
因為有時候複製貼上就......诶我貼到哪裡去了|||||||||
有寫註解比較方便用 ctrl+f 尋找
code是從這篇文章找來的不是我寫的> <：在Blogger嵌入Facebook的讚(Like)按鈕
這個連結的文章說要 把按鈕放在文章後面 的話，就把code丟在<data:post.body>後面
測試出來按鈕有跑出來(代表這code可以用!QwQ感動)，不過按鈕會出現在"在Google上推薦這個網址"那一排按鈕的後面，不是我想要放的地方
所以我就開始煩惱要塞哪裡了......超困難弄了超久orz
(上面的code(====等號分隔線夾起來的那塊)，我只稍微改了大小跟類型，詳細後面說)
後來終於喬到我要的位子了，要有跟最上面圖1一樣的效果的話，要把code塞到<div class='post-footer'>下面
(題(ㄅㄨˊ)外(ㄓㄨㄥˋ)話(ㄧㄠˋ)：塞post-footer的div裡面的話，若文章有時候有"繼續閱讀Read More"按鈕還是會顯示在Read More下方 不會跑位，測試時我亂塞code結果居然跑到Read More上面整個超冏)
一樣來上圖2(點擊可放大)↓
跟放大版的圖3↓
我在煩惱要塞哪裡的時候發現我這網誌套用的版型有兩個post-footer，第二個post-footer好像是行動版的，不過電腦看按鈕沒跑出來、用手機測試行動版按鈕也沒有......
所以我只塞在第一個post-footer下面(如圖2跟圖3) (div裡)
要 調整按鈕細部 的話(例如按鈕大小、是否加上"xxx人說這讚。"的文字)，我是參考這篇文章：網頁專用的「讚」按鈕
在這篇文章裡的 "「讚」按鈕配置器" 可以設定好你要的樣子，直接取得code
(雖然我不知道為什麼貼上code失敗，跳出警告說width後面要加分號QQ
但是我加了之後也還是失敗，所以只把這篇文章當作按鈕的版面設定要standard或是button_count的參考而已......)
想要研究按鈕該塞哪裡的話，用chrome瀏覽器開自己的blogger按F12可以看到原始碼，就可以自己看程式碼結構研究到底該塞哪裡了^w^
測試時我有放到文章標題下，如下圖4↓
code我是塞在<div class='post-header'>這一行下面，等於是被整個post-header的div區塊包住，然後只顯示按讚數的話上面那串code裡面 layout=standard 的部分改成layout=button_count
p.s. 整個blogger的程式碼在 設計介面/範本/"編輯HTML"按鈕點進去 那邊
太久沒用我整個點很多次很不順||||||
弄了一整天只喬好一個按鈕感覺超沒成就感的||||||||||
不過至少熟悉了一點blogger的版面結構(用途不明(?)
正在思考標題下面到底要不要再放一個FB like按鈕
