用原生 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

隨選筆記文

Front-End

用原生 JavaScript 做一個簡單的抽獎功能頁面

Firebase Google

Firebase Cloud Firestore 常用功能筆記

Front-End

TestCafe 學習筆記 – 1:自動化測試會員登入

Front-End

用原生 JS 做一個簡單的手風琴 Accordion / Collapse 功能

Google Sheets

Google Sheets 略過空白格重整資料

Front-End

滿版圖片背景、影音背景

Bot Telegram

Telegram Bot 學習筆記 – 1:用 GCP + Node.js 接收 / 推播訊息

Front-End

幾個方便開發的 Console API 應用

PWA

PWA 學習筆記 – 5:用 Firebase 做 Web Push

Google Others

Google Material Design 表單標籤效果

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
7 Comments
最舊
最新
Inline Feedbacks
看所有留言
pock
pock
1 年 之前

感謝分享 此文很受用 謝謝

Eric
Eric
10 月 之前

版主你好:
有在網路上查到您的網站
覺得做得很好, 請問這個是您個人架設的站嗎?
還是使用像workpress的套件架站
如果可以的話再請您提供寶貴建議
非常感謝您

工作達人
工作達人
9 月 之前

我用筆電的chrome按你讚沒有效?有點詭異了!

Mercy
Mercy
7 月 之前

太厲害惹~~爬到這篇文真的很受用,但有個小小的問題想請教
有沒有可能將那三個按鈕跟網站的主題一致的樣式呢?
另外小小建議:是不是將這三個按鈕放在文末讓人看完順便分享,機率比較高~?