Facebook Quote Plugin 臉書選取文字後自動跳出「分享引文」外掛功能設定教學

Facebook 六月底底推出全新分享按鈕設計，將原有熟悉的經典按鈕換掉，現在看起來變得更簡潔乾淨，也更適合在行動裝置使顯示及使用（畢竟臉書的 Like 按鈕很有歷史，早期行動裝置使用率還沒像現在這麼高）。不過你或許沒注意到，Facebook 幾個月前悄悄推出一項「引言（Quote）」新功能，改善原有在分享上的不足，如果你習慣在分享鏈結時加上原有頁面出現的文字，引言功能就非常適合你。

簡單來說，引言功能就是在將內容轉貼至 Facebook 時，於訊息下方自動加進一段出現於原有網頁中的內容，例如你覺得某一段文字特別貼近你，或是你找到文章中最重要的一個段落，都能利用引言功能來將它加入分享訊息，使得你分享轉貼的動態更容易被其他人理解。

為了提升將內容分享至社群網站的效益，相信站長們想盡辦法，無所不用其極，讓頁面中出現更多容易被點擊的分享按鈕，其實這幾年大家早已經對於 Facebook 按鈕感到麻痺，效果也不如從前，Facebook Quote Plugin 推出或許有助於讓每況愈下的分享頹勢逆轉。

Quote Plugin 是 Facebook 社交外掛程式（Developers Social Plugins）的一個小工具，跟我們熟悉的 Facebook 留言或按讚、分享按鈕一樣，當你將這項功能加入網站部落格，使用者選取文字內容時，就會自動跳出一個「分享引文」提示訊息，點選後會跳出傳統的分享視窗，但在鏈結上加入你選取的文字做為引文。

要如何在網站裡加入這項功能來刺激文章內容被分享的機會呢？很簡單，以下我會簡單介紹將這個好用的 Quote Plugin 新增到網站教學。

網站名稱：Facebook Quote Plugin
網站鏈結：https://developers.facebook.com/docs/plugins/quote

使用教學

STEP 1

開啟 Facebook 的 Quote Plugin 頁面後，先別急著被滿滿的英文嚇到，其實要把這項功能加入網站非常簡單！只要一段原始碼就能做到。但你可以先從網頁中提供的 Code Example 實驗一下這項工具是不是自己需要的。

如果網站現在已經有按讚、分享按鈕或留言功能，那麼就表示網站已有 Facebook SDK 程式碼，你可以先檢查看看有沒有類似下方的程式碼：

.gist table { margin-bottom: 0; }

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

	<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.6";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>