2022.09.17 更新:FB 不知道發什麼神經,三不五時就限制開發人員的應用程式,連帳號下沒有應用程式了也報說限制,要自己提出申訴。另外用了 FB 讚之類的按鈕,讀取速度會變慢,即便改成 window.load 後才執行,也會延遲出現的時間,覺得對 UX 不太好,因此今日開始決定移除本站的這些讚按鈕,就用 WordPress 預設分享的功能。本篇就是一個記錄,照著本篇寫程式碼還是可以使用的。
外掛有好也有壞,決定自己寫
原本 Let’s Write 上每篇筆記文的開頭都有放個 Facebook 的「讚」按鈕,因為 August 不會寫 PHP,所以大部份功能都是找 WordPress 上的外掛。
但 Facebook 的讚按鈕外掛有夠難找,不知道是不是關鍵字打不對,找到的 80% 都是嵌入粉絲團用的外掛,而不是針對各篇文章按讚的。
之後找到了一個,覺得蠻好用的,但前陣子的兩次更新各自出了問題,第一次是更新後整個讚按鈕就不見了,第二次更新後,開頭前幾天正常,後來就變成英文的。
後來想想,身為一位前端工攻城獅,即便不會寫 PHP,用 JavaScript 自己動態嵌入一個讚按鈕很難嗎!!(前端小宇宙燃燒起來啦)
然後又想想,反正寫都要寫了,在台灣幾乎人人都有裝 LINE 的情況下,不如順便放個 LINE 分享按鈕好了。
最後再想想,之前寫的 畫新冠狀病毒分佈圖 那篇,在 Twitter 上曝光數難得破了 600,看來也是個曝光管道,那也放個 Twitter 按鈕好啦~
最後總結,這篇 August 會筆記這次自己用原生 JavaScript 寫的、在 WordPress 上嵌入 FB + LINE + Twitter 三家分享按鈕的過程。
統整的原始碼會放在文章最後,如果只想複製貼上的朋友可以直接滑到文末,但也 懇請點個讚或分享一下再複製貼上。
1 取得分享按鈕的 HTML
一開始要先去找這三家讚/分享按鈕的 HTML。
FB
點進上面的連結後,就直接用這頁來產出一個讚按鈕。
確認好要的樣式跟其它選項後,按下「取得原始碼」,就會跳出一個寫有要嵌入的 HTML 部份:
從 FB 提供的原始碼來看,需要另外處理的是:
- 頁面上額外載入 SDK 的 JS 檔
data-href
要改成每一頁的網址
LINE
LINE 的外掛按鈕有三種:加 LINE 好友、讚、分享。
因為 LINE 加好友的部份,本站之前有寫了一個 LINE 登入的功能,不讓功能重複因此不採用。(LINE 登入筆記文:上篇、下篇)
而 LINE 的讚、分享是分開來寫的,不像 FB 一個參數就可以同時有,為了版面不要有過多按鈕讓使用者猶豫,就選擇「分享」就好。
LINE 的分享按鈕,官方提供的程式碼在這:
跟 FB 一樣,要另外處理的是二部份:
- 頁面上額外載入 JS 檔
data-url
要改成每一頁的網址
Twitter 的文件上說,如果沒有指定要分享的 URL,那 Twitter 就會找頁面上的 rel="canonical"
來當作分享網址。
所以針對 Twitter 的分享,要另外處理的就是:
- 頁面上額外載入 JS 檔
2 頁面上額外載入 JS 檔
由於三個社群按鈕都要載入各自的 JS 檔,就必須要寫一個載入其它 JS 檔案的 function,如下:
function appendJS(src) { var script = document.createElement("script"); script.src = src; document.head.appendChild(script); }
接著頁面只需要用 function 來載入三家的 JS 檔即可:
appendJS('https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js'); appendJS('https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v3.0'); appendJS('https://platform.twitter.com/widgets.js');
3 抓每一頁的網址
FB、LINE,這兩家必須要每一頁都寫上當頁的分享網址。
這邊有一點要注意的,我們要分享的網址,真的要是「當頁應該有的網址」。
實務上,我們很常會在頁面上加參數,比方加上 utm,或是各家自己寫的追蹤參數。假如我們直接用 location.href
來當作分享網址,就會把這些參數也加進去了。
最好當作分享網址的,是 rel="canonical"
這一行的 href
。
rel="canonical"
是有關心 SEO 的網站都會加的一行,主要是告訴搜尋引擎這頁實際上的網址是什麼?一般寫入的值是不帶其它額外參數的。
Let’s Write 有裝 SEO 的相關外掛,因此也會主動產生這行,這邊就是抓這行的值來當分享用的網址:
var currentUri = document.querySelector('[rel="canonical"]').href;
4 頁面上嵌入 HTML
引用了各自的 JS 檔,及抓出各頁的分享網址後,接著就是把剛剛我們從三家的頁面得到的 HTML 部份,嵌入在頁面中。
WordPress 的基本架構是,內文的部份都會包在 .entry-content
中。
另外,因為是寫給各文章頁用的,所以:首頁、分類頁、標籤頁、搜尋結果頁,這四頁就要濾掉不使用。
先把上面這兩項需求都先存成變數:
var el = document.querySelector('.entry-content'); var notIndex = location.pathname !== '/'; var notCategory = location.pathname.indexOf('category') === -1; var notTag = location.pathname.indexOf('tag') === -1;
接下來用一個 if
就可以判斷是不是在單文頁中:
if(el && notIndex && notCategory && notTag) { // 這邊寫嵌入社群分享的code }
嵌入三家的 HTML,我們先把三家分享按鈕的 HTML 也寫成變數:
var fbBtn = '<div id="fb-root"></div><div class="fb-like" data-href="' + currentUri + '" data-layout="button_count" data-action="like" data-size="small" data-share="true"></div>'; var lineBtn = '<div class="line-it-button" data-lang="zh_Hant" data-type="share-a" data-ver="3" data-url="' + currentUri + '" data-color="default" data-size="small" data-count="true" style="display: none;"></div>'; var twitterBtn = '<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>';
currentUri 就是我們上段從 rel="canonical"
取得的當頁實際網址。
有了三家的分享按鈕 code 後,嵌入的部份 August 習慣用 insertAdjacentHTML,MDN 上說:
Element.insertAdjacentHTML()
insertAdjacentHTML()
把傳入的字串解析成 HTML 或 XML,並把該節點插入到 DOM 樹指定的位置。它不會重新解析被使用的元素,因此他不會破壞該元素裡面原有的元素。這避免了序列化的複雜步驟,使得它比直接操作innerHTML
快上許多。
「快上許多」這四字有打中工程師的痛點,天下武功唯快不破呀~
把上面分享按鈕的 HTNL insert 到頁面上:
var el = document.querySelector('.entry-content'); var socialHTML = '<ul class="js-social-share">' + '<li>' + fbBtn + '</li>' + '<li>' + lineBtn + '</li>' + '<li>' + twitterBtn + '</li>' + '</ul>'; el.insertAdjacentHTML('beforebegin', socialHTML); if(document.querySelector('.sharedaddy')) { var originShare = document.querySelector('.sharedaddy'); originShare.insertAdjacentHTML('beforebegin', socialHTML); }
August 這邊先是 insert 到文章開頭,接著又寫了一個判斷:
if(document.querySelector('.sharedaddy')) { //… }
.sharedaddy
這塊是裝了 Jetpack 外掛後會產生的一個區塊,在頁面上就是這塊:
因為想在這上面也再嵌分享按鈕,而考慮到不是每位來複製貼上 code 的大大們都會裝有這塊,因此就多加了一個 if
。
5 設計按鈕樣式
因為三家的分享按鈕都小小一顆,沒必要設計成各自一排。
August 設計讓它們都在一排上。
這邊直接用 IE 支援度不高的 flex
來排。
對,August 不在意 IE 這個上古神獸,因為如何一句話惹惱前端,前三名永遠都有「哎,客戶說 IE 跑版」。
在這個大家都在喊「我們要數位化」、「5G 時代來臨」的摸門,還在看 IE?你的時代還活在美國剛登入月球那時嗎?
扯遠了,樣式的 CSS 如下:
.js-social-share { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 0; line-height: 1; list-style: none; } .js-social-share li { padding-right: 1rem; height: 22px; }
6 原始碼要放哪
寫完了以上五步,我們自己製作的 FB、LINE、Twitter 分享按鈕就完成了。
最後的問題是,這些程式碼要放哪?
如果你聽過 Google Tag Manager,建議是放 GTM 上,因為如果直接貼到佈景主題編輯器上,當佈景一有更新,我們額外貼的程式碼就會消失不見。
如果你沒聽過 GTM 也沒關係,August 實測,直接放在小工具上也是可以的。
小工具有一項是「自訂 HTML」:
新增以後,把我們上面寫的這些程式碼貼上去按儲存,就可以了。
完整程式碼
本篇在 WordPress 上自己加入 FB、LINE、Twitter 的程式碼,整理在這篇,歡迎取用,但麻煩在複製貼上前,可以對本篇按個讚及分享。
感謝分享 此文很受用 謝謝
不客氣~
版主你好:
有在網路上查到您的網站
覺得做得很好, 請問這個是您個人架設的站嗎?
還是使用像workpress的套件架站
如果可以的話再請您提供寶貴建議
非常感謝您
是自己租主機,然後用WordPress架的,佈景主題是「Simplent」。
另外有再客製一些css。
我用筆電的chrome按你讚沒有效?有點詭異了!
嗯?但我按可以耶?
太厲害惹~~爬到這篇文真的很受用,但有個小小的問題想請教
有沒有可能將那三個按鈕跟網站的主題一致的樣式呢?
另外小小建議:是不是將這三個按鈕放在文末讓人看完順便分享,機率比較高~?
版主您好,剛好最近有這需求,很開心您的分享。
想問一下有沒有辦法不透過任何軟體,就是單純分享網址呢?