(本文最後檢閱日期25th November, 2015)
added on 26th October, 2013
這篇是講解facebook sharer 的機制
sharer 的其他設定及使用方法請到小弟另一篇文章
facebook sharer 使用詳解 之 description, title 和 image
added on 26th October, 2013
這篇是講解facebook sharer 的機制
sharer 的其他設定及使用方法請到小弟另一篇文章
facebook sharer 使用詳解 之 description, title 和 image
facebook sharer是一個使人又愛又恨的功能
你永遠也不知道要如何設定才能正確顯示
這個問題以前每天都有上千上萬的人在facebook developer forum 問
但通常都沒有人回答
就算有，他們的 solution 多數一樣沒有效
小弟也鑽研了好久的時間
現在總叫略有小成跟各位分享
sharer是啥?
就是facebook 的share link功能了
用來分享網頁的
它的正身是
https://www.facebook.com/sharer/sharer.php
再來看你會見到sharer帶兩個參數
分別是u和t
u是URL, t是title
例如www.facebook.com/sharer/sharer.php?u=http://www.littleshell.net&t=littleshell的網站
(added on 10th April, 2015)
sharer已經不再support t 這個參數
看到這裡各下可能會想
e??正~!很易用耶~有啥難??
小弟想當年第一次接觸sharer時也是這樣想
不過別發夢了, 沒這樣易
sharer的運作是如何的呢
它會讀取參數u, 即url
然後會extract url 裡的html
最後變成Open Graph object (Open Graph是另一個大課題, 不在此說明)
(title 的詳細設定方法請到facebook sharer 使用詳解 之 description, title 和 image)
之後.........它就會可惡地把這個結果cache 30mins~一天
因為會cache 的原故
這就成了為何很多人在說代碼可行但其他人照用就不行
解決的方法不難, 只要share 隨意加些參數在url 後就行了
例如www.littleshell.net/index?test=1 總之就是保持url 是unique就可以了
這做法可瞞過sharer使它以為是另一個新的graph object
到測試完成後把多餘的添加參數拿走就好
要做一個sharer懂看的html 也不難
可能你都看過很多不同的方法
不過因facebook 現在要行open graph 的原故
舊的方法不太穩定, facebook似乎也不再support舊方法了, 不建議用
我們要用上open graph protocol(og), 故此
<html>裡要加一個attributes 讓html知道og 是甚麼
<html xmlns:og="http://ogp.me/ns#">
然後最基本, 你需要加上三個og properties, 分別是
<meta property="og:title" content="The Rock"/>標題
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>圖示
<meta property="og:description" content="blar blar blar blar blar"/>敘述
基本的用法就是這樣了
一般來說這段html 都不會有問題的
詳細用法請參閱 facebook sharer 使用詳解 之 description, title 和 image
重頭戲到了
依照上面的寫法
你很開心的share了
有幾個字你不滿意, 想改
ar ......媽的...
cache了改不到???
別慌, 還有一個工具未介紹
就是url
是一個sharer的 debug工具
http://developers.facebook.com/tools/debug (updated at 13rd March, 2012)
這會告訴你facebook 在將要被share的url 裡extract 了些甚麼
正式share 前不況用先來這裡測試
Linter 還有一個妙用
它有把cache renew的神效
就是說當我用Linter來測試www.littleshell.net
本身sharer.php裡的cache也有可能被更新!
若果依然都不能......
added on 25th November, 2015
這有可能要檢查一下您的網址是否public accessible
eg http://192.168.123.123 像這樣只有自己才能看到的網址facebook是不可能找到資料的
是否有redirect script?
facebook 是找取網頁render好的那刻的html,所以如果你的網頁有跳轉頁面的話那facebook 只能抓到跳轉前的html
換句話說, 如果你的頁面是用javascript 控制的話, 那facebook 是會抓javascript運行前的html source code
時間線是這樣的
server 回傳需要的html > facebook 抓取server回傳的html > 讀取css, js 等等 > browser 排版 > javascript 開始運行
是否有密碼保護??
例如.htaccess 等等 facebook 同樣是抓不到資料的
若果依然都不能......
對不起了, 小弟暫時也無能為力
有說得不明白的地方, 還請指正, 謝謝
thanks for your share!
回覆刪除above info is useful in my current problem!
its great to hear that my solusion helps someone~:D
回覆刪除i have been researching the sharer for around 2 years~T_T
i use this tool to fix it,
回覆刪除https://developers.facebook.com/tools/debug
however, it cannot see immediately.
pleased to see your comments~
回覆刪除have u setup your OG potocol correctly?
and also try adding some meaningless parameters to make your url unique therefore sharer will treat it as a new graph object, see if sharer extracts your "new page" correctly
please feel free to let me know if you're still experiencing the problem