amp-pinterest

Edit on Github
Open in Playground

Introduction

The amp-pinterest component allows embedding a Pin It button or pin widget.

Setup

Import the amp-pinterest component in the header.

<script async custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>

Pin It Button

Set data-do to buttonPin to enable pinning content on your site. These attributes are required:

  • data-url: the URL to be shared.
  • data-media the absolute image URL to be pinned.
  • data-description: the default description that appears in the pin create form.

Example

<figure>
  <amp-img src="/img/amp.jpg"
    width="300"
    height="169"
    alt="an image"></amp-img>
  <amp-pinterest height="18"
    width="56"
    data-do="buttonPin"
    data-url="https://ampbyexample.com/"
    data-media="https://ampbyexample.com/img/amp.png"
    data-description="amp-pinterest in action">
  </amp-pinterest>
</figure>

Embed pin widget

To embed the pin widget, set data-do to embedPing. The data-url attribute must contain the fully-qualified URL of the Pinterest resource.

Example

<amp-pinterest width="236"
  height="326"
  data-do="embedPin"
  data-url="https://www.pinterest.com/pin/228065168607834583/">
</amp-pinterest>