[教學] 自訂 Facebook 讚、推薦傳送按鈕與留言框

嘗試替 iLowkey 佈景加入更多元素(只不過會拖垮網頁速度XD)

這次加入 Facebook 的 讚、傳送按鈕與留言框

其實加入這些元件真的爆簡單的...有經營 blog 的人或多或少可以加入這些元件

可以有效與網友互動並且提升曝光

有時候看見別人按讚會有莫名興奮感 (喘) :evil:


以下為演示，請不要再照抄低調一點的擺置方式，請自行發揮創意囉！

那要怎麼加入這些元件?

首先當然是註冊一個 「應用程式」 囉 :mrgreen:
(其實就是開發人員用的一些 SDK 或 API 的頁面，不懂也不要緊~會填資料申請就好)

網址：http://www.facebook.com/developers/
註冊請看：http://sofree.cc/fb-app-1/

當完成註冊後直接跳到這個頁面
這裡就可以看見你自己的 APP ID (應用程式 ID / API 鑰匙) 與 應用程式密鑰





這裡我們需要的資訊為
APP ID (應用程式 ID / API 鑰匙) 與 管理員 ID (或粉絲專頁ID)

以低調宅的低調一點來說：
APP ID (應用程式 ID / API 鑰匙)：
（鬼隱一下） :idea:
450073xxxxx7898
管理員 ID (或粉絲專頁ID)：
ilowkey

通常是填粉絲專頁ID
這裡低調一點的粉絲專頁為 http://www.facebook.com/ilowkey (請按讚~大誤)

後面的 ilowkey 便是你的粉絲專頁ID

將關鍵資訊加入 Header

以 wordpress 來說，開啟你要加入元件的佈景主題 header.php






接著就是從 Facebook 開發者的頁面去找你要的按鈕語法囉! :smile:

建立 「讚」的按鈕語法

要仿造低調一點右上角的「讚」按鈕很簡單！
前往 Social Plugins 頁面

以 Like Box
進入後需填寫一些資訊來取得語法





如圖所示填寫你所需要的大小、網址等資訊 (可即時預覽按鈕)
調整後再複製語法即可

一般使用 HTML5 會得到兩個語法





上面是 social plugins 必備通用語法



看要加在哪裡都可以（我是直接塞在側邊欄小工具上）
需注意的是假如你用了多個 social plugins，這個語法只需加入一次！

另一個才是按鈕語法



看你想在哪裡顯示就貼在哪裡～非常方便！

建立 推薦傳送 按鈕

想要低調一點這種短的「讚」與「傳送」按鈕？





一樣在Social Plugins 頁面
按下「Like Button」
一樣上半部同上面的「讚」按鈕所獲得的 script 語法

下半部則為按鈕語法（想在哪裡顯示就貼在哪裡！）








code 就跟圖一樣，這裡就不張貼了～

至於 wordpress 要同步文章頁面怎麼做！？
把網址改為

就對了

EX.

FB 留言框

一般來說這個留言框可有可無，我有裝來玩玩看（試玩一下）
點擊「Comments Box」進入後





與前面相同的上半部 fb-root 語法為通用語法
下半部則為按鈕語法（要顯示在哪就貼哪）





大概就可以像是低調一點的留言板這樣... :eek:





張貼後位置很醜？這就要自己去加強自己的 CSS 功力了 :as43
（我功力非常差，非本科系出身只能亂加亂搞亂亂弄）


整合了 Facebook 以後與網友的活動會增加
這時就要看各站長的經營了～好的話粉絲就可以慢慢增加～
當然弄得不好的話就像低調宅這樣...
繼續宅～久久發一次文（飄）