新增 Google Plus One(「+1」按鈕)於網頁的方法

phpBB-TW Knowledge Base
收集網友們在竹貓所發表的教學主題或文章,以利分享!
(僅供瀏覽,由版主群維護)
回覆文章
頭像
心靈捕手
默默耕耘的老師
默默耕耘的老師
文章: 8643
註冊時間: 2004-04-30 01:54
來自: Taiwan

新增 Google Plus One(「+1」按鈕)於網頁的方法

文章 心靈捕手 »

前言:
Google 上個月推出了 Plus One 功能,類似於 Facebook 上的讚,您可以透過 Plus One 功能對您覺得喜歡的內容做個標記。

凡是擁有 Google 帳戶的網友,可以藉由按下「+1」按鈕來推薦喜歡的文章,也可讓該文章在 Google 中搜尋結果頁面更有機會脫穎而出。

本文列舉實例說明:新增 Google Plus One(「+1」按鈕)於 phpBB 3 論壇以及相簿的方法。

造訪Google 官方 +1 按鈕網站,將 + 1 加進網頁中
  1. 建立自訂 +1 按鈕:
    • 自訂大小:若無指定,則預設是 24 像素。
    • 選擇語言:台灣國人,可以選擇「中文(繁體)」。
      GooglePlusOne01.png
    • 進階選項:輸入「+1 的網址」。
      p.s.
      若網址中包含有變數,則需要另外處理。(詳見底下實例說明)
  2. 複製以下程式碼並貼到網站上:
    1. 加入 JavaScript 標籤:複製第一組標籤代碼,貼入網頁 HTML 原始碼的 </head> 之前。
      GooglePlusOne02.png
    2. 加入 Plus One 標籤:複製第二組標籤代碼,貼入您所要顯示「+1」按鈕的網頁 HTML 原始碼之任何位置。
      GooglePlusOne03.png
實例:
  1. 顯示 Google Plus One(「+1」按鈕)於 phpBB 3(v3.0.9)論壇的文章頁

    代碼: 選擇全部

    --開啟-- 
    styles/prosilver/template/overall_header.html
    
    --找到--
    </head>
    
    --之前加入--
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {lang: 'zh-TW'}
    </script>
    
    --開啟-- 
    styles/prosilver/template/viewtopic_body.html
    
    --找到--
    <h2><a href="{U_VIEW_TOPIC}">{TOPIC_TITLE}</a></h2>
    
    --之後加入--
    <g:plusone href="http://wang5555.dyndns.org/phpBB3/viewtopic.php?f={FORUM_ID}&t={TOPIC_ID}"></g:plusone>
    
    --儲存與關閉--
    
    p.s.
    1. 清除論壇快取。
    2. 將「wang5555.dyndns.org/phpBB3」修改為您論壇的網址。
    3. 展示:你是誰並不重要,重要的是你和誰在一起
  2. 顯示 Google Plus One(「+1」按鈕)於 phpBB 3(v3.0.9)論壇的相簿(phpBB Gallery v1.0.6)圖片頁

    代碼: 選擇全部

    --開啟-- 
    styles/prosilver/template/overall_header.html
    
    --找到--
    </head>
    
    --之前加入--
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {lang: 'zh-TW'}
    </script>
    
    p.s.
    以上步驟,只需修改一次。
    
    --開啟-- 
    styles/prosilver/template/gallery/viewimage_body.html
    
    --找到--
    <h2><a href="{S_ALBUM_ACTION}">{IMAGE_NAME}</a></h2>
    
    --之後加入--
    <g:plusone href="http://wang5555.dyndns.org/phpBB3/gallery/image_page.php?album_id={ALBUM_ID}&image_id={IMAGE_ID}"></g:plusone>
    
    --開啟--
    gallery/image_page.php
    
    --找到--
    'ALBUM_JUMPBOX'		=> gallery_albumbox(false, '', $album_id),
    
    --之後加入--
    'ALBUM_ID'		=> $album_id,
    'IMAGE_ID'		=> $image_id,
    
    --儲存與關閉--
    
    p.s.
    1. 清除論壇快取。
    2. 將「wang5555.dyndns.org/phpBB3/gallery」修改為您論壇相簿的網址。
    3. 展示:32-蘭陽博物館(宜蘭,台灣)
後記:
  1. 利用以上的方法,必須網站可支援貼上 JavaScript 的標籤代碼。
  2. 指定「+1 的網址」時,必須使用網域名稱。
  3. 若要將「+1」按鈕變更顯示於標題的右方,則修改如下(以論壇文章頁為例):

    代碼: 選擇全部

    --開啟-- 
    styles/prosilver/template/gallery/viewimage_body.html
    
    --找到--
    <h2><a href="{U_VIEW_TOPIC}">{TOPIC_TITLE}</a></h2>
    
    --在 </a> 與 </h2> 之間加入--
     <g:plusone href="http://wang5555.dyndns.org/phpBB3/viewtopic.php?f={FORUM_ID}&t={TOPIC_ID}"></g:plusone>
  4. 若影響論壇頁面載入速度,則可以考慮以下修改:
    移除置頂頁(overall_header.html)的 JavaScript 標籤代碼;
    將二組代碼合併顯示於文章頁(viewtopic_body.html)之中。
  5. 參考連結:
--
資料來源:
http://218.161.28.134/phpBB3/viewtopic.php?f=77&t=1048
施比受有福,歡迎來信賜教,謝謝 & 再見!
祝福您 好運 ^_^
歡迎加入★★心靈捕手★★ :: 討論區!!
http://wang5555.hopto.org/phpBB3/
p.s. 奉老婆之命:在晚上十一點前,得關機睡覺!!!

回覆文章

回到「教學文件庫」