用原生JavaScript寫一組社群分享按鈕(FB、LINE、Twitter)

用原生JavaScript寫一組社群分享按鈕(FB、LINE、Twitter)

外掛有好也有壞,決定自己寫

原本Let’s Write上每篇筆記文的開頭都有放個Facebook的「讚」按鈕,因為Augustus不會寫PHP,所以大部份功能都是找WordPress上的外掛。

但Facebook的讚按鈕外掛有夠難找,不知道是不是關鍵字打不對,找到的80%都是嵌入粉絲團用的外掛,而不是針對各篇文章按讚的。

之後找到了一個,覺得蠻好用的,但前陣子的兩次更新各自出了問題,第一次是更新後整個讚按鈕就不見了,第二次更新後,開頭前幾天正常,後來就變成英文的。

後來想想,身為一位前端工攻城獅,即便不會寫PHP,用JavaScript自己動態嵌入一個讚按鈕很難嗎!!(前端小宇宙燃燒起來啦)

然後又想想,反正寫都要寫了,在台灣幾乎人人都有裝LINE的情況下,不如順便放個LINE分享按鈕好了。

最後再想想,之前寫的畫新冠狀病毒分佈圖那篇,在Twitter上曝光數難得破了600,看來也是個曝光管道,那也放個Twitter按鈕好啦~

最後總結,這篇Augustus會筆記這次自己用原生JavaScript寫的、在WordPress上嵌入FB + LINE + Twitter三家分享按鈕的過程。

統整的原始碼會放在文章最後,如果只想複製貼上的朋友可以直接滑到文末,但也懇請點個讚或分享一下再複製貼上


1 取得分享按鈕的HTML

一開始要先去找這三家讚/分享按鈕的HTML。

FB

網頁專用的「讚」按鈕

點進上面的連結後,就直接用這頁來產出一個讚按鈕。

放個廣告賺點養主機的$$,謝謝

確認好要的樣式跟其它選項後,按下「取得原始碼」,就會跳出一個寫有要嵌入的HTML部份:

FB按/分享按鈕的HTML
FB按/分享按鈕的HTML

從FB提供的原始碼來看,需要另外處理的是:

  • 頁面上額外載入SDK的JS檔
  • data-href 要改成每一頁的網址

LINE

分享到LINE或加入好友 一顆按鍵,一指瞬間

LINE的外掛按鈕有三種:加LINE好友、讚、分享。

因為LINE加好友的部份,本站之前有寫了一個LINE登入的功能,不讓功能重複因此不採用。(LINE登入筆記文:上篇下篇

而LINE的讚、分享是分開來寫的,不像FB一個參數就可以同時有,為了版面不要有過多按鈕讓使用者猶豫,就選擇「分享」就好。

LINE的分享按鈕,官方提供的程式碼在這:

LINE分享的HTML(點擊看原圖)
LINE分享的HTML(點擊看原圖)

跟FB一樣,要另外處理的是二部份:

  • 頁面上額外載入JS檔
  • data-url 要改成每一頁的網址

Twitter

Tweet buttonJavaScript API

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後,嵌入的部份Augustus習慣用 insertAdjacentHTML,MDN上說:

insertAdjacentHTML() 把傳入的字串解析成 HTML 或 XML,並把該節點插入到 DOM 樹指定的位置。它不會重新解析被使用的元素,因此他不會破壞該元素裡面原有的元素。這避免了序列化的複雜步驟,使得它比直接操作  innerHTML 快上許多。

Element.insertAdjacentHTML()

「快上許多」這四字有打中工程師的痛點,天下武功唯快不破呀~

把上面分享按鈕的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);
}

Augustus這邊先是insert到文章開頭,接著又寫了一個判斷:

if(document.querySelector('.sharedaddy')) { //… }

.sharedaddy 這塊是裝了Jetpack外掛後會產生的一個區塊,在頁面上就是這塊:

Jetpack的分享區塊
Jetpack的分享區塊

因為想在這上面也再嵌分享按鈕,而考慮到不是每位來複製貼上code的大大們都會裝有這塊,因此就多加了一個 if


5 設計按鈕樣式

因為三家的分享按鈕都小小一顆,沒必要設計成各自一排。

Augustus設計讓它們都在一排上。

這邊直接用IE支援度不高的flex來排。

對,Augustus不在意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也沒關係,Augustus實測,直接放在小工具上也是可以的。

小工具有一項是「自訂HTML」:

WordPress內建的自訂HTML
WordPress內建的自訂HTML

新增以後,把我們上面寫的這些程式碼貼上去按儲存,就可以了。


完整程式碼

本篇在WordPress上自己加入FB、LINE、Twitter的程式碼,整理在這篇,歡迎取用,但麻煩在複製貼上前,可以對本篇按個讚及分享。

Summary
用原生JavaScript寫一組社群分享按鈕(FB、LINE、Twitter)
Article Name
用原生JavaScript寫一組社群分享按鈕(FB、LINE、Twitter)
Description
本篇大綱:外掛有好也有壞,決定自己寫。1 取得分享按鈕的HTML:FB、LINE、Twitter。2 頁面上額外載入JS檔。3 抓每一頁的網址。4 頁面上嵌入HTML。5 設計按鈕樣式。6 原始碼要放哪。完整程式碼。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest
2 Comments
最舊
最新
Inline Feedbacks
看所有留言
pock
pock
5 月 之前

感謝分享 此文很受用 謝謝