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

أمثلة

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.

هل تحتاج إلى مزيد من المساعدة؟

لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.

الذهاب إلى Stack Overflow
هل وجدت خطأ أو تفتقد لميزة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

الانتقال إلى GitHub