2016年3月22日

FB「讚」按鈕與 Google「+1」按鈕最簡單安全的安裝方式﹍可解決對齊問題

A+
在「Facebook 讚按鈕﹍四種安裝方式剖析」有讀者於留言 #2 表示 "不曉得刪除了哪個小工具的語法,所有文章都不會再顯示臉書專頁的讚按鈕了"。

如果對程式碼不熟悉的話,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="http://www.facebook.com/plugins/like.php?locale=zh_TW&amp;href=http://" + location.hostname + location.pathname + "&amp;layout=button_count&amp;action=like&amp;colorscheme=light&amp;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://plus.google.com/_/+1/fastbutton?url=http://" + location.hostname + location.pathname + "&amp;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 相關技巧:


更多社群分享按鈕工具:

9 則留言:

  1. 你好:謝謝你的程式碼,我將讚按鈕安裝語法放在我部落格http://o6e6f2000.pixnet.net/blog,
    用電腦可以按讚,用手機按讚出現[歡迎使用Facebook畫面,要登入郵件密碼],這樣我用line分享我的文章給朋友,大家都用手機可是沒辦法按讚.怎麼辦呢.

    回覆刪除
    回覆
    1. 我用瀏覽器模擬你的手機版網頁,沒什麼問題,可能你只是手機沒登入 FB 吧~

      刪除
    2. 謝謝,我跟我朋友說要先登入fb才能在我文章按讚

      刪除
  2. 您好,我在文章把iframe版本的放在文章裡面,電腦版時可以正常顯示,
    但是用「手機版」時(blogger內建的動態模式樣版)會因為它內建的分享鍵而「重複顯示」,
    而且我安裝的iframe在手機版時,抓的也不是該篇文章的讚數,
    請問有辦法可以讓他們不要同時出現嗎?

    電腦版→ http://trees6x6.blogspot.tw/2016/06/j2.html
    手機版→ http://trees6x6.blogspot.tw/2016/06/j2.html?m=1

    回覆刪除
    回覆
    1. 你好,在範本使用判斷式就好了:http://www.wfublog.com/2014/04/blogger-mobile-template-custom-tips.html →「四、讓網頁版的內容不要出現在行動版」

      刪除
    2. 之後來測試看看,謝謝你!!!

      刪除
  3. 您好~
    請問按讚需要"確認" 該如何解決這問題 :)?
    我看您網站的讚都不用按確認鍵 但是我網站的都要Orzzzzz
    我的部落格:http://weigetrainbus.blogspot.com/

    回覆刪除
    回覆
    1. 你好,可參考「為何分享文章會被 FB 封鎖或出現安全驗證?解決無法分享+留言框失效+確認按鈕等異常現象」:http://www.wfublog.com/2015/11/facebook-block-web-post-url-confirm-button.html →「Q6:為何按讚會出現 "確認" 按鈕?」

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。