# Share api

[Demo](https://webshareapidemo.z11.web.core.windows.net/)
大家試試看這個就好

## 分享方式

網頁要如何做一個關於點選可以分享至其他地方的功能呢

### 原生Navigator Share Api分享
先拆解分享功能上在手機大概會長這個樣子，這是透過手機開啟分享能夠使用原生的App進行轉發分享。

但在一般電腦上並不能觸發應用程式分享，所以大多是藉由share button來作為代替

這是電腦上透過蝦皮上放置了facebook share button的分享

這是位於手機上點擊了share button他就不會像是使用手機原生一樣能夠在選項中讓你預選要發布到限時動態或是動態消息或是社團了，會是直接將facebook的app打開再讓你進行選取。

手機瀏覽器基本上都可以使用 [Navigator Share Api](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)解決，但只有在https環境下能夠使用，並且我在Nuxt 環境中DevServer的Https環境中是無法使用的，並且在Chorme之類的瀏覽器是無法正常使用的筆者測試可以正常使用的只有Safari[這裡可以參考Can I use？](https://caniuse.com/?search=Navigator%20share)。
[找到stackoverflow有人提出的解決方法](https://stackoverflow.com/questions/17673156/instagram-share-photo-from-webpage/74802803#74802803)

[pchome](https://24h.pchome.com.tw/?gclid=CjwKCAiA75itBhA6EiwAkho9e3Ix74xIOF3znfcj0ijnzuPjfXNHWkbkwejY6Vtxat5r1EVIxu66uxoCYmYQAvD_BwE)

[直到看到這篇我才確定2023開始能夠使用share Api 針對 Ex Instergram在Mobile裝置上透過Share Api分享能夠指定到 Stories、Reels、Feed等特定分享方式，不然在先前幾乎找不到能發到限時動態之類的方法，但要注意我測試下來目前僅有夾帶圖檔案才能轉發到限時動態，否則一般轉發連結都是只能轉傳到Chat。](https://stackoverflow.com/questions/75779062/call-instagram-app-share-option-through-mobile-web-browser)

- 各家直導Button
優點：個平台皆可
缺點：與手機原生相較不符合、要各自串接
1. [Line](https://developers.line.biz/en/docs/line-social-plugins/install-guide/using-line-share-buttons/#using-official-line-icons)
2. [Facebook](https://developers.facebook.com/docs/plugins/share-button/)
3. [Twitter](https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview)

## LinkTest

[參考測試](https://github.com/nicolasbeauvais/vue-social-sharing/blob/master/src/networks.js)

1. https://www.facebook.com/sharer/sharer.php?u=${url}

| Column 1 | ios | android |
| -------- | -------- | -------- |
| 電腦 | o | o |
| mobile | Text | o |

2. http://twitter.com/share?url=${url}

| Column 1 | ios | android |
| -------- | -------- | -------- |
| 電腦 | o | o |
| mobile | o | x |