[AMP] 在頁面上添加社群分享連結按鈕

在 AMP 的頁面裡要添加社群分享按鈕的話要使用其內建的方法，首先要讀入對應的 js：

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

要注意要能確實分享，一定要設定好 canonical

<link rel="canonical" href="http://localhost:8080/documentation/examples/components/amp-social-share/index.html">

接著再依據你要分享的社群放入對應的按鈕即可。

<amp-social-share type="email" aria-label="Share by email"></amp-social-share>
<amp-social-share type="facebook" aria-label="Share on Facebook" data-param-app_id="254325784911610"></amp-social-share>
<amp-social-share type="linkedin" aria-label="Share on LinkedIn"></amp-social-share>
<amp-social-share type="pinterest" aria-label="Share on Pinterest" data-param-media="https://amp.dev/static/samples/img/amp.jpg"></amp-social-share>
<amp-social-share type="tumblr" aria-label="Share on Tumblr"></amp-social-share>
<amp-social-share type="twitter" aria-label="Share on Twitter"></amp-social-share>
<amp-social-share type="whatsapp" aria-label="Share on WhatsApp"></amp-social-share>
<amp-social-share type="line" aria-label="Share on Line"></amp-social-share>

上面是 AMP 內建的樣式，如果想要自訂樣式的話，amp-social-share 的標籤加上自訂的 class name，像是：

<amp-social-share class="custom-style" type="facebook" aria-label="Share on Facebook" data-param-app_id="254325784911610"></amp-social-share>

接著就可以替 custom-style 設定樣式：

/* a custom sharing icon */
  amp-social-share.custom-style {
    background-color: #008080;
    background-image: url('https://raw.githubusercontent.com/google/material-design-icons/master/social/1x_web/ic_share_white_48dp.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

注意這邊不能直接修改 background 屬性，而是需要每個 property 個別修改。

要修改分享按鈕大小的話則是直接在標籤加上 width 跟 height 的值就可以了。

詳細可以看 AMP 官方文件說明