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

行動版 for , 瀏覽人次: 2781  , SSL Connection SSL

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

     

    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′){  …   }

     

回 文章列表頁