AMP教學-amp-social-share 分享網址按鈕
BY kate │
現在網頁中多少會用到"分享此頁面到社群"的機制，雖然手機上大多有內建的按鈕可執行，但若頁面上有這類的分享按鈕讓觀看者直覺的點下，似乎是較佳的使用體驗。
這次要講AMP的分享按鈕套件，預設多達近10個分享機制按鈕，雖然無法包山包海但應可以滿足常用的一些大型社群，如facebook、ig等分享按鈕。
在<head>中載入js
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
※注意要確認AMP頁面中有連結回原始頁面的網址 <link rel="canonical" href="原始頁面"> 分享文章時所帶的網址會是原始頁面網址
基本的寫法:
設置一個分享到twitter的按鈕，寫法如下
<amp-social-share type="twitter"></amp-social-share>
主要在type裡面寫上指定社群
預設大小為60x40px 可以利用css處理外觀
多個分享按鈕可以寫為
示範
<div>
<amp-social-share type="email"></amp-social-share>
<amp-social-share type="facebook" data-param-app_id="254325784911610"></amp-social-share>
<amp-social-share type="linkedin"></amp-social-share>
<amp-social-share type="pinterest" data-param-media="https://amp.dev/static/samples/img/amp.jpg"></amp-social-share>
<amp-social-share type="tumblr"></amp-social-share>
<amp-social-share type="twitter"></amp-social-share>
<amp-social-share type="whatsapp"></amp-social-share>
<amp-social-share type="line"></amp-social-share>
</div>
以下為寫在type裡的各屬性說明
| 種類 | Type | 說明 |
| Web Share API (觸發裝置裡的系統分享視窗) | system |
|
|
||
|
||
|
||
|
||
| G+ | gplus |
|
| Tumblr | tumblr |
|
|
||
|
||
| LINE | line |
|
| SMS | sms |
|
假如需要設置其他社群按鈕可寫為(以下以facebookmessenge示範)
<amp-social-share type="facebookmessenger"
data-share-endpoint="fb-messenger://share"
data-param-text="Check out this article: TITLE - CANONICAL_URL"></amp-social-share>
由於這類的按鈕沒有圖標，需要使用css自行設定圖片和樣式
CSS
可以利用CSS 來修改分享按鈕外觀，並為原本按鈕增加class，例如改底色或形狀等等
例如
amp-social-share.rounded {
border-radius: 50%;
background-size: 60%;
color: #FFFFFF;
background-color: #005AF0;
}
amp-social-share 可放於頁面上，也可以和amp-lightbox配合，做出跳出視窗裡面有分享按鈕的圖標
