Do you build things with AMP? Fill out the AMP Developer Survey!
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.
an image
<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>

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>
Potrzebujesz dodatkowych wyjaśnień?

Jeśli przedstawione tutaj wyjaśnienia nie odpowiadają na wszystkie pytania, skontaktuj się z innymi użytkownikami AMP, aby omówić daną przykładową realizację.

Przejdź do Stack Overflow
Niewyjaśniona funkcja?

Zdecydowanie zachęcamy do wzięcia udziału! Choć mamy nadzieję, że staniesz się stałym uczestnikiem naszej społeczności open source, to z wdzięcznością przyjmiemy również każdy jednorazowy wkład w kwestie, które są Twoją pasją.

Edytuj przykład na GitHub