如何在blogger(或其它BSP平台)的文章裡嵌入FB social plugin
0. 首先 FB app 申請的介面變得不一樣了 好久沒申請新的app 都不曉得
必填的欄位有 app name 在申請時會問你 另外還有Web 這個tab的"Site URL and Domain"
裡面的Site URL 要填, 要達到以下的功能, 先去申請一個FB app(別忘了Site URL 要填對, 要填那個網誌的URL)
FB app 詳情頁: https://developers.facebook.com/apps/247083818644935
1. 接下來廢話不多說, 開始介紹一下blogger文章內要怎麼嵌入FB like & comment, 就像這個頁面一樣 http://tagtoo-activities.blogspot.com/2011/07/blog-post_1505.html
2. 首先, 開一個Blogger上的新網誌, 例如: http://farmer-free.blogspot.com/
3. 以管理者身分登入該網誌, 點擊"設計" --> "修改HTML"
4. 在html編輯欄中, 找到<head><meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
然後將下列的code插入其後:
<meta content='100000703046844' property='fb:admins'/>
<meta content='247083818644935' property='fb:app_id'/>
<meta content='農業觀察誌' property='og:site_name'/>
<meta content='一個觀察台灣農業的網誌' property='og:description'/>
<meta content='blog' property='og:type'/>
注意
fb:admins 代表這個頁面管理者的fb id
fb:app_id 代表這個頁面要啟動FB app 的id
og:site_name 代表隨後自動產生的OG(open graph)粉絲團(ex: http://www.facebook.com/pages/%E8%BE%B2%E6%A5%AD%E8%A7%80%E5%AF%9F%E8%AA%8C-%E5%B0%88%E8%A8%AA%E9%85%B5%E7%B4%A0%E9%81%94%E4%BA%BA/196481217076076)的標題
og:description代表隨後自動產生的OG(open graph)粉絲團的說明內容
og:type 代表OG粉絲團的型別
--> 編輯完畢儲存範本
5. 去FB social plugin的網站裡選取like or comment 這個項目, 點進去正確填寫想嵌入FB like or comment 文章的url, 接著按"Get code" 就會跑出一個浮動視窗, 複製FBML的code
6. 把複製的code貼到文章(須進入html編輯模式)的底端(或想放的地方), 例如:
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="http://farmer-free.blogspot.com/2011/07/blog-post.html" num_posts="2" width="500"></fb:comments>
然後發表文章, 接著就大功告成啦!
Note: 以前要初始化FB這個物件(當然Site URL 和appId要對得起來), 然後執行parse指令才能將FBML tag 轉譯成正確的html code 現在似乎不用了(還是blogger 支援了?)
嵌入這兩樣東西有什麼好處呢? 當然就是他可以幫助你更加了解誰喜歡你的文章, 嵌入了以後以管理者的帳號登入會有以下效果
必填的欄位有 app name 在申請時會問你 另外還有Web 這個tab的"Site URL and Domain"
裡面的Site URL 要填, 要達到以下的功能, 先去申請一個FB app(別忘了Site URL 要填對, 要填那個網誌的URL)
FB app 詳情頁: https://developers.facebook.com/apps/247083818644935
1. 接下來廢話不多說, 開始介紹一下blogger文章內要怎麼嵌入FB like & comment, 就像這個頁面一樣 http://tagtoo-activities.blogspot.com/2011/07/blog-post_1505.html
2. 首先, 開一個Blogger上的新網誌, 例如: http://farmer-free.blogspot.com/
3. 以管理者身分登入該網誌, 點擊"設計" --> "修改HTML"
4. 在html編輯欄中, 找到<head><meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
然後將下列的code插入其後:
<meta content='100000703046844' property='fb:admins'/>
<meta content='247083818644935' property='fb:app_id'/>
<meta content='農業觀察誌' property='og:site_name'/>
<meta content='一個觀察台灣農業的網誌' property='og:description'/>
<meta content='blog' property='og:type'/>
注意
fb:admins 代表這個頁面管理者的fb id
fb:app_id 代表這個頁面要啟動FB app 的id
og:site_name 代表隨後自動產生的OG(open graph)粉絲團(ex: http://www.facebook.com/pages/%E8%BE%B2%E6%A5%AD%E8%A7%80%E5%AF%9F%E8%AA%8C-%E5%B0%88%E8%A8%AA%E9%85%B5%E7%B4%A0%E9%81%94%E4%BA%BA/196481217076076)的標題
og:description代表隨後自動產生的OG(open graph)粉絲團的說明內容
og:type 代表OG粉絲團的型別
--> 編輯完畢儲存範本
5. 去FB social plugin的網站裡選取like or comment 這個項目, 點進去正確填寫想嵌入FB like or comment 文章的url, 接著按"Get code" 就會跑出一個浮動視窗, 複製FBML的code
6. 把複製的code貼到文章(須進入html編輯模式)的底端(或想放的地方), 例如:
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="http://farmer-free.blogspot.com/2011/07/blog-post.html" num_posts="2" width="500"></fb:comments>
然後發表文章, 接著就大功告成啦!
Note: 以前要初始化FB這個物件(當然Site URL 和appId要對得起來), 然後執行parse指令才能將FBML tag 轉譯成正確的html code 現在似乎不用了(還是blogger 支援了?)
嵌入這兩樣東西有什麼好處呢? 當然就是他可以幫助你更加了解誰喜歡你的文章, 嵌入了以後以管理者的帳號登入會有以下效果
只要點擊"管理模式"就可以執行相關的管理, 而到這個頁面 https://developers.facebook.com/tools/comments?id=247083818644935 (id請輸入appId)
可以看到所有掛在這個app底下的FB comment(缺點是你無法得知個別出處(哪篇文章) 所有掛在這下面的comment 都會並列)
至於like, 旁邊也有管理頁面, 點了以後就會進入該頁面的og 粉絲團, 你可以知道誰對這頁點了讚, 此頁為自動產生
FB的留言有BUG,不知道你有沒有注意到?
回覆刪除