Skip to content

Latest commit

 

History

History
126 lines (107 loc) · 4.98 KB

amp-social-share.md

File metadata and controls

126 lines (107 loc) · 4.98 KB
Raw

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 social-share.amp.html

Attributes

type (required) Selects pre-configured type. This is required for both pre-configured and external providers.

data-share-endpoint (required for non-configured providers) amp-social-share has some pre-configured share endpoints for popular providers, see section about Pre-configured Providers.

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

The simplest example:

The share button guesses some defaults for you for some already 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>

Simple Examples:

When you want to pass params 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 configured providers so no need to provide data-share-endpoint attribute.

Default Styles:

By default amp-social-share comes with few pre-configured popular social share providers. These are styled with the provider official color and logo. width: default 60px height: default 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);
}

Pre-configured Providers

The element provides some pre-configured providers that knows its sharing endpoint as well as some default parameters.

  • twitter
    • url optional (defaults: rel=canonical URL)
    • text optional (defaults: Current page title)
  • facebook
    • href optional (defaults: rel=canonical URL)
    • text optional (defaults: none)
    • app_id required (defaults: none) Required by Facebook share dialog.
  • pinterest
    • url optional (defaults: rel=canonical URL)
  • linkedin
    • url optional (defaults: rel=canonical URL)
  • gplus
    • url optional (defaults: rel=canonical URL)
  • email
    • subject optional (defaults: Crrent page title)
    • body optional (defaults: rel=canonical URL)

Un-configured Providers

amp-social-share allows you to use any provider you'd like that is not pre-configured. By configuring the element with more attributes.

Example

The following example will create a share button through whatsapp, by setting data-share-endpoint attribute to the correct endpoint for whatsapp ustom 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>
Var Substitution

You can use the global AMP variables substitution in the <amp-social-share> element. For exmaple, the above example will substitute TITLE with the page title and CANONICAL_URL with the document canonical URL.