上次教過大家如何分拆一個優化過的landing page，接下來要教大家如何在Facebook上控制自已landing page的縮圖及描述。
在Facebook上行銷產品及網頁已是一種很普遍的現象，這裡就教大家如何在Facebook上顯示想行銷網頁的縮圖及描述。此篇內容適合對web service稍有認識，並能看懂簡易Html。
參考資料
- http://ogp.me/
- http://developers.facebook.com/tools/debug
- http://www.hyperarts.com/blog/how-to-control-facebook-image-thumbnail-text-popup-dialogs/
動動手時間
首先準備題材- 想顯示的縮圖數張，假設其檔名為 “thumbnail.jpg” “thumbnail2.jpg” “thumbnail3.jpg”
- 一段標頭，建議不需太長，帶出產品名稱即可 (如:巷弄食藏 - 穿梭於巷弄間的美食平台)
- 一段產品或服務描述，無字數限制，但還是以簡單優先 (如: 個人專屬的美食推薦平台，目地在提供消費者個人化美味與健康的飲食資訊!)
這些題材可以幫助我們在Facebook塗鴉牆上顯示如下的內容
當題材都準備好了之後，就可以開始編輯網頁了，以下所有的html tag都請擺放在<head>的下面
<meta property="og:title" content="巷弄食藏 - 穿梭於巷弄間的美食平台" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://alleyfood.com" />
<meta property="og:image" content=http://alleyfood.com/img/thumbnail.jpg />
<meta property="og:image" content=http://alleyfood.com/img/thumbnail2.jpg />
<meta property="og:image" content=http://alleyfood.com/img/thumbnail3.jpg />
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image:width" content="190" />
<meta property="og:image:height" content="190" />
<meta property="og:description" content="個人專屬的美食推薦平台，目的在提供消費者個人化美味與建康的飲食資訊！" />
若您對html有一定的了解，其實應該不太需要解釋這幾行程式了，只需要一一將content的內容換成您的題材即可，更詳細的設定可以參考http://ogp.me/。記著，若您需要對每一頁都作facebook優化，那這段程式碼必須被鑲嵌在每一頁中。
測試時間
一但將這些html tag都設定好了之後，請打開Facebook debug 工具:http://developers.facebook.com/tools/debug 這是一個Facebook提供縮圖截取的偵錯頁面。
在上圖中輸入您想測試的網址並點擊偵錯，假若出現如下的訊息就代表成功了。
行銷去~~
接下來就是直接到個人塗鴉牆貼上想行銷的網站連結，並觀看結果是否正確。這裡要特別注意一點，因Facebook會在第一次讀取網頁時即進行資料快取，當被快取後再更改html裡的內容也不會產生任何作用了，因此假若您想變更或更新facebook快取內的資料，可以透過上面提到的Facebook debug 工具，只要送出重新偵錯，則Facebook的快取就會更新了。整個過程非常的簡單，也沒有煩人的javascript需要撰寫，祝各位創業成功!!
沒有留言:
張貼留言