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.js.cn/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.js.cn/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 是要分享的 URL，默认为当前 URL。
  • data-param-attribution 是分享的归属地。

所有以 data-param-* 开头的属性都将转换为 URL 参数并传递给分享端点。

<amp-social-share type="linkedin" width="40" height="40" data-param-text="Check out these AMP Examples!" data-param-url="https://amp.js.cn/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.js.cn/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.js.cn/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 上编辑示例