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>

确保您已配置规范 URL。

<link rel="canonical" href="https://amp.org.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.org.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.org.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.org.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.org.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 上编辑示例