[Blogger] 分享到 Facebook 卻發現文字抓錯?
因為最近發現 Facebook 按讚之後分享到您的 Profile 上的畫面,會像上圖那樣,會抓標題和摘要內文及圖片,就像按分享的效果一樣,所以,所抓的文字正不正確,大概也會影響朋友去點這篇文章的興趣吧。(以前是只顯示一條文字,內容是誰誰誰說那一個連結讚)
Facebook 的 URL Linter 工具
先介紹 Facebook 的 URL Linter 工具,可以用來 Debug 你分享到 Facebook 上的網址,Facebook 會抓取的內容。
先輸入您文章的網址,按下 Lint 鈕:
這支工具就會依照您的 OpenGraph 設定和網頁上的 META 去擷取資料,讓你檢測抓到的資料對不對。
解決文字抓錯的問題
這篇要談的是抓摘要文字的部份,Facebook 會抓的是第一個 <p></p> 符號之間所置放的文字或者 <description></description> 之間所置放的文字 (實測結果應該是優先抓 <description>),由於,大家很可能都是抓現成的版型,有些版型會用到 <p> 符號在文章內文之前,那就很有可能抓到夾在該 <p></p> 之間的文字,而不是所想分享的文章的文字,因此最簡單的方法,大概是像底下這樣:
找到 <data:post.body/>,在前後加上 <description></description>,如下:
<description><data:post.body /></description>
然後,這篇所要的抓到正確文字就可以解決了,您可以用 URL Linter 去測試看看就知道。
文字抓錯雖然事小,卻對追求完美的我影響很大~
回覆刪除感謝你的教學!
@鄔騏鴻,
回覆刪除很高興解決了您的問題,您有一個很棒的格,在下訂閱了。
謝謝你喜歡!對我來說是很棒的鼓勵^^
回覆刪除給予了og:description,測試網頁也有正確抓到值,但是點了讚之後,出現在自己塗鴉牆上面的連結說明文字,仍舊是顯示某個P標籤內容..請問該怎麼辦...
回覆刪除Re: art <2312125869017541887>
回覆刪除依我之前幫朋友處理的經驗,應該是因為有些版型在進入主文之前的某個版塊使用了 p 標籤,我通常會將版型也順便調整,以 div 標籤為主,或者就改用 HTML5 的標籤,您參考看看
或者您將有問題的網址貼上來,我幫您看看原始碼亦可。
Re: art <2312125869017541887>
回覆刪除因為是作公司的事情,不太方便留網址。
可以請教一下,您撰寫的解決辦法那邊,這一段程式碼是從哪邊來的呀?,我是直接在https://developers.facebook.com/docs/reference/plugins/like的Step1那邊點Get Code然後再修改的,卻沒有你的那段標籤耶...
Re: art <349472889618524416>
回覆刪除你在 developers.facebook 那邊是得到按讚按鈕的 code,我這裡是在聊要怎麼讓 Blogger 版型在 FB 分享時可以抓到正確的文字。
Re: art <349472889618524416>
回覆刪除您也可以參考 open graph protocol: https://developers.facebook.com/docs/opengraph
Re: WFU <3346151864555069077>
回覆刪除^^
我剛剛連過去看您的格也有不少跟 Blogger 有關的實用分享,很讚!
你好~不知為什麼~我試了這個方法以後,
回覆刪除仍然在分享、或是按讚都沒有辦法顯示出文章的預覽,
不知道是哪邊出錯了?
不知是否可以幫我看一下呢??
http://ninalovezs.blogspot.com/
Re: 怜子 <2687519988750648812>
回覆刪除您用 URL Linter 看一下就知道了,您有一些 opengraph 的語法沒有。
您可以先看前一篇把那些 opengraph 語法加上去:http://jimmyyen.blogspot.com/2010/10/blogger-facebook-facebook-like-button.html
作者已經移除這則留言。
回覆刪除非常謝謝你的回答,
回覆刪除我除了參考那篇,也有看了其他關於opengraph語法加上去
似乎沒有任何改變(淚)
因為我是一個完全沒有接觸語法的(只有以前會簡單的html)
但還是謝謝你的幫忙,看來我可能跟blogger比較沒緣份~哈!
Re: 怜子 <8245777275485187108>
回覆刪除剛剛用 url linter 去看了一下,大致上差不多了,FB 有抓到您的文章內文了,您再試看看。
謝謝!
回覆刪除我知道哪邊有奇怪的問題了!
當我自己用連結、還有用我自己加入的「讚」時是正常的(除了圖顯示不出來,但這我可以在來克服)
但是如果是用blogger內建分享出去的功能,就會顯示不出來!
這個問題我就不知道該如何解決了,還是我乾脆去Addthis的分享工具抓過來用!
不管如何,有解決讓我很開心!非常感謝!!
不好意思又是我
回覆刪除因為我不小心按到了回復,
之前所寫的語法全部不見(淚)
結果現在經過測試,不管語法怎麼寫,
og:description只會出現「data:post.body」
請問是語法有寫錯嘛?謝謝
最後我是用
回覆刪除meta expr:content='data:post.body' property='og:description'/
強制他讀
這樣的語法解決,但是文章頁面的左上角會有
「TEMPLATE ERROR: Invalid data reference post.body: No dictionary named: 'post' in: ['blog', 'skin', 'view']」這行字
不過我已經極限了!想說暫時就這樣了~
真不好意思打擾您了!
Re: 怜子 <5632338524452093525>
回覆刪除因為從你的 blog 原始碼去看,其實那段 meta 並沒有抓到 description,你用的 expr:content='data:post.body' 之所以會出現錯誤訊息,是因為沒有這東西,我的建議是刪掉那一行,再試試。
你可以用瀏覽器觀看你 blog 的原始碼就會看到這一行事實上是沒有資料的:meta content='' name='description'
謝謝你的幫忙,
回覆刪除不過拿掉就沒有分享了!
這幾天我的腦細胞應該死了很多~哈哈!
沒關係~謝謝你!!畢竟我不是專業的網頁程式師,
使用blogger對我來說好像有點太專業了!
還是要謝謝你^^
哈囉!要通知你一聲,結果我換了一個版型以後,
回覆刪除再使用你這篇的方法就可以了(真不知道前幾天我在忙什麼)
非常感謝你這幾天的幫忙,剛剛有照著你的方法成功的裝了facebook 的留言,
不過不知道為什麼fb提供appid跟admin的語法blogger不接受,
所以無法後台管理留言,試了幾次都不行就拿掉了(這次我記得要備份了)
不管如何,在您的部落格上學習到很多!很謝謝你的分享!
Re: 怜子 <1201808105820037168>
回覆刪除^^ 恭喜了。
嗨,非常冒昧地請教一下:
回覆刪除我看到您這裡有在教人家關於FB按讚及分享後的問題,
我用您說的方法,但是出現很多問題,按讚或分享後
有的只有出現連結的網址,沒有圖及標題內文,有的會有網址,圖,標題但沒有內文
查看我自己的原始碼,description是空的,
使用URL linter 會有以下的 warmings ,但還是沒有description
og:type is missing
og:image is missing
Objects of this type do not allow properties named 'fb:page_id'.
但是我不清楚為什麼會這樣?可以幫我看一下,到底發生了甚麼事? 感謝!!
http://fb-share.blogspot.com
不好意思,請問目前我的朋友正有blogger文章分享至FB時會出現照片不對及文章內容抓錯的問題,文章都是抓到blogger介紹的內容,看過您的文章之後,我了解應該是語法上的問題,但語法部份我不會,您上面說明的語法,請問要在哪裡找?我有在blogger的html找過,但沒有找到您說的那些,可以請您為我解說一下步驟和做法嗎?萬般感謝^^
回覆刪除Re: 曉雯 <6415077881802376497>
回覆刪除範本-->修改HTML 那邊,記得勾"展開小裝置範本"。
最近有發現 Blogger 後台有提供一個搜尋偏好設定 (設定›搜尋偏好設定) 那裡可以設定文章或者整個 blogger 的 meta description,可以讓社群網站在抓這文章內容的時候抓到您所定義的內容。
另一篇文章是抓圖的您參考:http://jimmyyen.blogspot.tw/2010/10/blogger-facebook-facebook-like-button.html
後台提供的功能,要如何設定呢?因為實在不懂它的意思,謝謝
回覆刪除Re: 曉雯 <5099521872407768449>
回覆刪除官方文件:http://support.google.com/blogger/bin/answer.py?hl=zh-Hant&answer=2472665
謝謝您分享的文章,我剛找到您發的其他文章,終於搞清楚是在版型那改,我也已經改好了,謝謝您
回覆刪除Re: 曉雯 <8085586010837729306>
回覆刪除^^恭喜您。
感謝這篇讓我終於解決分享文章到fb抓不到文章內文的問題了!
回覆刪除您好!我在專頁分享的時候,FB抓的是我的"標簽"文字,而非內容。
回覆刪除用過您的方法,還是一樣。
請問可以幫忙看一下嗎? http://stella1008.blogspot.tw
感謝!