AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • 網站

amp-social-share

在 Playground 中開啟

簡介

amp-social-share 組件為分享按鈕提供通用介面，樣式彼此互補。

設定

在標頭中匯入 amp-social-share 組件。

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

確保您已設定標準網址。

<link rel="canonical" href="https://amp.dev.org.tw/documentation/examples/components/amp-social-share/index.html">

樣式

<amp-social-share> 的自訂樣式。

<style amp-custom>
  :root {
    --color-primary: #005AF0;
    --color-text-light: #fff;
  }
  /* 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;
  }
  /* blue icons with rounded corners  */
  amp-social-share.rounded {
    border-radius: 50%;
    background-size: 60%;
    color: var(--color-text-light);
    background-color: var(--color-primary);
  }
</style>

基本用法

嵌入 amp-social-share 小工具，並從支援的類型中選擇分享類型。

type="facebook" 的 amp-social-share 需要透過 data-attribution 指定 Facebook 應用程式 ID。

<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.org.tw/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-social-share 小工具，選擇類型，然後配置動作。

  • width，預設值為 60px。
  • height，預設值為 44px。
  • data-param-text 是要包含在分享中的文字。
  • data-param-url 是要分享的網址，預設為目前的網址。
  • data-param-attribution 是分享歸屬的位置。

所有 data-param-* 前綴的屬性都將轉換為網址參數，並傳遞至分享端點。

<amp-social-share type="linkedin" width="40" height="40" data-param-text="Check out these AMP Examples!" data-param-url="https://amp.dev.org.tw/documentation/examples/" data-param-attribution="AMPhtml" aria-label="Share on LinkedIn">
</amp-social-share>

自訂樣式

每當您想要提供自己的樣式時，請在 <style amp-custom> 元素中使用 CSS 屬性 (修改簡報)。這將確保圖片保持響應式和置中，並且預設樣式會被覆寫。

  • background-color，如果您希望元素呈現不同的顏色。
  • background-image，如果您想要變更圖示，請提供其他圖片。
  • background-repeat (當使用 background-image 時)，設定為 no-repeat。
  • background-position (當使用 background-image 時)，設定為 center。
  • background-size (當使用 background-image 時)，設定為 contain。
<amp-social-share type="linkedin" aria-label="Share on LinkedIn" class="custom-style">
</amp-social-share>

圓形圖示

例如，您可以調整背景大小、顏色和邊框半徑，以實現圓角外觀，讓所有圖示都使用相同的配色方案。參考上方「樣式」區段中的 .rounded CSS 類別，以獲得以下效果。

<amp-social-share class="rounded" aria-label="Share by email " type="email" width="48" height="48"></amp-social-share>
<amp-social-share class="rounded" aria-label="Share on Facebook" type="facebook" data-param-app_id="254325784911610" width="48" height="48"></amp-social-share>
<amp-social-share class="rounded" aria-label="Share on LinkedIn" type="linkedin" width="48" height="48"></amp-social-share>
<amp-social-share class="rounded" aria-label="Share on Pinterest" type="pinterest" data-param-media="https://amp.dev.org.tw/static/samples/img/amp.jpg" width="48" height="48"></amp-social-share>
<amp-social-share class="rounded" aria-label="Share on Tumblr" type="tumblr" width="48" height="48"></amp-social-share>
<amp-social-share class="rounded" aria-label="Share on Twitter" type="twitter" width="48" height="48"></amp-social-share>
<amp-social-share class="rounded" aria-label="Share on WhatsApp" type="whatsapp" width="48" height="48"></amp-social-share>
<amp-social-share class="rounded" aria-label="Share on Line" type="line" width="48" height="48"></amp-social-share>

透過 Pinterest 分享媒體

使用 data-param-media 透過 Pinterest 分享媒體。

<amp-social-share type="pinterest" aria-label="Share on Pinterest" data-param-media="https://amp.dev.org.tw/static/samples/img/amp.jpg"></amp-social-share>

原生分享對話方塊

如果使用者正在使用支援 Web Share API 的瀏覽器檢視 AMP 文件，則 system 類型將顯示原生分享 UI。

以下是在 Android 版 Chrome 中的外觀

<amp-social-share type="system" aria-label="Share"></amp-social-share>

此類型支援一個選項：如果指定 data-mode="replace"，則所有其他分享圖示都將被隱藏。(也就是說，使用者將看到的唯一分享圖示是系統分享圖示。)

由於無法在此範例的上下文中示範此功能，因此以下是一些螢幕截圖來說明差異。

不使用 `data-mode="replace"`

使用 `data-mode="replace"`

需要更多說明嗎？

如果此頁面上的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow
未說明的特性？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對您特別熱衷的問題做出一次性的貢獻。

在 GitHub 上編輯範例