[技術類] FaceBook › Social Plugins › Recommendations Bar 外掛

最近被要求要在網站上放上 FaceBook 的 Recommendations Bar 外掛, 雖然不是什麼高深的技術, 但是仍然獲取了許多人的注意, 也更方便對目前的頁面按讚或推薦:

Recommendations Bar

當我們看完一篇文章時, 在畫面右下角 就會自動跳出 一個視窗, 會推薦目前網站中的其他文章, 增加網頁的連結性與 pageview; 今天開會時, 主管說 大老闆對這個功能很有興趣, 覺得不錯, 因為過去要達成這樣的效果, 必須花費許多人力與時間來開發, 但是現在 facebook 主動提供這樣的外掛, 真的方便許多.

本來只是把 facebook 給的 code 放在網頁程式碼中就好了, 但是在驗證的過程中還是遇到了一些問題, 在此跟大家分享.

如果要讓讀者看到網頁底部某個區塊後 在跳出 Recommendations Bar,  Trigger 的類型就要選為 onvisible , 然後在網頁文章底部某個區塊 放上這段 code:

您可以到官方說明文件取得 code:  https://developers.facebook.com/docs/reference/plugins/recommendationsbar/

Recommendations Bar 外掛元件程式碼

使用 XFBML 版本的code  (建議仍然加上 trigger="onvisible" , 以讓 firefox 可以正常跳出Recommendations Bar ) (因為我們發現 chrome 可以在正確位置跳出Recommendations Bar, Firefox 則否, 我們加上trigger="onvisible" 後, firefox 就會正確的到達位置後再跳出Recommendations Bar ):

<?php echo ‘<fb:recommendations-bar href="文章網址‘" read_time="10″ trigger="onvisible" action="like"></fb:recommendations-bar>’;   ?>

文章網址:  要自己帶入該篇文章的網址  ( 如果是wordpress, 可以使用此函數: get_permalink()  , 你懂得!)

read_time 最少需要 10秒, 也就是說, 讀者需在此頁面停留 10 秒後, 當讀者抵達  fb:recommendations-bar  的標籤區域時, 才會展開 recommendations bar.

其他相關參數可參考: https://developers.facebook.com/docs/reference/plugins/recommendationsbar/

這篇文章的網址(可分享到FB、LINE)：