追蹤
Tagtoo開發日記
關於部落格
  • 89206

    累積人氣

  • 0

    今日人氣

    0

    追蹤人氣

Facebook API 備忘(三)

Social plugin 是把 Facebook 的社交性元素外嵌在任意網站的元件
讓以往只能在Facebook 站內做的事情可以延伸到任意的網站
像是  對內容按讚  或是對內容發表評論等動作  這些消息會立即出現在 Facebook塗鴉牆上
讓更多的朋友看見  對於提高人氣有一定的幫助  經過適當的設定  甚至可以收集流量來源資訊
做為日後精準行銷的依據  目前共八種prototype  網站主可以視需要安裝之

提到Social plugins  不得不提的就是"Like(讚)按鈕"
根據
報導  每天有將近6500萬的Facebook使用者按讚
稱它是Social plugins 的王者一點也不為過
我認為原因無他  就是 Like按鈕抓住了"簡單"這兩個特性罷了
以往我們總是看到一個好內容或是覺得朋友的近況很酷
想發表些感想或是想給朋友一些鼓勵的話(代表我有看到)
但要不就是文筆不好  懶得打字  或 沒時間構思感想
這時候Like按鈕就會是一個恰到好處的東西
只要一秒  輕輕一點  我們就好像有做了些事情  表達了一些意見
雖然是這麼簡單的表示  對於文章的作者  或是發佈近況動態的朋友而言
收到一個讚就像是微笑娃娃的一個點頭一樣  是有鼓勵作用的
一次的社交行為就在這麼一予一取的過程中完成了
即便只是簡單的點一個按鈕

而Facebook 官方也不意外的  在技術文件裡花了最多的篇幅介紹"它"

要安裝這個神奇的小按鈕很簡單  只要到以下這頁 
http://developers.facebook.com/docs/reference/plugins/like   把上面的表格填一填
主要是"URL to Like" 這個欄位要填上你自己頁面的網址  其他除非有特殊需求  否則都不用動
填完後按Get Code  就會彈出視窗  類似下圖

有兩種版本  若你完全不了解Javascript SDK  以及Facebook API 是啥鬼的話
那就複製上方iframe那格的內容  貼在想要的位置
要是你稍微懂一些Facebook API  了解所謂的XFBML 以及FB.XFBML.parse() 這種火星文的話
那麼用下方的XFBML版本會好些
安裝好就會像下方這樣 

除了安裝Like按鈕  你的頁面也可以做一些小小的加工
讓它符合Facebook Open Graph 的標準
這樣Facebook 就會更認得這個頁面
會把這個頁面當成一個Open graph 的物件看待(見 Facebook API 備忘(二))
這樣的好處就是所有和這個物件產生連結的人都會留下紀錄
更明確的說  你將會知道誰對這個頁面按過讚
尤其是若到這個頁面去註冊你網站的網域
每天按讚的人口統計就能在這裡一目了然

講了半天  小小的加工到底是什麼
其實就只是加上幾個<meta>標籤( 這裡指 HTML 的標籤)
<meta property="og:title" content="本物件的標題" />
<meta property="og:type" content="本物件的型態(有一套規定 請從
這裡面選)" /> 
<meta property="og:image" content="代表本物件的縮圖(按讚並留言時在他的塗鴉牆上會顯示)" /> 
<meta property="og:url" content="最能代表本物件的網址" /> 
<meta property="og:site_name" content="你網站的網址" /> 
<meta property="fb:admins" content="本物件管理者的Facebook ID(你的Facebook ID)" /> 

加上的位置在<head>與</head>中間
如此一來當有人按讚時  在他的塗鴉牆就會出現類似以下的訊息
其中的縮圖便是由og:image 指定的
"一圖勝千言::Xuite日誌上的圖片" 便是og:title
不論是點縮圖或是標題  都會連過去由og:url 所指定的頁面
如此  按鈕以及meta data雙邊的配合  讓你的網站和Facebook 連結得更緊了


延伸閱讀:
http://nn-no.facebook.com/group.php?gid=137348302963462&ref=share
http://mp.cacafly.com/?p=4358
http://www.inside.com.tw/04/22/facebook-will-serve-1-billion-likes-today
http://www.zdnet.com.tw/enterprise/column/digitalContent/0,2003032720,20145248,00.htm
相簿設定
標籤設定
相簿狀態