非常多的網站需要分享的功能,從 facebook 分享按鈕、line share 按鈕.....等等等,還有整合分享的外掛,分享外掛多不勝數,不妨也可以試試看這一個手機(IOS和Android)原生的分享功能 Navigator.share()。

網站製作開發時,非常多的網站需要分享的功能,從 facebook 分享按鈕、line share 按鈕.....等等等,還有整合分享的外掛,分享外掛多不勝數,不妨也可以試試看這一個。

使用前必須要先知道的是 Web Share API 你的網站必須支援 https,並且它於部分APP內的瀏覽不支援 (EX: line對話開啟的瀏覽器)

我們來看看MDN上面的文獻吧

https://developer.mozilla.org/
      let shareData = {
        title: 'MDN',
        text: 'Learn web development on MDN!',
        url: 'https://developer.mozilla.org',
      }

      const btn = document.querySelector('button');
      const resultPara = document.querySelector('.result');

      btn.addEventListener('click', () => {
        navigator.share(shareData)
          .then(() =>
            resultPara.textContent = 'MDN shared successfully'
          )
          .catch((e) =>
            resultPara.textContent = 'Error: ' + e
          )
      });

title: 網站名稱

text: 分享訊息

url: 網址

Chance Design 網站右下角分享按鈕就是用這個唷! 大家可以體驗看看。