AMP

amp-pinterest

Description

Displays a Pinterest widget, Save button, or Follow button.

 

Required Scripts

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

Exemples

Examples

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

Example: Save 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>

Save Button

data-do (required)

Must be set to buttonPin.

data-url (required)

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

data-media (required)

Contains the fully-qualified URL of the image intended to be saved as a pin. 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 Save button

Default small rectangular button:

height=20 width=40

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

height=20 width=85

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

height=50 width=40

Large rectangular button using data-tall="true":

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-tall="true" 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-tall="true":

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/"
alt

This property like the the alt attribute on an <img> tag specifies the alternate text. If not provided it will be infered from the pin data provided by the Pinterest API.

Validation

See amp-pinterest rules in the AMP validator specification.

Besoin d'une aide supplémentaire ?

Vous avez lu ce document une douzaine de fois mais il ne répond pas à toutes vos questions ? D'autres personnes ont peut-être eu le même sentiment. Contactez-les sur Stack Overflow.

Se rendre sur Stack Overflow
Vous avez trouvé un bug ou une fonctionnalité manquante ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Se rendre sur GitHub