2016年3月1日 星期二

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

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

Wayne Fu 0 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://plusone.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 相關技巧:


更多社群分享按鈕工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP