amp-social-share

1.0 0.1

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

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-social-share-1.0.css">

用法

`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 文件之外獨立使用

Bento 可讓您在非 AMP 頁面中使用 AMP 元件，而無需完全採用有效的 AMP。您可以取得這些元件，並將它們放置在不支援 AMP 的架構和 CMS 的實作中。如需詳細資訊，請參閱我們的指南 在非 AMP 頁面中使用 AMP 元件。

若要尋找獨立版本的 `amp-social-share`，請參閱 bento-social-share。

預先設定的供應商

`amp-social-share` 元件提供一些預先設定的供應商，這些供應商知道其分享端點以及一些預設參數。

未設定的供應商

除了預先設定的供應商之外，您還可以透過在 `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

指定開啟目標的目標。預設值為 `_blank`，但 iOS 上的電子郵件/簡訊除外，在 iOS 上，目標會設定為 `_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'] {
  color: blue;
  background: red;
}

自訂 `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 規則集會移除所有 `amp-social-share` 元素上的焦點指示器，方法是將 `outline` 屬性設定為 `none`。第二個規則集會指定紅色外框 (而非預設藍色)，並將 `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-social-share` 的 `1.0` 版本具有一些額外功能，使其與 `0.1` 版本有所區別。

1. 預先設定供應商的預設圖示已更新，以反映其關聯公司的最新標誌和顏色，因此遷移至 `1.0` 時，預期會看到一組新的標誌。
2. 預設圖示的前景和背景顏色現在都可以使用 CSS 設定樣式。如需詳細資訊，請參閱上方的「樣式設定」章節。
3. 現在已包含支援在預設圖示上使用自訂標誌或文字。如果 `amp-social-share` 元件有任何子元素，它們現在將會顯示，而不是預設圖示。(在 `0.1` 中，它們會覆蓋在現有圖示上。)