Google 的 +1 指標 (plusone): 新增 +1 按鈕讓訪客在 Google 上推薦您的網站

[HTML][JS][WEB] Google 的 +1 指標 (plusone): 新增 +1 按鈕讓訪客在 Google 上推薦您的網站
Google Plus One (+1) Button, How to Add Google +1 Button to your Website

Facebook 有可以按「讚」的按鈕 (like button) 放在網頁上推薦該網頁 URL,而 Google 最近也推出了類似的功能:「+ 1 按鈕 (plusone)」,可以用來 “+1 您的網站/網頁”,意即按下 +1 按鈕,喜愛您內容的人就能在 Google 搜尋上或是您網站的頁面上進行推薦。但是要如何將「+ 1 」按鈕加進網頁中,讓您的網站或特定某個網頁 URL 脫穎而出呢?請看下文說明如何建立自訂 +1 按鈕。

步驟一:
請將以下這組標籤(JavaScript 程式碼)貼到您的網頁 (HTML) 程式中,可放置在 標籤之後或 標籤之前,但是一般基於頁面呈現效能考量,會放在 標籤之前 (footer 處),如下:[cc lang=”javascript” width=”100%”]…..

…..[/cc]

步驟二:
請將以下這組標籤(JavaScript 程式碼)置於您的網頁 (HTML) 程式中「+1 按鈕」該出現的位置:[cc lang=”javascript” width=”100%”]…..

…..[/cc]

範例效果如下 (範例中希望 “推薦:” 文字後面有個 Google 「+1 按鈕」):

推薦:

進階說明

說明1: 上面的主範例中有指定語言為正體中文,所以會有『{lang: ‘zh-TW’}』這段 JavaScript code,要是您的網站是英文(美國) 語言,即 English (US),頁面的話,那步驟一中直接使用以下JavaScript 程式碼即可:[cc lang=”javascript” width=”100%”]…..

…..[/cc]
更多支援的語言請參考「支援語言」這篇列表。

說明2: 預設的「+1 按鈕」還滿大顆的是吧?那有哪些按鈕大小可以選擇呢?共有四類「+1 按鈕」大小,如下:
1. 小 (15 像素),+1 按鈕預覽如右:
需要在步驟二的程式碼中指定 size 參數值為 “small”,如下範例:[cc lang=”javascript” width=”100%”]…..
小「+1 按鈕」推薦:
…..[/cc]
2. 中 (20 像素),+1 按鈕預覽如右:
需要在步驟二的程式碼中指定 size 參數值為 “medium”,如下範例:[cc lang=”javascript” width=”100%”]…..
中「+1 按鈕」推薦:
…..[/cc]
3. 標準預設 (24 像素),+1 按鈕預覽如右:
可不需要在步驟二的程式碼中指定 size 參數值,範例同之前的:[cc lang=”javascript” width=”100%”]…..
標準「+1 按鈕」推薦:
…..[/cc]
4. 長 (60 像素),+1 按鈕預覽如右:
需要在步驟二的程式碼中指定 size 參數值為 “tall”,如下範例:[cc lang=”javascript” width=”100%”]…..
長「+1 按鈕」推薦:
…..[/cc]

說明3: 承上按鈕大小主題,如果你不想要在「+1 按鈕」有 “計數” 出現,您會需要在步驟二的程式碼中指定 count 參數值為 “false”。
其 +1 按鈕預覽如右: <– 看,沒有計數資訊吧!
程式碼如下:[cc lang=”javascript” width=”100%”]…..

…..[/cc]

說明4: +1 的網址: 如果您想指定這顆「+1 按鈕」是要對哪個網址做 +1 的推薦,您會需要在步驟二的程式碼中指定 href 參數值為 “想要推薦的網址 URL”,這個 +1 標記屬性 (href) 會明確指定要 +1 的網址,例如我想推薦 http://hotel.zhupiter.com/mw/?l=cht 這個 QK 商旅商旅地圖網址,我在步驟二的程式碼要寫成:[cc lang=”javascript” width=”100%”]…..

…..[/cc]
如果你沒有加上 href 參數時,那被推薦的「+1 目標網址」是哪個網址呢?請參考 「+1 目標網址」這篇技術說明文件的第 2 和 第 3 順序 (第 1 順序是 “href 參數”)。

說明5: 使用「+1 按鈕」以前您可能需要先看一下「Google +1 按鈕發佈商政策」這篇說明文章,必須符合一些 Google 的政策。

說明6: 「+1 按鈕」相關的技術文件請見「+1 button API」。

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.