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

在「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」按鈕上下切齊，提供給需要 "分享"功能的讀者多一種的選擇。