AMP教學-amp-social-share 分享網址按鈕

AMP教學-amp-social-share 分享網址按鈕

現在網頁中多少會用到"分享此頁面到社群"的機制,雖然手機上大多有內建的按鈕可執行,但若頁面上有這類的分享按鈕讓觀看者直覺的點下,似乎是較佳的使用體驗。
這次要講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
  • data-param-text: 選填, 默認為當前標題
  • data-mode: 選填, 如果設置為 replace, 則會刪除其他分享按鈕
Email email
  • data-param-subject: 選填,默認為當前標題
  • data-param-body: 選填, 默認 rel=canonical UR
  • data-param-recipient: 選填, 默認為空值
Facebook facebook
  • data-param-app_id: 必須填寫,默認值是none, app_idt 需要填入參數,才能分享到Facebook,詳細說明 Facebook Share dialog.
  • data-param-href: 選填, 默認 rel=canonical URL
  • data-param-quote: 選填,用於引用
LinkedIn linkedin
  • data-param-url: 選填, 默認 rel=canonical URL
Pinterest pinterest
  • data-param-media:選填(但強烈建議設置),默認為none,此為帶到Pinterest的圖片,如果未設置可能找不到圖或是網頁內的縮圖判斷
  • data-param-url: 選填, 默認 rel=canonical URL
  • data-param-description: 選填, 預設為當前標題
G+ gplus
  • data-param-url: 選填, 默認 rel=canonical URL
Tumblr tumblr
  • data-param-url: 選填, 默認 rel=canonical URL
  • data-param-text: 選填, 默認為當前標題
Twitter twitter
  • data-param-url: 選填, 默認 rel=canonical URL
  • data-param-text: 選填, 默認為當前標題
Whatsapp whatsapp
  • data-param-text: 選填, 默認為當前標題
LINE line
  • data-param-url: 選填, 默認 rel=canonical URL
  • data-param-text: 選填, 默認為當前標題
SMS sms
  • data-param-body: 選填, 默認 rel=title - rel=canonical URL

假如需要設置其他社群按鈕可寫為(以下以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配合,做出跳出視窗裡面有分享按鈕的圖標

參考:
amp-social-share
examples-amp-social-share

更多文章:

  1. AMP教學-AMP Email格式介紹
  2. Bento AMP正式釋出,AMP網頁的未來發展將會如何?
  3. AMP 2020 線上發表重點整理
  4. AMP教學-amp-img圖片
  5. AMP教學-amp-carousel 輪播