跳到主要內容

加密

長串數字匿名幣,TradeOgre 被查緝。 房貸尚有寬限期,加拿大警方公告卻玄疑。 輕羅小扇撲流螢,Machi 夏日比基尼。

[Blogger] 分享到 Facebook 卻發現文字抓錯?

image

因為最近發現 Facebook 按讚之後分享到您的 Profile 上的畫面,會像上圖那樣,會抓標題和摘要內文及圖片,就像按分享的效果一樣,所以,所抓的文字正不正確,大概也會影響朋友去點這篇文章的興趣吧。(以前是只顯示一條文字,內容是誰誰誰說那一個連結讚)

Facebook 的 URL Linter 工具

先介紹 Facebook 的 URL Linter 工具,可以用來 Debug 你分享到 Facebook 上的網址,Facebook 會抓取的內容。

先輸入您文章的網址,按下 Lint 鈕:

image

這支工具就會依照您的 OpenGraph 設定和網頁上的 META 去擷取資料,讓你檢測抓到的資料對不對。

image

解決文字抓錯的問題

這篇要談的是抓摘要文字的部份,Facebook 會抓的是第一個 <p></p> 符號之間所置放的文字或者 <description></description> 之間所置放的文字 (實測結果應該是優先抓 <description>),由於,大家很可能都是抓現成的版型,有些版型會用到 <p> 符號在文章內文之前,那就很有可能抓到夾在該 <p></p> 之間的文字,而不是所想分享的文章的文字,因此最簡單的方法,大概是像底下這樣:

找到 <data:post.body/>,在前後加上 <description></description>,如下:

<description><data:post.body /></description>

然後,這篇所要的抓到正確文字就可以解決了,您可以用 URL Linter 去測試看看就知道。

留言

  1. 文字抓錯雖然事小,卻對追求完美的我影響很大~
    感謝你的教學!

    回覆刪除
  2. @鄔騏鴻,
    很高興解決了您的問題,您有一個很棒的格,在下訂閱了。

    回覆刪除
  3. 謝謝你喜歡!對我來說是很棒的鼓勵^^

    回覆刪除
  4. 給予了og:description,測試網頁也有正確抓到值,但是點了讚之後,出現在自己塗鴉牆上面的連結說明文字,仍舊是顯示某個P標籤內容..請問該怎麼辦...

    回覆刪除
  5. Re: art <2312125869017541887>
    依我之前幫朋友處理的經驗,應該是因為有些版型在進入主文之前的某個版塊使用了 p 標籤,我通常會將版型也順便調整,以 div 標籤為主,或者就改用 HTML5 的標籤,您參考看看

    或者您將有問題的網址貼上來,我幫您看看原始碼亦可。

    回覆刪除
  6. Re: art <2312125869017541887>
    因為是作公司的事情,不太方便留網址。
    可以請教一下,您撰寫的解決辦法那邊,這一段程式碼是從哪邊來的呀?,我是直接在https://developers.facebook.com/docs/reference/plugins/like的Step1那邊點Get Code然後再修改的,卻沒有你的那段標籤耶...

    回覆刪除
  7. Re: art <349472889618524416>
    你在 developers.facebook 那邊是得到按讚按鈕的 code,我這裡是在聊要怎麼讓 Blogger 版型在 FB 分享時可以抓到正確的文字。

    回覆刪除
  8. Re: art <349472889618524416>
    您也可以參考 open graph protocol: https://developers.facebook.com/docs/opengraph

    回覆刪除
  9. Re: WFU <3346151864555069077>
    ^^
    我剛剛連過去看您的格也有不少跟 Blogger 有關的實用分享,很讚!

    回覆刪除
  10. 你好~不知為什麼~我試了這個方法以後,
    仍然在分享、或是按讚都沒有辦法顯示出文章的預覽,
    不知道是哪邊出錯了?
    不知是否可以幫我看一下呢??
    http://ninalovezs.blogspot.com/

    回覆刪除
  11. Re: 怜子 <2687519988750648812>
    您用 URL Linter 看一下就知道了,您有一些 opengraph 的語法沒有。

    您可以先看前一篇把那些 opengraph 語法加上去:http://jimmyyen.blogspot.com/2010/10/blogger-facebook-facebook-like-button.html

    回覆刪除
  12. 非常謝謝你的回答,
    我除了參考那篇,也有看了其他關於opengraph語法加上去
    似乎沒有任何改變(淚)
    因為我是一個完全沒有接觸語法的(只有以前會簡單的html)
    但還是謝謝你的幫忙,看來我可能跟blogger比較沒緣份~哈!

    回覆刪除
  13. Re: 怜子 <8245777275485187108>
    剛剛用 url linter 去看了一下,大致上差不多了,FB 有抓到您的文章內文了,您再試看看。

    回覆刪除
  14. 謝謝!
    我知道哪邊有奇怪的問題了!
    當我自己用連結、還有用我自己加入的「讚」時是正常的(除了圖顯示不出來,但這我可以在來克服)
    但是如果是用blogger內建分享出去的功能,就會顯示不出來!
    這個問題我就不知道該如何解決了,還是我乾脆去Addthis的分享工具抓過來用!
    不管如何,有解決讓我很開心!非常感謝!!

    回覆刪除
  15. 不好意思又是我
    因為我不小心按到了回復,
    之前所寫的語法全部不見(淚)
    結果現在經過測試,不管語法怎麼寫,
    og:description只會出現「data:post.body」
    請問是語法有寫錯嘛?謝謝

    回覆刪除
  16. 最後我是用
    meta expr:content='data:post.body' property='og:description'/
    強制他讀
    這樣的語法解決,但是文章頁面的左上角會有
    「TEMPLATE ERROR: Invalid data reference post.body: No dictionary named: 'post' in: ['blog', 'skin', 'view']」這行字

    不過我已經極限了!想說暫時就這樣了~
    真不好意思打擾您了!

    回覆刪除
  17. Re: 怜子 <5632338524452093525>
    因為從你的 blog 原始碼去看,其實那段 meta 並沒有抓到 description,你用的 expr:content='data:post.body' 之所以會出現錯誤訊息,是因為沒有這東西,我的建議是刪掉那一行,再試試。

    你可以用瀏覽器觀看你 blog 的原始碼就會看到這一行事實上是沒有資料的:meta content='' name='description'

    回覆刪除
  18. 謝謝你的幫忙,
    不過拿掉就沒有分享了!
    這幾天我的腦細胞應該死了很多~哈哈!
    沒關係~謝謝你!!畢竟我不是專業的網頁程式師,
    使用blogger對我來說好像有點太專業了!
    還是要謝謝你^^

    回覆刪除
  19. 哈囉!要通知你一聲,結果我換了一個版型以後,
    再使用你這篇的方法就可以了(真不知道前幾天我在忙什麼)
    非常感謝你這幾天的幫忙,剛剛有照著你的方法成功的裝了facebook 的留言,
    不過不知道為什麼fb提供appid跟admin的語法blogger不接受,
    所以無法後台管理留言,試了幾次都不行就拿掉了(這次我記得要備份了)
    不管如何,在您的部落格上學習到很多!很謝謝你的分享!

    回覆刪除
  20. Re: 怜子 <1201808105820037168>
    ^^ 恭喜了。

    回覆刪除
  21. 嗨,非常冒昧地請教一下:
    我看到您這裡有在教人家關於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

    回覆刪除
  22. 不好意思,請問目前我的朋友正有blogger文章分享至FB時會出現照片不對及文章內容抓錯的問題,文章都是抓到blogger介紹的內容,看過您的文章之後,我了解應該是語法上的問題,但語法部份我不會,您上面說明的語法,請問要在哪裡找?我有在blogger的html找過,但沒有找到您說的那些,可以請您為我解說一下步驟和做法嗎?萬般感謝^^

    回覆刪除
  23. Re: 曉雯 <6415077881802376497>
    範本-->修改HTML 那邊,記得勾"展開小裝置範本"。

    最近有發現 Blogger 後台有提供一個搜尋偏好設定 (設定›搜尋偏好設定) 那裡可以設定文章或者整個 blogger 的 meta description,可以讓社群網站在抓這文章內容的時候抓到您所定義的內容。

    另一篇文章是抓圖的您參考:http://jimmyyen.blogspot.tw/2010/10/blogger-facebook-facebook-like-button.html

    回覆刪除
  24. 後台提供的功能,要如何設定呢?因為實在不懂它的意思,謝謝

    回覆刪除
  25. Re: 曉雯 <5099521872407768449>
    官方文件:http://support.google.com/blogger/bin/answer.py?hl=zh-Hant&answer=2472665

    回覆刪除
  26. 謝謝您分享的文章,我剛找到您發的其他文章,終於搞清楚是在版型那改,我也已經改好了,謝謝您

    回覆刪除
  27. Re: 曉雯 <8085586010837729306>
    ^^恭喜您。

    回覆刪除
  28. 感謝這篇讓我終於解決分享文章到fb抓不到文章內文的問題了!

    回覆刪除
  29. 您好!我在專頁分享的時候,FB抓的是我的"標簽"文字,而非內容。
    用過您的方法,還是一樣。
    請問可以幫忙看一下嗎? http://stella1008.blogspot.tw
    感謝!

    回覆刪除

張貼留言

回應不用錢,請多多益善!懶得寫字按個讚也是相當感謝!

這個網誌中的熱門文章

有點誇張的準專業機.Minolta Alpha 7 (Dynax 7、Maxxum 7).2000

題外話,去年幫朋友標了這台,遲遲未寫一篇介紹,其實是有私心的,好東西少一點人知道比較不會搶。 上個禮拜因為自己要 幫朋友拍攝一場婚禮 ,無巧不巧原本服役的 707si 掛了,於是跟朋友商借了 Alpha 7 來拍,拍過之後就一直放在身邊,說實在的有點捨不得還,快門聲,手感,強大的性能,實在是有點誇張。 拿 Alpha 7 拍我女兒的時候,因為有 LCD,我女兒會說我要看,而不是問我 把拔這台是底片的嗎 ?讓我解釋半天她也不相信,直指著 LCD 要看照片,很妙,但是個識貨的女孩,一眼就看出這台相機的特點,機背有 LCD。 於 1998 年推出頂級機 Alpha 9 之後,2000 年推出的 Alpha 7 除了快門速度和連拍速度緊挨著機皇而沒有強過頭,卻在準專業定位的 Alpha 7 身上加入多項先進的功能,其中許多 Alpha 9 所沒有的,相當驚人,整理於下: ※ 全新開發之 CDC912 對焦系統,九點寬域對焦,排列為黃金矩陣 ,宣稱為世界首快之 AF 對焦;機背轉盤可選擇對焦點並直接對焦。(Alpha 9 為三點寬域自動對焦) ※ 首見機背大型點矩陣式 LCD 大幅增加人機溝通性能,若採垂直控制拍攝時LCD會隨之轉為垂直。 ※ DMF (Direct Manual Focus) 功能 :透過機身可讓鏡頭全時手動,無須撥動AF/MF鈕 ※ 世界首見 STF (Smooth TransFocus) 特效 ,可使每支鏡頭作出特殊背景鬆濛感,類似Minolta STF 135mm f/2.8[T4.5]的效果 (作用原理:相機自動切換為多重曝光,並於曝光時逐漸縮小光圈葉片)。[Custom 3] ※搭配新一代納入距離編碼器的鏡頭時,Alpha 7 可採 ADI (Advanced Distance Intergration) 測光模式 ,或配合 TTL 4 區閃燈測光。 ※一推出即支援 SAM 超音波馬達鏡頭。(Alpha 9 需要更新韌體) 功能很多很強大,底下就先挑一些比較有意思的設計做介紹。 》十四區蜂巢式測光,LCD 顯示 當同時按下 AE 曝光鎖 (AEL) 與 LCD 顯示選擇鍵 (DISP) 時,會顯示 14 區各分區的相對EV值,與灰色部份比較,白色的為正值,黑色的為負值,以上圖為例,畫面最暗的地方是 –2.3,最亮的地方是 ...

[古典相機] M 系列快門最速.ME MX 合體.Pentax ME Super.1980

Pentax M 系列機身中,快門速度達到 1/2000 秒的,就只有 ME Super 以及需搭配特殊鏡頭 AF 35-70 f2.8 自動對焦的 ME-F 。 為什麼要說 ME Super 是 MX 以及 ME 的合體呢? MX 是只有曝光手動控制, ME 是只有光圈先決,另有幾台 M 系列 1980 年代出的 MG、MV、MV1,也都只有提供光圈先決,除了改變 EV 值外,沒辦法手動調整快門速度,ME Super 是整個 M 系列機身第一台同時可以手動設定快門也能 Auto 快門的機身,或許是因為希望機身維持像 ME 一樣小,所以在快門設定的功能上,並不像其他家是用機頂轉盤的方式 (OM-2 是用機身接環前的轉環),Pentax ME Super 的快門設定是機頂上的兩個鈕,只能在觀景窗內,透過 LED 指示燈顯示所選用的快門速度,同時也會顯示是否 Over 或者 Under。 機身的設計與 ME 幾乎相同,除了機頂右邊的轉盤處加了兩個手動設定快門速度的鈕,其他都相同,寬度和高度就比 ME 多了一點點,真的只有一點點,就各多個 0.5mm,但重量卻比 ME 更輕,猜想是使用了更輕量的機身結構吧,而可搭配的捲片馬達手把也能通用 (ME、ME II)。 MX 與 ME、ME Super 之比較》 機型 生產 體積 (mm) 重量 快門速度 閃燈同步快門 MX 1976-1985 135.8 x 82.5 x 49.3 495g 1 ~ 1/1000, B 1/60 ~ 1, B ME 1976-1980 131 x 82.5 x 49.5 460g 8 ~ 1/1000, B 1/100 ~ 8, B ME Super 1980-1987 131.5 x 83 x 49.5 445g 4 ~ 1/2000, B 1/125 ~ 4, B ...

我家用的除濕機,象印輕巧型沸石式溫風除濕機 ZOJIRUSHI RV-JBF60RV

Angel 扶著的那台就是了,我很喜歡這台運作時的還不算太吵,也不會太佔空間,我們的衣帽間不大但太亂了所以就不拍全貌了,不佔空間又輕這個優點對老婆來說還蠻重要的,老婆也常常用這台的排風口把突然下雨還沒晾乾的衣服放進衣帽間烘乾。 當初會選這台,主要是因為象印這台 RV-JBF60 是沸石式除濕的技術,而不是以前我們用的那種冷媒除濕機,冷媒除濕機的原理其實跟冷氣是一樣的,差別是在冷氣把熱風往外排,而除濕機只是把熱風直接排出來在同一個空間。 日本象印創新技術的沸石式除濕為最新進的科技突破,而在日本已經成為主流!取代傳統壓縮機式的除濕機,無需冷媒,因此相對具有重量輕,體積小,低噪音,除濕力強的等優勢,簡單說就是像海綿一樣會吸水的石頭,吸到飽合水滲透下到水箱,有別傳統壓縮機式除濕機的笨重,高分貝又不環保的除濕方式! 發現最近好像有特價,比我之前買得還便宜說,而且賣場還有 18 期 0 利率,所以跟大家分享一下。 原價$11990↓限時狂殺 象印輕巧型沸石式溫風除濕機(RV-JBF60) 體積輕巧,收納便利 除濕度指標一目瞭然 10㎡~21㎡除濕面積 82分鐘衣物快速烘乾 無冷煤沸石式除濕 商品特色: 1. 超輕量5.3Kg,無冷媒又環保的沸石除濕。 2. 竹炭除臭及綠茶兒茶素防霉的過濾網。 3. 82分鐘快速烘乾衣物。 4. 6大安全設計自動停止。 5.( 3 )/ 4 / 6 H定時運轉設計。 6. 135度超廣角的風口,烘乾 / 除濕更透徹。