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 上编辑示例