新增 Facebook Like Button(說「讚」按鈕)於網頁的方法

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

新增 Facebook Like Button(說「讚」按鈕)於網頁的方法

文章 心靈捕手 »

前言:
目前,包括 CNN、IMDb、ESPN 等全球知名網站都已經成為 Facebook 的合作夥伴,未來在這些網站上的內容都可以直接以 Like 按鈕讓網友們表示意見並且分享給自己在 Facebook 上的社群好友。

Facebook 已經提供了 Like Button 的外掛程式供網站經營者們安裝。主要有兩種方式得以達成目標:XFBML 以及 Iframe。本文列舉實例說明:以 XFBML 原始碼的方式,新增 Facebook Like Button(說「讚」按鈕)於 phpBB 3 論壇以及相簿的方法。

增加 Facebook Like Button(說「讚」按鈕)原始碼於網頁上
  1. 取得 XFBML 原始碼:
  2. 填入需要顯示 Facebook Like Button(說「讚」按鈕)的網頁之網址:
    • 將該網址填入 href="" 兩個雙引號之間。
      p.s. 若網址中包含有變數,則需要另外處理。(詳見底下實例說明)
  3. 修改相關屬性:
    • 正體中文:將「en_US」修改為「zh_TW」。
    • 若要顯示個人頭像,則將「show_faces="false"」修改為「show_faces="true"」。
實例:
  1. 顯示 Facebook Like Button(說「讚」按鈕)於 phpBB 3(v3.0.8)論壇的文章頁

    代碼: 選擇全部

    --開啟-- 
    styles/prosilver/template/viewtopic_body.html
    
    --找到--
    <h2><a href="{U_VIEW_TOPIC}">{TOPIC_TITLE}</a></h2>
    
    --之後加入--
    <div id="fb-root"></div><script src="http://connect.facebook.net/zh_TW/all.js#xfbml=1"></script><fb:like href="http://220.134.232.37/phpBB3/viewtopic.php?f={FORUM_ID}&t={TOPIC_ID}" send="false" width="450" show_faces="false" font=""></fb:like>
    
    --儲存與關閉--
    
    p.s.
    1. 清除論壇快取。
    2. 將「wang5555.dnsfor.me/phpBB3」修改為您論壇的網址。
    3. 展示:什麼是(黑心)起雲劑,如何避免食用?
  2. 顯示 Facebook Like Button(說「讚」按鈕)於 phpBB 3(v3.0.8)論壇的相簿(phpBB Gallery v1.0.6)圖片頁

    代碼: 選擇全部

    --開啟-- 
    styles/prosilver/template/gallery/viewimage_body.html
    
    --找到--
    <h2><a href="{S_ALBUM_ACTION}">{IMAGE_NAME}</a></h2>
    
    --之後加入--
    <div id="fb-root"></div><script src="http://connect.facebook.net/zh_TW/all.js#xfbml=1"></script><fb:like href="http://220.134.232.37/phpBB3/gallery/image_page.php?album_id={ALBUM_ID}&image_id={IMAGE_ID}" send="false" width="450" show_faces="false" font=""></fb:like>
    
    --開啟--
    gallery/image_page.php
    
    --找到--
    'ALBUM_JUMPBOX'		=> gallery_albumbox(false, '', $album_id),
    
    --之後加入--
    'ALBUM_ID'		=> $album_id,
    'IMAGE_ID'		=> $image_id,
    
    --儲存與關閉--
    
    p.s.
    1. 清除論壇快取。
    2. 將「wang5555.dnsfor.me/phpBB3/gallery」修改為您論壇相簿的網址。
    3. 展示:高科技氣象預測石.jpg
後記: --
資料來源:
http://wang5555.dnsfor.me/phpBB3/viewtopic.php?f=77&t=1001
施比受有福,祝福您好運! ^_^
歡迎光臨★★心靈捕手★★ :: 討論區
https://wang5555.dnsfor.me/phpBB3/
回覆文章

回到「教學文件庫」