amp-social-share.md

amp-social-share

Description	Displays a social share button.
Availability	Stable
Required Script	<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Supported Layouts	container, fill, fixed, fixed-height, flex-item, nodisplay, responsive
Examples	Annotated code example for amp-social-share

Examples

Example: Basic social share button

The share button guesses some defaults for you for some pre-configured providers. It assumes that the current document canonical url is the URL you want to share and the page title is the text you want to share.

<amp-social-share type="twitter"></amp-social-share>

Example: Passing parameters

When you want to pass parameters to the share endpoint, you can specify data-param-<attribute> that will be appended to the share endpoint.

<amp-social-share type="linkedin" width="60" height="44"
  data-param-text="Hello world"
  data-param-url="https://example.com/">
</amp-social-share>

Linkedin is one of the pre-configured providers, so you do not need to provide the data-share-endpoint attribute.

Attributes

type (required)

Selects a provider type. This is required for both pre-configured and non-configured providers.

data-share-endpoint (required for non-configured providers)

Some popular providers have pre-configured share endpoints. For details, see the Pre-configured Providers section. For non-configured providers, you'll need to specify the share endpoint.

data-param-*

All data-param-* prefixed attributes are turned into URL parameters and passed to the share endpoint.

Pre-configured Providers

The amp-social-share component provides some pre-configured providers that know their sharing endpoints as well as some default parameters.

Provider	Parameters
Email	data-param-subject: optional, defaults to: Current page title data-param-body: optional, defaults to: rel=canonical URL
Facebook	data-param-app_id: required, defaults to: none. This parameter is required for the Facebook Share dialog. data-param-href: optional, defaults to: rel=canonical URL
LinkedIn	data-param-url: optional, defaults to: rel=canonical URL
Pinterest	data-param-url: optional, defaults to: rel=canonical URL data-param-description: optional, defaults to: Current page title
G+	data-param-url: optional, defaults to: rel=canonical URL
Tumblr	data-param-url: optional, defaults to: rel=canonical URL data-param-text: optional, defaults to: Current page title
Twitter	data-param-url: optional, defaults to: rel=canonical URL data-param-text: optional, defaults to: Current page title
Whatsapp	data-param-text: optional, defaults to: "Current page title - current page URL"
Web Share API (available in Chrome as an origin trial)	data-param-text: optional, defaults to: "Current page title" data-param-data-mode: optional, if set to replace, all other share options are removed.

Non-configured Providers

In addition to pre-configured providers, you can use non-configured providers by specifying additional attributes in the amp-social-share component.

Example: Creating a share button for a non-configured provider

The following example creates a share button through WhatsApp by setting the data-share-endpoint attribute to the correct endpoint for the WhatsApp custom protocol.

<amp-social-share type="whatsapp"
    layout="container"
    data-share-endpoint="whatsapp://send"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
    Share on Whatsapp
</amp-social-share>

Styles

Default Styles

By default, amp-social-share includes some popular pre-configured providers. Buttons for these providers are styled with the provider's official color and logo. The default width is 60px, and the default height is 44px.

Custom Styles

Sometimes you want to provide your own style. You can simply override the provided styles like the following:

amp-social-share[type="twitter"] {
  background: red;
  background-image: url(datauri:svg/myownsvgicon);
}

Variable Substitution

You can use global AMP variables substitution in the <amp-social-share> element. In the example below, TITLE is substituted with the page title and CANONICAL_URL with the document's canonical URL.

<amp-social-share type="whatsapp"
    layout="container"
    data-share-endpoint="whatsapp://send"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
    Share on Whatsapp
</amp-social-share>

Validation

See amp-social-share rules in the AMP validator specification.