Module 開發 – quote share (facebook)

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:

轉載文章 – Module 開發 – quote share (facebook)

mei

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *