AMP by Example




Samples & Templates
Samples & Templates


Edit in Playground


Edit on Github


The Social Share extension provides a common interface for share buttons, styled to complement each other.

Show Hidden Code Hide Code
<!doctype html>
<html ⚡>
  <meta charset="utf-8">
  <script async src=""></script>


Import the amp-social-share component in the header.

  <script async custom-element="amp-social-share" src=""></script>

Ensure you've configured your canonical URL.

  <link rel="canonical" href="">
Show Hidden Code Hide Code

  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <style amp-custom>
    amp-social-share.custom-style {
      background-color: #008080;
      background-image: url('');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;

Basic Usage

Embed the amp-social-share widget choosing a share type from the supported types.

amp-social-share with type="facebook" requires to specify the facebook app id via data-attribution.

    <amp-social-share type="email"></amp-social-share>
    <amp-social-share type="facebook" data-param-app_id="254325784911610"></amp-social-share>
    <amp-social-share type="gplus"></amp-social-share>
    <amp-social-share type="linkedin"></amp-social-share>
    <amp-social-share type="pinterest"></amp-social-share>
    <amp-social-share type="tumblr"></amp-social-share>
    <amp-social-share type="twitter"></amp-social-share>
    <amp-social-share type="whatsapp"></amp-social-share>


Embed the amp-social-share widget choosing a type, then configure the actions.

  • width, default 60px.
  • height, default 44px.
  • data-param-text is the text to include in the share.
  • data-param-url is the URL to share, current URL by default.
  • data-param-attribution is where the share is attributed to.

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

  <amp-social-share type="linkedin" width="40" height="40" data-param-text="Check out these AMP Examples!" data-param-url="" data-param-attribution="AMPhtml">

Custom Style

Whenever you want to provide your own style, use CSS properties within the <style amp-custom> element (Modify the presentation). This will make sure the image stays responsive and centered, and the default styling is overwritten.

  • background-color, if you want the element to be a different color.
  • background-image, provide another image if you want to change the icon.
  • background-repeat (when using background-image), set to no-repeat.
  • background-position (when using background-image), set to center.
  • background-size (when using background-image), set to contain.
  <amp-social-share type="linkedin" class="custom-style">

Sharing Media via Pinterest

Use data-param-media to share media via Pinterest.

  <amp-social-share type="pinterest" data-param-media=""></amp-social-share>