facebook 今年推出 quote share 的功能, 讓分享網址再進化.

往往我們分享感興趣的網址到 facebook 時, 很多時候朋友們無法從 og 設定的內容馬上就知道您想分享的主題為何? 有時看完整個網頁還是傻傻分不清楚, 也因此分享的人總是需要額外加工才能讓主題更加的凸顯出來

透過「引言分享」的功能, 我們可以在頁面上選取想要作為引言的文字, 接著按下引言分享的按鈕, 便可以完整的將引言連同網址一同分享出來, 可以說方便且貼心許多

Quote Share module 便是本著這樣的初衷進行開發! 只要將相關的 JavaScript require 進來, 便馬上具備了這樣子的功能喔!

歡迎點擊下方連結進行觀看 : quoteShare Prototype: http://mei.homin.com.tw/quoteShareP… Action flow video: https://youtu.be/R-V496lOpPo

使用方法:

1. 首先, 先在想要新增 quote share 功能的 page 將相關的 JavaScript require 進來

<script src="js/pack-quote-share.js"></script>

quoteShare 會在檔案載入後自動進行 init, 此時頁面已經具備該功能了喔! 2. 將想分享的文字進行選取

選取想進行引言分享的文字

在選取完文字之後, 便會在選取區的上方出現 facebook 分享的 trigger, 接下來點擊該 trigger

facebook share dialog

我們可以清楚的看到方才所選取的文字已經被當作引言出現在 facebook share dialog 中

3. 按下該 dialog 中的「 發佈到 Facebook 」按鈕後, 我們便完成了引文分享了

分享到 facebook 後的截圖

對於常常分享網址的朋友們來說, 這樣的功能真真既方便又貼心!!

為什麼不用 facebook 的 JavaScript SDK ?

雖然說 facebook 的 JS SDK 已經提供了 quote share 的相關功能了, 只要 require 其 js file 即可, 不過基於一些安全性以及個人堅持的理由, 決定還是自己手動走一遭, 如此一來不僅不會受 facebook js lib 的約制, 對於服務來說更可以客製化一些東西, 整體相對來說活潑且彈性許多!

Q & A:

• 可以調整 trigger 中的內容嗎 ? Ans: 只要打開 quoteShareClass.js 這個檔案, 找到關鍵字 title (git), 調整成你想要顯示的文字內容即可
• trigger 的大小可以被客製化嗎 ? Ans: 目前 trigger 的設計是採用 flex design, 它會依照當前 viewport 來調整其外觀樣貌, 如果想要固定或者是調整其大小, 可以透過調整其 CSS 屬性: font-size 來做, ex: body #qs-trigger { font-size: 15px; }, 其他 padding 以及 icon 大小便會依照該數值作等比例的調整

highlight:

• Selection
• SVG with data-uri
• flex design

測試環境:

• OS: Windows 7
• Browser: Chrome Version 52.0.2743.116 m (64-bit) , Firefox 47.0.1, Internet Explorer Version 11.0.9600.18282

Reference: