Skip to content

Latest commit

 

History

History
151 lines (105 loc) · 5.43 KB

amp-pinterest.md

File metadata and controls

151 lines (105 loc) · 5.43 KB

amp-pinterest

Description Displays a Pinterest widget or Pin It button.
Availability Stable
Required Script <script async custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>
Examples pinterest.amp.html

The following lists validation errors specific to the amp-pinterest tag (see also amp-pinterest in the AMP validator specification:

Validation Error Description
TAG_REQUIRED_BY_MISSING Error thrown when required amp-pinterest extension .js script tag is missing or incorrect.
MANDATORY_ATTR_MISSING Error thrown when data-do attribute is missing.
IMPLIED_LAYOUT_INVALID Error thrown when implied layout is set to CONTAINER; this layout type isn't supported.
SPECIFIED_LAYOUT_INVALID Error thrown when specified layout is set to CONTAINER; this layout type isn't supported.
INVALID_PROPERTY_VALUE_IN_ATTR_VALUE Error thrown when invalid value is given for attributes height or width. For example, height=auto triggers this error for all supported layout types, with the exception of NODISPLAY.

Examples:

Pin It button: data-do="buttonPin"

<amp-pinterest height=20 width=40
  data-do="buttonPin"
  data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
  data-media="http://farm8.staticflickr.com/7027/6851755809_df5b2051c9_z.jpg"
  data-description="Next stop: Pinterest">
</amp-pinterest>

Embedded pin widget: data-do="embedPin"

<amp-pinterest width=245 height=330
  data-do="embedPin"
  data-url="https://www.pinterest.com/pin/99360735500167749/">
</amp-pinterest>

Pin It Button

data-url

Required when data-do is buttonPin. Contains the fully-qualified URL intended to be pinned or re-made into a widget.

data-media

Required when data-do is buttonPin. Contains the fully-qualified URL of the image intended to be pinned. If the pin will eventually contain multimedia (such as YouTube), should point to a high-resolution thumbnail.

data-description

Required when data-do is buttonPin. Contains the default description that appears in the pin create form; please choose carefully, since many Pinners will close the form without pinning if it doesn't make sense.

Sizing the Pin It Button

Default small rectangular button:

height=20 width=40

Small rectangular button with pin count to the right, using data-count="beside"

height=28 width=85

Small rectangular button with pin count on top, using data-count="above"

height=50 width=40

Large rectangular button using data-height="tall"

height=28 width=56

Large rectangular button with pin count to the right, using data-tall="true" and data-count="beside"

height=28 width=107

Large rectangular button with pin count on top, using data-height="tall" and data-count="above"

height=66 width=56

Small circular button using data-round="true"

height=16 width=16

Large circular button using data-round="true" and data-height="tall"

height=32 width=32

Follow Button

data-href

Required when data-do is buttonFollow. Contains the fully qualified Pinterest user profile url to follow.

data-label

Required when data-do is buttonFollow. Contains the text to display on the follow button.

Embedded Pin Widget

data-url

When building the Embedded Pin widget, data-url is required and must contain the fully-qualified URL of the Pinterest resource to be shown as a widget.

data-do="embedPin"
data-url="https://www.pinterest.com/pin/99360735500167749/"