amp-social-share

1.0 0.1

<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
  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 元件提供 一些預先設定的供應商，這些供應商知道其分享端點以及一些預設參數。

未設定的供應商

除了預先設定的供應商之外，您還可以透過在 amp-social-share 元件中指定其他屬性來使用未設定的供應商。

範例：為未設定的供應商建立分享按鈕

下列範例透過將 data-share-endpoint 屬性設定為 Facebook Messenger 自訂通訊協定的正確端點，來建立 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，在這種情況下，目標會設定為 _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 元素上的焦點指示器。第二個規則集指定紅色外框 (而非預設的藍色)，並將所有具有 custom-focus 類別的 amp-social-share 元素的 outline-offset 設定為 3px。

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 規則。