AMP
  • websites

amp-pinterest

Introduction

The amp-pinterest component allows embedding a save 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>

Save 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.

<div>
  <amp-img src="/static/samples/img/amp.jpg"
    width="300"
    height="169"
    alt="an image"></amp-img>
  <amp-pinterest height="18"
    width="56"
    data-do="buttonPin"
    data-url="https://amp.dev/documentation/examples/"
    data-media="https://amp.dev/documentation/examples/"
    data-description="amp-pinterest in action">
  </amp-pinterest>
</div>

Embed pin widget

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

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

If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.

Go to Stack Overflow
An unexplained feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Edit sample on GitHub