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 處),如下:

.....
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'zh-TW'}
</script>
.....

步驟二:
請將以下這組標籤(JavaScript 程式碼)置於您的網頁 (HTML) 程式中「+1 按鈕」該出現的位置:

.....
<g:plusone></g:plusone>
.....

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

推薦:

進階說明

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

.....
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
.....

更多支援的語言請參考「支援語言」這篇列表。

說明2: 預設的「+1 按鈕」還滿大顆的是吧?那有哪些按鈕大小可以選擇呢?共有四類「+1 按鈕」大小,如下:
1. 小 (15 像素),+1 按鈕預覽如右:
需要在步驟二的程式碼中指定 size 參數值為 “small”,如下範例:

.....
小「+1 按鈕」推薦: <g:plusone size="small"></g:plusone>
.....

2. 中 (20 像素),+1 按鈕預覽如右:
需要在步驟二的程式碼中指定 size 參數值為 “medium”,如下範例:

.....
中「+1 按鈕」推薦: <g:plusone size="medium"></g:plusone>
.....

3. 標準預設 (24 像素),+1 按鈕預覽如右:
可不需要在步驟二的程式碼中指定 size 參數值,範例同之前的:

.....
標準「+1 按鈕」推薦: <g:plusone></g:plusone>
.....

4. 長 (60 像素),+1 按鈕預覽如右:
需要在步驟二的程式碼中指定 size 參數值為 “tall”,如下範例:

.....
長「+1 按鈕」推薦: <g:plusone size="tall"></g:plusone>
.....

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

.....
<g:plusone count="false"></g:plusone>
.....

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

.....
<g:plusone size="tall" href="http://hotel.zhupiter.com/mw/?l=cht"></g:plusone>
.....

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

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

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

你喜歡這篇文章嗎? 馬上分享它:

相關文章:

  1. [HTML][JS] 為 textarea 增加 maxlength 屬性
This entry was posted in HTML, 架站 and tagged , , , , . Bookmark the permalink.

Leave a Reply