如果對程式碼不熟悉的話,FB 官方提供的「HTML5 語法」,的確有可能安裝失敗、或發生彼此打架的情形。最安全、絕不會影響他處 FB 外掛的安裝方式,就是採取本文推薦的 IFRAME 安裝語法。
本篇除了介紹安裝 FB 讚按鈕的語法,也一併說明 Google「+1」按鈕最簡便的語法。同時,使用本篇的語法,還能有效排除「讚按鈕」與「+1按鈕」放在同一行時,無法上下對齊的問題,算是一石二鳥的解決方案。
(圖片出處: pixabay.com)
一、讚按鈕安裝語法
請將以下程式碼,放在想顯示的地方:
<iframe src='' scrolling='no' frameborder='0' style='width:150px; height:20px;' allowTransparency='true' onload='this.src="//www.facebook.com/plugins/like.php?locale=zh_TW&href=" + location.protocol + "//" + location.hostname + location.pathname + "&layout=button_count&action=like&colorscheme=light&share=false"; this.onload="";'></iframe>
如需要修改參數的話,請參考以上藍色字串:
- width: 寬度 px 值
- height: 高度 px 值
- layout: 有 3 種參數可修改
- standard: 按鈕佔面積最大,顯示訊息最多。
- button_count: 按鈕所佔面積小,統計數量顯示在按鈕 "右" 方。
- box_count: 按鈕所佔面積小,統計數量顯示在按鈕 "上" 方。
- action: 有 2 種參數可修改
- like: 出現 "讚" 字樣
- recommend: 出現 "推薦" 字樣
- colorscheme: 有 2 種參數可修改
- light: 適合淺色背景
- dark: 適合深色背景
二、+1 按鈕安裝語法
請將以下程式碼,放在想顯示的地方:
<iframe allowTransparency='true' src='' style='width:150px; height:20px;' frameborder='0' scrolling='no' onload='this.src="https://plusone.google.com/_/+1/fastbutton?url=" + location.protocol + "//" + location.hostname + location.pathname + "&size=medium"; this.onload="";'></iframe>
如需要修改參數的話,請參考以上藍色字串:
- width: 寬度 px 值
- height: 高度 px 值
- size: 有 4 種參數可修改
- small
- medium
- standard
- tall
如果要跟 FB 讚按鈕擺在一起,那麼 size 建議使用 medium 就好,版面比較美觀。
三、效果展示
1. 效果展示
將以上兩組語法放在一起後,效果如同下面這樣:
2. 對齊效果
有時我們將多個社群分享按鈕放在同一列時,會發生高、矮不齊的狀況,版面很不美觀。
不過使用了本文的安裝碼後,從上面的效果可看到,「讚」按鈕與「+1」按鈕可以上下切齊,沒有需要調整版面的問題。
3. 分享功能
本篇的安裝碼,執行上由於都是 IFRAME,會比官方安裝碼載入的速度快。不過也是會有副作用 → 沒有分享的功能,可以試著按按看就知道了。
因此以上的安裝碼,適合只顯示按讚數、+1 數,以及提供訪客按讚及 +1 的功能。
如果一定需要分享按鈕的功能,那麼請繼續往下看,改用不同的參數或安裝碼。
四、讚按鈕+分享按鈕安裝語法
請參照「一、讚按鈕安裝語法」,將藍色字串 share 的參數從 "false" 改為 "true",那麼讚按鈕的右邊,就會額外出現一個「分享」按鈕了。
五、+1 按鈕分享功能語法
必須將 +1 按鈕,改用「官方語法」,才能出現分享功能:
<div class='g-plusone' data-size='medium'></div>
<script src='https://apis.google.com/js/platform.js' async='async'></script>
需要修改參數的話,同樣請參考「二、+1 按鈕安裝語法」的說明。
六、分享功能效果展示
將以上兩組語法放在一起後,效果如同下面這樣:
這組安裝碼,一樣可讓「讚」按鈕與「+1」按鈕上下切齊,提供給需要 "分享" 功能的讀者多一種的選擇。
更多 FB 相關技巧:
更多社群分享按鈕工具:
你好:謝謝你的程式碼,我將讚按鈕安裝語法放在我部落格http://o6e6f2000.pixnet.net/blog,
回覆刪除用電腦可以按讚,用手機按讚出現[歡迎使用Facebook畫面,要登入郵件密碼],這樣我用line分享我的文章給朋友,大家都用手機可是沒辦法按讚.怎麼辦呢.
我用瀏覽器模擬你的手機版網頁,沒什麼問題,可能你只是手機沒登入 FB 吧~
刪除謝謝,我跟我朋友說要先登入fb才能在我文章按讚
刪除不客氣
刪除您好,我在文章把iframe版本的放在文章裡面,電腦版時可以正常顯示,
回覆刪除但是用「手機版」時(blogger內建的動態模式樣版)會因為它內建的分享鍵而「重複顯示」,
而且我安裝的iframe在手機版時,抓的也不是該篇文章的讚數,
請問有辦法可以讓他們不要同時出現嗎?
電腦版→ http://trees6x6.blogspot.tw/2016/06/j2.html
手機版→ http://trees6x6.blogspot.tw/2016/06/j2.html?m=1
你好,在範本使用判斷式就好了:http://www.wfublog.com/2014/04/blogger-mobile-template-custom-tips.html →「四、讓網頁版的內容不要出現在行動版」
刪除之後來測試看看,謝謝你!!!
刪除您好~
回覆刪除請問按讚需要"確認" 該如何解決這問題 :)?
我看您網站的讚都不用按確認鍵 但是我網站的都要Orzzzzz
我的部落格:http://weigetrainbus.blogspot.com/
你好,可參考「為何分享文章會被 FB 封鎖或出現安全驗證?解決無法分享+留言框失效+確認按鈕等異常現象」:http://www.wfublog.com/2015/11/facebook-block-web-post-url-confirm-button.html →「Q6:為何按讚會出現 "確認" 按鈕?」
刪除您好,我使用了您的 「FB「讚」按鈕與 Google「+1」按鈕最簡單安全的安裝方式﹍可解決對齊問題」 但臉書按鈕是時有時無(G+的不會,但我後來沒加G+),請問為何會有這種狀況呢?謝謝^^
回覆刪除我在你的網站測試,都無法出現讚按鈕;但把你網站的讚按鈕程式碼,完全用我的網站測試,就能顯示你的讚按鈕,包含你該篇文章的讚數量。
刪除所以我的推測是,你的網站可能被 FB 封鎖了,可參考「為何分享文章會被 FB 封鎖或出現安全驗證?解決無法分享+留言框失效+確認按鈕等異常現象」:http://www.wfublog.com/2015/11/facebook-block-web-post-url-confirm-button.html 這篇提到的相關狀況。目前你只能等 FB 解除封鎖後,才能顯示讚按鈕。
非常謝謝您幫忙測試,我現在語法沒撤掉,它還是大部分不顯示,偶而會出現(同一時間有些文章有,有些文章沒有出現)。至於您說的封鎖,因為剛轉移到blogger,應該沒有人按讚(因為按鈕沒出現)、我也從未在FB上轉貼過自己的文章,所以應該不會被封鎖吧?
刪除無論如何,還是謝謝您提供建議QQ!
有的文章有、有的文章沒有,代表這問題跟程式碼無關,那麼只會跟官方的判定有關。
刪除至於FB官方為何有的文章不顯示讚按鈕,我唯一的判斷就是被官方封鎖。
被封鎖的原因有很多種可能性,想知道真正原因,也許可以跟FB反應、詢問。
安裝好扁平化分享按鈕之後,接著再加上這篇文章介紹的讚按鈕。真是太棒了!
回覆刪除多謝站長的實用好文!
不客氣,很高興對你有幫助~
刪除您好想問一下安裝FB按鈕後,在部落個文章列表的部分所看到的讚數都是一樣的(目前看到都是16讚),但點進去每一篇文章後,才會看到每一篇文章實際的按讚數,部落格網址如下https://weiandbei.blogspot.com/
回覆刪除想問說要如何改善這個問題呢? 先謝謝WFU!
你好
刪除因為是 Blogger 網站,所以可以用判斷式來處理,讓首頁不要出現讚按鈕。
請參考「Blogger 頁面判斷式的各種應用」:https://www.wfublog.com/2012/12/blogger-pagetype.html
在安裝程式碼的前、後,分別加上判斷式即可:
<b:if cond='data:blog.pageType == "item"'>
安裝程式碼
</b:if>
謝謝Wayne,加上去後按讚紐就消失了,不過就沒有辦法在外圍文章列表的時候顯示正確的按讚數囉?
刪除如我上面的回覆所提,這個方法可讓「首頁不要出現讚按鈕」
刪除如果你要每個頁面都出現讚按鈕,請參考這篇「Blogger自訂「讚」按鈕」:https://www.wfublog.com/2011/08/bloggerreactions1.html 的語法
想问个问题,fb的赞按钮移过来之后,fb那边收到的赞可否同步到目标网站上呢
回覆刪除你好
刪除關於 Yes/No 的問題 只要進行測試就可以得到答案
如果這不是你要的答案 那麼或許是問的問題不對~
OK
刪除請問可以單純只要 分享不要讚嗎?
回覆刪除或是讚和分享 分享的圖片可以改嗎? 感覺分享圖片好小 想換成 F 這樣的圖片 謝謝您
本篇的語法是官方工具,所以無法改圖片
刪除純粹分享按鈕本站分享過多篇心得,可參考:
https://www.wfublog.com/2016/01/round-social-share-buttons.html
https://www.wfublog.com/2016/01/flat-social-share-button.html
https://www.wfublog.com/2015/03/blogger-official-share-button-customize-add-favorite-ones.html
您好:我在學習您的這篇文章,但為甚麼他的旁邊始終會出現白色一塊呢 ?
回覆刪除我的網址: https://sbjsoso.blogspot.com/
你好 看起來是g+ 的底色 你的版型底色不是白色 所以看起來突兀
刪除不要裝 g+ 按鈕就好了
g+ 已經關閉了
最近發現 FB讚按鈕 在新版瀏覽器會有顯示不出來的問題:
回覆刪除以這篇文章為例:
http://waterbee.blogspot.com/2006/10/blog-post_20.html
在 Chrome 88 及 Firefox 85 都看不見。
若改成安全網頁 https://waterbee.blogspot.com/2006/10/blog-post_20.html
在 Chrome 88 看得見,但 Firefox 85 仍看不見。
不知該如何修改這段 iframe 可以兩全齊美...
如果 http 網址可以顯示網頁的話,代表後台沒有勾選「HTTPS 重新導向」,請強制 HTTPS 重新導向試試看
刪除