整合Facebook 讚 與 分享按鈕到Blogger

若我們想要加強 Blogger 文章與 Facebook 的使用者關連性，讓有使用並登入 Facebook 的網友，來到您的 Blogger 後，也可以給您的文章來一個讚! 我們可以整合 Facebook 提供的 Facebook Social Plugin，來為網站提供更多的整合性!

要使用 Facebook 的外掛，請先至 http://developers.facebook.com/setup/ 申請 appId， 接下來請將你的「應用程式 ID / API 鑰匙」記下來， 下面步驟中一直會用到的appId就是指這一串數字。

接下來就可以安裝讚的功能:

第一步：點擊 Facebook Social Plugin 中的 Like Button 連結。

可針對個人需求調整設定：



  • URL to Like：可填可不填，現在已經將預設為當前的 url 了，多數人應該都不用填。 
  • Send Button：如果要加入分享的按鈕直接勾選即可。
  •  Layout Style：分為 Standard, Button_count 和 Box_count，選擇後可在右上角看到預覽。 
  • Width：設定寬度 
  • Show Faces  ：要不要顯示留言者的圖片
  • Verb to display  ：顯示的文字 (like的話在中文會顯示讚)
  • Color Scheme  ： 顏色深淺，可配合您的版面設計
  • Font：字型

設定好後按下 Get Code。

將第一段程式碼複製起來。



第二步：登入 Blogger 管理介面
  1. 進入 Blogger後台，找到範本，右上角處先備份設定檔。 
  2. 進入範本-->修改HTML 的頁面，將「展開小裝置範本」或「Extend xxxx....」勾選起來。 
  3. 用搜尋功能找到<body>的 tag，可能會有其他長相如< body class=xxxx> 之類的。 將第一段程式碼貼在 tag 的下方。

注意需自行替換「'」、「"」、「&」等符號，可以參考這裡。
如果懶得自己搞，可以直接複製以下代碼，請把 YourAppID 改成你的的 appId：


<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/zh_TW/all.js#appId=YourAppID&amp;xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

第三步：將 Get Code 的第二段 code 複製到想要放的地方。

在小裝置範本中搜尋「<b:includable id='post' var='post'>」，這是每篇文章的開頭，之後會有文章標題、時間、作者等。 找到適當位置後插入第二段 code。


這樣就可以在每篇文章前面看到網友讚聲的情況了。


Reference:
http://joshua0214.blogspot.com/2011/05/blogger-facebook.html

這個網誌中的熱門文章

[TCL] 基本語法與指令 - 2. TCL 語法

TCL Script 可視為一個包含許多 TCL 指令 (TCL command) 的程式，一個 TCL 指令的基本語法為： command arg1 arg2 arg3 …. 在 TCL 語言中，每行指令的第一個單字為指令名稱 空白字元用來分隔指令名稱與各個個別的參數 個別指令的分隔是以分號與換行符號作為分隔符號 一個參數如果超過一個英文單字 (亦即字串中間穿插空白或其它符號)，可用雙引號與大括號將這些元素組成 (grouping) 單一一個參數。使用雙引號與大括號的差別，在於TCL針對雙引號中的字串會做置換處理 (substitution)，例如變數值的代換或是執行包含於字串中的 TCL 指令(使用中括號來表示)，而對於大括號所括住的內容 TCL則不會有這些置換處理。 底下是一個簡單的 TCL Script 與執行後的輸出： # Demo1.tcl puts stdout one; puts stdout two set x 4 set y 6 puts "$x + $y = [expr $x + $y]" puts {$x + $y = [expr $x + $y]} puts "Hello\n\nTCL!" % ./Demo1.tcl one two 4 + 6 = 10 $x + $y = [expr $x + $y] Hello TCL! 下表所列的符號在 TCL 語言裏有特殊的意義： 置換符號 (substitution symbols) $ 變數值置換符號。$ 符號用來取出指定變數的值。底下利用 set 指令設定 x 變數的值，並用 puts 指令輸出 x 的內容到 Console： set x 5 puts stdout $x 如上列最後一行程式碼，取出變數值時需在變數名稱前加上 $ 符號。 [ ] 命令置換符號。TCL 將中括號中的內容視為一個指令，會執行其中的指令並將結果傳回。例如 Demo1.tcl L5： puts "$x + $y = [expr $x + $y]" 在做完 x 與 y 兩個變數的置換後，TCL解譯器遇到中括號認為其中為另一個可執行的指令，指令名稱為 expr。在執行 expr指令前，TCL 先將...
Read More »

[TCL] 基本語法與指令 - 1. TCL 簡介

TCL 的全名為 Tool Command Language ， 唸作 ”Tickle” ， 事實上它是一個 Scripting Language （俗稱劇本語言或腳本語言）， 也是一個直譯器 (Interpreter) 。 TCL 語言有三個特色： 1.        語法簡單，容易上手 2.        TCL 的身份如同 UNIX 裡的 Shell languages 像是 Bourne Shell (sh) 、 C Shell (csh) 、 Korn Shell (ksh) 與 Perl 一樣，用來執行與控制系統上的程式。 TCL 具備足夠的程式化能力 (variable 、 flow control 、 procedure) 與存取檔案、程序 (Process) 及網路的功能，供組裝既有軟體元件以建立符合需求的新工具。 3.        可內嵌 (embed) 到應用程式中，讓軟體使用者透過程式員提供的高階 TCL 指令，自訂應用程式的行為。 除了上列三個主要特色外，底下所列的幾點也是 TCL 語言成功的原因： n    跨平台，可在各種系統 (UNIX 、 Windows 、 Macintosh 等 ) 執行 TCL 程式 n    強大的字串處理能力『常規表示式 (Regular Expressions) 』，協助程式員使用表示式的規則或樣式 (pattern) ，用來搜尋、比對、粹取或是取代符合樣式的複雜字串。 n    可用 C 語言開發 TCL Extension Library ，擴充 TCL 的指令與能力，例如著名的 Tk extension 讓 TCL 擁有 GUI Programming 的功能、 expect extension 用來開發可與應用程式互動式溝通的程式。 n    已有一大堆可在各式場合發揮效用的 package ，諸如各種網路應用 (ftp, http 、 email, dns, m...
Read More »

[TCL] 基本語法與指令 - 3. 資料型態

TCL 語言的基本資料型態有： string list array handle：用於 I/O channel、socket, thread 等，此節暫不說明。 String 字串資料型態 字串是 TCL 語言最基本的資料型態，常見的字串處理指令有：string、append、format、scan 以及 binary。例如使用string 指令來計算指定字串的長度： % set name “Brent Welch” % string length $name =>11 其中 string 指令的第一個參數代表對字串的操作方式。可以試著傳遞一個錯誤的參數給 string 指令，透過這個方式查看string指令有哪些可用的方法： % string rick bad option "rick": must be bytelength, compare, equal, first, index, is, last, length, map, match, range, repeat, replace, tolower, toupper, totitle, trim, trimleft, trimright, wordend, or wordstart 下表總結 string 指令的用法：        string bytelength str 傳回字串的位元組數(以UTF-8 encoding計算)，傳回值可能會跟計算字元數的string length有所不同 string compare ? -nocase? ?-length len?str1 str2 比較兩字串的內容，若相同傳回『0』、其他的傳回『1』。 -nocase：表示不分大小寫 例： % string compare –nocase Rick rick =>0 -length：可以指定要比較的字串長度 例： string compare –length 3 rick ricp =>0 string equal ?-nocase? str1 str2 比較str1和str2的內容，若相同傳回『1』、否則傳回『0』 string first subStri...
Read More »