ISSUE

2021


Facebook Like 讚按鈕 – 基本觀念與整合時需要注意的事項  




在自己的網站上加上 讚按鈕, 已經是一種趨勢, 但工程師或網頁設計師仍然面對許許多多的問題與無解的情況, 此篇文章提出許多基本觀念與整合時需要注意的事項, 供參考.
如果你也碰到相同的問題, 可以回覆 你的解法喔 !

 

facebook 讚按鈕

facebook 讚按鈕

1.  關於FACEBOOK LIKE:

Like Button 讓使用者可以分享我們網站的內容,進行訊息擴散。

 

2.  文章:

我們針對文章進行訊息擴散,單篇文章的內容顯得很重要,也是FACEBOOK 來抓取內容的主要頁面。

有一個很重要的事情,當一篇文章被按過讚後,會被cache (Facebook scrapes your page every 24 hours to ensure the properties are up to date.),因此需要使用這個工具:

https://developers.facebook.com/tools/debug

 

3.  按下 ”讚” 的預期行為:

按下讚時,如果使用我們的按鈕是使用XFBML的版本,是會跳出意見框讓使用者輸入意見的 (If you are using the XFBML version of the Like button, users will always have the option to add a comment.) ,如果iframe版本就不會(但仍可設定此行為)。

 

4.  ”讚” 的目標網址:

按下讚時,目標網址是單一文章頁面還是一個首頁? 需要認清,如果是單一文章,目標網址就要設為單一文章的網址,如果是一個首頁或是活動頁面,則目標網址需要設為該首頁或是活動頁面。

FACEBOOK 是以網址來辨識並歸戶計算。

 

5.  按讚之後,為什麼文章沒有出現在我的TimeLine上?

TimeLine是新版的個人首頁, 用戶曾經按過讚的的文章, 不一定會出現在TimeLine上, 如果想看曾經按讚的文章, 點選個人TimeLine右上角有一個按鈕 ”活動紀錄”, 即可看到過往的一些社群活動。

 

6.  我開發的網頁有加og:tag , 但是還是不能在塗鴉牆正常顯示?

FACEBOOK 的 ROBOT , 它抓取網頁資料時, 有時並不能完整掃描, 會有此現象發生, 因此, 我們會讓 網頁儘量精簡, 以利他抓取 OG:TAG, 作法是, 判斷來網頁的 USERAGENT , 如果是FACEBOOK 的 AGENT, 則只讓網頁輸出精簡資料:

if(substr($_SERVER['HTTP_USER_AGENT'],0,19)==’facebookexternalhit’ or substr($_SERVER['HTTP_USER_AGENT'],0,15)==’facebookscraper’){

// Do something

}

 

7.  我開發的網頁,上面有放讚按鈕,但是按下讚時,跳出的意見框,會被其它div 擋住,造成訊息框被切掉的情況發生。

下面div的overflow,試著拿掉,或者將like button的div 改為:

<div id="fb-root" style="position: absolute; z-index: 9999; overflow:visible;“></div>

官方網頁說明:If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting setting the overflow property to a value other than hidden, such as visible, scroll, or auto.

 

8.  我想要讓facebook 讀取一個以上的og:image。

如果給facebook 的og tag 中, 有一個以上的og:image, 則facebook 可以讓用戶選擇要po 哪一張圖到塗鴉牆上。

 

9.  我的facebook like button 在網頁上呈現的是英文的 “like”

If you are using the Iframe version include a locale parameter with the proper country code in the src URL.

請加locale=zh_TW。

 

10.og tag 一定要放在 </head> 之前嗎?

是的!

 

11.Linter (Debugger) 的用法

https://developers.facebook.com/tools/debug

貼上要debug的網址, 在Object Properties 就能看到og:tag

點選 See exactly what our scraper sees for your URL  則能看到facebook 實際抓到的網頁碼.

 

12.按讚 vs 把網址貼到塗鴉牆,這兩種行為 FB 處理的方式一樣嗎?

把網址貼到塗鴉牆,facebook 仍會cache上一次的結果, 建議測試時, 用

新文章來測.

 

13. og:image 需要帶完整網址(含 domain name),不然 FB 會抓不到圖

 


—————————————————————————————————– 

Google+  部分

 

1.  如何取得 google+ 按鈕?

http://www.google.com/intl/zh-TW/webmasters/+1/button/index.html

 

2.  Google+ 會讀取 og tag (Open Graph protocol)嗎?

會, 但要注意給的圖片大小: Images that are too small or not square enough will not be included in the +Snippet, even if explicitly referenced using schema.org microdata or Open Graph markup. Specifically, the height must be at least 120px, and if the width is less than 100px, then the aspect ratio must be no greater than 3.0.

 

3.  我可以在同一個網頁上放置多個按鈕,分別 +1 不同網址嗎?

可以,請使用 href 屬性指定目標網址:

<g:plusone href="http://www.example.com/blog"></g:plusone>

 

4.  Google+ 是以網址為歸戶計算的嗎?

是的!

 

5.  如何判斷Google+的user agent?

if($_SERVER['HTTP_USER_AGENT']==’Mozilla/5.0 (Windows NT 6.1; rv:6.0) Gecko/20110814 Firefox/6.0′){  …   }

 



前往討論區 這篇文章的網址 (可分享到FB、PTT、Mobile01):

延伸閱讀:北部新冠快篩站預約與等候結果
延伸閱讀:疫情嚴重時少出門必備工具
延伸閱讀:口罩有縫隙! 美國CDC教你knot and tuck改良自己的口罩
延伸閱讀:居家工作 網路攝影機 幫忙看門/看小孩
延伸閱讀:「公費疫苗可選廠牌」哪種廠牌好? 要投保疫苗險嗎?
延伸閱讀:WFH在家工作 急需傳真不用跑便利商店
延伸閱讀:WFH在家工作時時關心疫情 – 小米盒子(追劇看新聞)
延伸閱讀:勞工紓困貸款 貸了有何影響?
延伸閱讀:打不到新冠肺炎(COVID-19)疫苗? 先打肺炎鏈球菌疫苗?
延伸閱讀:COVID-19新冠肺炎 居家快篩試劑,保護自己保護家人
延伸閱讀:必須在長輩手機上設定的 緊急聯絡人與緊急醫療資訊 (快樂缺氧怎麼辦?!) 
延伸閱讀:打不到新冠肺炎(COVID-19)疫苗? 先打肺炎鏈球菌疫苗?
延伸閱讀:必須在長輩手機上設定的 緊急聯絡人與緊急醫療資訊 (快樂缺氧怎麼辦?!) 
延伸閱讀:打了新冠肺炎(COVID-19)疫苗 副作用 (親身經歷) 


您也許對這文章有興趣:

您也許對這文章有興趣:

數位高利活儲帳戶 (渣打/花旗/華南/台新)
數位高利活儲帳戶 (渣打/花旗/華南/台新)

Line 使用常見問題
發錯的LINE訊息可以收回或刪除嗎?

 
其它文章: 前往瀏覽目錄
本篇文章的行動版網頁: 切換到行動版本
返回頂端

Copyright © 2008-2021 Anson | Secured by SSL Connection SSL