將FB「儲存按鈕」嵌入網站中,點擊快速加入我的珍藏。(WordPress免外掛)


嵌入Facebook儲存功能
Facebook先前有推出了SAVE我的珍藏,其實就是有點類似「我的最愛」功能可將一些網站或有興趣的資料站時間儲存到清單方便日後瀏覽。在網站中我們也能利用FB的內建外掛,將這個「儲存按鈕」嵌入到部落格中,讓讀者們再返回瀏覽,提升回訪人數。

就會顯示這樣,請點我:





臉書「儲存」按鈕外掛 設定頁

點此前往:Facebook儲存按鈕配置器




嵌入Facebook儲存(我的最愛) 教學

STEP1

先進入臉書開發人員工具,建立 Facebook APP 應用程式 ID。(如果已經有申請過可跳過這步驟)
Facebook留言框教學6

STEP2

前往儲存按鈕配置器,選擇你的應用程式編號和語言,並在URL框先填上網站的連結網址,輸入完成後「取得代碼」。
嵌入Facebook儲存功能1

STEP3

將取得的第一段代碼1. Include the JavaScript SDK on your page once, ideally right after the opening tag.貼到WordPress主題編輯器或其他網站的body後面。
嵌入Facebook儲存功能3

這段代碼貼到body後:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.5&appId=XXXX你的App ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

STEP4

第二段代碼,貼在要顯示此臉書儲存按鈕外掛程式碼的地方,以WordPress為例,放在single單篇文章的上方。data-href後面網址如果是嵌在WP有每篇不同的網址的話可改成<?php the_permalink() ?>
嵌入Facebook儲存功能4

這段代碼貼到要顯示按鈕的地方:

<div class="fb-save" data-uri="<?php the_permalink() ?>" data-size="large">

就會顯示這樣,請點我:

延伸閱讀:在網站嵌入FB留言框與管理