Skip to content

Latest commit

 

History

History
181 lines (126 loc) · 4.38 KB

amp-pinterest.md

File metadata and controls

181 lines (126 loc) · 4.38 KB
Raw

amp-pinterest

Description Displays a Pinterest widget, Pin It button, or Follow button.
Availability Stable
Required Script <script async custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>
Supported Layouts fill, fixed, fixed-height, flex-item, nodisplay, responsive
Examples Annotated code example for amp-pinterest

Examples

Use the amp-pinterest component to display a Pin It button, Pin widget, or Follow button.

Example: Pin It button

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

Example: Pin widget

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

Example: Follow button

<amp-pinterest
    height=20
    width=94
    data-do="buttonFollow"
    data-href="https://www.pinterest.com/kentbrew/"
    data-label="Kent Brewster">
</amp-pinterest>

Pin It Button

data-do (required)

Must be set to buttonPin.

data-url (required)

Contains the fully-qualified URL intended to be pinned or re-made into a widget.

data-media (required)

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

data-description (required)

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-do (required)

Must be set to buttonFollow.

data-href (required)

Contains the fully qualified Pinterest user profile url to follow.

data-label (required)

Contains the text to display on the follow button.

Embedded Pin Widget

data-do (required)

Must be set to embedPin.

data-url (required)

Must contain the fully-qualified URL of the Pinterest resource to be shown as a widget.

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

Validation

See amp-pinterest rules in the AMP validator specification.