[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 官方文件說明

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。