重要事項:本文件不適用於您目前選取的格式 廣告!
amp-social-share
說明
用法
必要指令碼
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
用法
amp-social-share
元件會顯示社群分享按鈕,供使用者分享到社群平台。
amp-social-share
產生的按鈕 (包括預先設定的供應商的按鈕) 都沒有標籤/無障礙名稱,可供輔助技術 (例如螢幕閱讀器) 讀取。請務必加入包含描述性標籤的 aria-label
,否則這些控制項只會被宣告為未標記的「button」元素。範例:基本社群分享按鈕
分享按鈕會為某些預先設定的供應商猜測一些預設值。它會假設您要分享的網址是目前文件的標準網址,而您要分享的文字是頁面標題。
<amp-social-share type="twitter" aria-label="Share on Twitter" ></amp-social-share>
範例:傳遞參數
當您想要將參數傳遞至分享端點時,您可以指定 data-param-<attribute>
,這會附加到分享端點。
<amp-social-share type="linkedin" width="60" height="44" data-param-text="Hello world" data-param-url="https://example.com/" aria-label="Share on LinkedIn" > </amp-social-share>
LinkedIn 是預先設定的供應商之一,因此您不需要提供 data-share-endpoint
屬性。
預先設定的供應商
amp-social-share
元件提供一些預先設定的供應商,這些供應商知道自己的分享端點以及一些預設參數。
供應商 | 類型 | 參數 |
---|---|---|
Web Share API (觸發作業系統分享對話方塊) | system |
|
電子郵件 | email |
|
facebook |
| |
linkedin |
| |
pinterest |
| |
Tumblr | tumblr |
|
twitter |
| |
whatsapp |
| |
LINE | line |
|
SMS | sms |
|
未設定的供應商
除了預先設定的供應商之外,您還可以透過在 amp-social-share
元件中指定其他屬性來使用未設定的供應商。
範例:為未設定的供應商建立分享按鈕
以下範例透過 Facebook Messenger 建立分享按鈕,方法是將 data-share-endpoint
屬性設定為 Facebook Messenger 自訂通訊協定的正確端點。
<amp-social-share type="facebookmessenger" data-share-endpoint="fb-messenger://share" data-param-text="Check out this article: TITLE - CANONICAL_URL" aria-label="Share on Facebook Messenger" > </amp-social-share>
由於這些供應商未預先設定,因此您需要為供應商建立適當的按鈕圖片和樣式。
變數替換
您可以在 <amp-social-share>
元素中使用全域 AMP 變數替換。在以下範例中,TITLE
會替換為頁面標題,而 CANONICAL_URL
則會替換為文件的標準網址。
<amp-social-share type="whatsapp" data-param-text="Check out this article: TITLE - CANONICAL_URL" > </amp-social-share>
屬性
type (必要)
選取供應商類型。預先設定和未設定的供應商都需要此屬性。
data-target
指定開啟目標的目標。除了 iOS 上的電子郵件/SMS 之外,所有情況下的預設值均為 _blank
,在 iOS 上的電子郵件/SMS 中,目標會設定為 _top
。
請注意,我們僅建議針對電子郵件使用此覆寫。
data-share-endpoint
未設定的供應商需要此屬性。
一些熱門供應商具有預先設定的分享端點。如需詳細資訊,請參閱「預先設定的供應商」章節。對於未設定的供應商,您需要指定分享端點。
data-param-*
所有以 data-param-*
為字首的屬性都會轉換為網址參數,並傳遞至分享端點。
aria-label
根據預設,aria-label
屬性會填入 Share by type
,其中 'type' 是提供給元件的 type
屬性。如果將非空值傳遞至 aria-label
,則會覆寫預設值。
樣式設定
預設樣式
根據預設,amp-social-share
包含一些熱門的預先設定供應商。這些供應商的按鈕會使用供應商的官方色彩和標誌設定樣式。預設寬度為 60 像素,預設高度為 44 像素。
自訂樣式
有時您想要提供自己的樣式。您可以直接覆寫提供的樣式,如下所示
amp-social-share[type='twitter'] { background: red; background-image: url(datauri:svg/myownsvgicon); }
在自訂 amp-social-share
圖示的樣式時,請確保自訂圖示符合供應商 (例如 Twitter、Facebook 等) 設定的品牌指南。
無障礙功能
焦點指示
amp-social-share
元素預設為藍色外框作為可見的焦點指示器。它也預設 tabindex=0
,讓使用者在頁面上一起使用多個 amp-social-share
元素時,可以輕鬆地依序瀏覽。
預設焦點指示器是透過以下 CSS 規則集達成的。
amp-social-share:focus { outline: #0389ff solid 2px; outline-offset: 2px; }
可以透過為焦點定義 CSS 樣式,並將其包含在 AMP HTML 頁面上的 style
標記中,來覆寫預設焦點指示器。在以下範例中,第一個 CSS 規則集透過將 outline
屬性設定為 none
來移除所有 amp-social-share
元素上的焦點指示器。第二個規則集指定紅色外框 (而非預設藍色),並將 outline-offset
設定為 3px
,適用於具有類別 custom-focus
的所有 amp-social-share
元素。
amp-social-share:focus{ outline: none; } amp-social-share.custom-focus:focus { outline: red solid 2px; outline-offset: 3px; }
使用這些 CSS 規則,amp-social-share
元素不會顯示可見的焦點指示器,除非它們包含類別 custom-focus
,在這種情況下,它們會具有紅色外框指示器。
色彩對比
請注意,type
值為 twitter
、whatsapp
或 line
的 amp-social-share
將顯示一個按鈕,其前景/背景色彩組合低於 WCAG 2.1 SC 1.4.11 非文字內容對比 中針對非文字內容建議的 3:1 門檻值。
若對比度不足,內容可能會難以辨識,因此難以識別。在極端情況下,對比度低的內容可能完全無法讓有色彩感知障礙的人看到。以上述分享按鈕為例,使用者可能無法適當地感知/理解分享控制項是什麼,以及它們與哪個服務相關。
驗證
請參閱 AMP 驗證器規格中的 amp-social-share 規則。
您已閱讀本文件十幾次,但它似乎沒有涵蓋您的所有問題?也許其他人也有相同的感受:請在 Stack Overflow 上與他們聯繫。
前往 Stack Overflow 發現錯誤或缺少功能?AMP 專案強烈鼓勵您的參與和貢獻!我們希望您能成為我們開放原始碼社群的持續參與者,但我們也歡迎針對您特別熱衷的問題做出一次性貢獻。
前往 GitHub