examples/pinterest.amp.html - main - githubmirror/amphtml

examples/pinterest.amp.html
536 строк18 KB
Caroline Liu
Apply lang="en" to examples/ (#34759)
10 июн 2021, 17:30
10 июн 2021, 17:302ee75c4
<!doctype html>
<html ⚡ lang="en">
<head>
  <meta charset="utf-8">
  <title>Pinterest examples</title>
  <link rel="canonical" href="amps.html" >
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <style amp-custom>
      body {
        padding: 15px;
      }
      h1, h2, h3 {
        clear: both;
      }
  </style>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>

  <h2>Pinterest Buttons and Widgets</h2>

  <h3>Embedded Pins</h3>

    <amp-pinterest width=245 height=330
      data-do="embedPin"
      data-url="https://www.pinterest.com/pin/99360735500167749/"
      alt="Hands making a heart over Pinterest logo">
    </amp-pinterest>

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

  <h3>Embedded Pins - chinese</h3>

    <amp-pinterest
      width="345"
      height="678"
      data-do="embedPin"
      data-url="https://www.pinterest.com/pin/192740059037785029/">
    </amp-pinterest>

  <h3>Embedded Pins - responsive</h3>

    <div style="width: 320px; float: left;">
      <amp-pinterest
        width="11"
        height="16"
        layout="responsive"
        data-do="embedPin"
        data-width="medium"
        data-url="https://www.pinterest.com/pin/494692340305120003/">
      </amp-pinterest>
    </div>

    <div style="width: 240px; float: left;">
      <amp-pinterest
        width="10"
        height="16"
        layout="responsive"
        data-do="embedPin"
        data-width="medium"
        data-url="https://www.pinterest.com/pin/494692340305120003/">
      </amp-pinterest>
    </div>

    <div style="width: 180px; float: left;">
      <amp-pinterest
        width="9"
        height="16"
        layout="responsive"
        data-do="embedPin"
        data-width="medium"
        data-url="https://www.pinterest.com/pin/494692340305120003/">
      </amp-pinterest>
    </div>

  <h2>Save Buttons</h2>

  <h4>Small Gray English with No Count</h4>

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

  <h4>Large Gray English with No Count</h4>

    <amp-pinterest height=28 width=56
      data-do="buttonPin"
      data-color="gray"
      data-tall="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small Gray English with Count Above</h4>

    <amp-pinterest height=50 width=40
      data-do="buttonPin"
      data-color="gray"
      data-count="above"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Large Gray English with Count Above</h4>

    <amp-pinterest height=68 width=56
      data-do="buttonPin"
      data-color="gray"
      data-count="above"
      data-tall="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small Gray English with Count Beside</h4>

    <amp-pinterest height=20 width=86
      data-do="buttonPin"
      data-color="gray"
      data-count="beside"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Large Gray English with Count Beside</h4>

    <amp-pinterest height=28 width=120
      data-do="buttonPin"
      data-color="gray"
      data-count="beside"
      data-tall="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small Red English with No Count</h4>

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

  <h4>Large Red English with No Count</h4>

    <amp-pinterest height=28 width=56
      data-do="buttonPin"
      data-tall="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small Red English with Count Above</h4>

    <amp-pinterest height=50 width=40
      data-do="buttonPin"
      data-count="above"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Large Red English with Count Above</h4>

    <amp-pinterest height=68 width=56
      data-do="buttonPin"
      data-count="above"
      data-tall="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small Red English with Count Beside</h4>

    <amp-pinterest height=20 width=86
      data-do="buttonPin"
      data-count="beside"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Large Red English with Count Beside</h4>

    <amp-pinterest height=28 width=120
      data-do="buttonPin"
      data-count="beside"
      data-tall="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small White English with No Count</h4>

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

  <h4>Large White English with No Count</h4>

    <amp-pinterest height=28 width=56
      data-do="buttonPin"
      data-tall="true"
      data-color="white"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small White English with Count Above</h4>

    <amp-pinterest height=50 width=40
      data-do="buttonPin"
      data-count="above"
      data-color="white"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Large White English with Count Above</h4>

    <amp-pinterest height=68 width=56
      data-do="buttonPin"
      data-count="above"
      data-color="white"
      data-tall="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small White English with Count Beside</h4>

    <amp-pinterest height=20 width=86
      data-do="buttonPin"
      data-count="beside"
      data-color="white"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Large White English with Count Beside</h4>

    <amp-pinterest height=28 width=120
      data-do="buttonPin"
      data-count="beside"
      data-color="white"
      data-tall="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small Gray Japanese with No Count</h4>

    <amp-pinterest height=20 width=40
      data-do="buttonPin"
      data-color="gray"
      data-lang="ja"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Large Gray Japanese with No Count</h4>

    <amp-pinterest height=28 width=56
      data-do="buttonPin"
      data-color="gray"
      data-tall="true"
      data-lang="ja"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small Gray Japanese with Count Above</h4>

    <amp-pinterest height=50 width=40
      data-do="buttonPin"
      data-color="gray"
      data-count="above"
      data-lang="ja"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Large Gray Japanese with Count Above</h4>

    <amp-pinterest height=68 width=56
      data-do="buttonPin"
      data-color="gray"
      data-count="above"
      data-lang="ja"
      data-tall="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small Gray Japanese with Count Beside</h4>

    <amp-pinterest height=20 width=86
      data-do="buttonPin"
      data-color="gray"
      data-count="beside"
      data-lang="ja"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Large Gray Japanese with Count Beside</h4>

    <amp-pinterest height=28 width=120
      data-do="buttonPin"
      data-color="gray"
      data-count="beside"
      data-lang="ja"
      data-tall="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small Red Japanese with No Count</h4>

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

  <h4>Large Red Japanese with No Count</h4>

    <amp-pinterest height=28 width=56
      data-do="buttonPin"
      data-tall="true"
      data-lang="ja"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small Red Japanese with Count Above</h4>

    <amp-pinterest height=50 width=40
      data-do="buttonPin"
      data-count="above"
      data-lang="ja"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Large Red Japanese with Count Above</h4>

    <amp-pinterest height=68 width=56
      data-do="buttonPin"
      data-count="above"
      data-lang="ja"
      data-tall="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small Red Japanese with Count Beside</h4>

    <amp-pinterest height=20 width=86
      data-do="buttonPin"
      data-count="beside"
      data-lang="ja"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Large Red Japanese with Count Beside</h4>

    <amp-pinterest height=28 width=120
      data-do="buttonPin"
      data-count="beside"
      data-lang="ja"
      data-tall="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small White Japanese with No Count</h4>

    <amp-pinterest height=20 width=40
      data-do="buttonPin"
      data-lang="ja"
      data-color="white"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Large White Japanese with No Count</h4>

    <amp-pinterest height=28 width=56
      data-do="buttonPin"
      data-tall="true"
      data-lang="ja"
      data-color="white"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small White Japanese with Count Above</h4>

    <amp-pinterest height=50 width=40
      data-do="buttonPin"
      data-count="above"
      data-lang="ja"
      data-color="white"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Large White Japanese with Count Above</h4>

    <amp-pinterest height=68 width=56
      data-do="buttonPin"
      data-count="above"
      data-lang="ja"
      data-color="white"
      data-tall="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small White Japanese with Count Beside</h4>

    <amp-pinterest height=20 width=86
      data-do="buttonPin"
      data-count="beside"
      data-lang="ja"
      data-color="white"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Large White Japanese with Count Beside</h4>

    <amp-pinterest height=28 width=120
      data-do="buttonPin"
      data-count="beside"
      data-lang="ja"
      data-color="white"
      data-tall="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Small Circle (Red Only, Count Not Available)</h4>

    <amp-pinterest height=32 width=32
      data-do="buttonPin"
      data-round="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Large Circle (Red Only, Count Not Available)</h4>

    <amp-pinterest height=32 width=32
      data-do="buttonPin"
      data-round="true"
      data-tall="true"
      data-url="http://www.flickr.com/photos/kentbrew/6851755809/"
      data-media="http://c2.staticflickr.com/8/7027/6851755809_df5b2051c9_b.jpg"
      data-description="Next stop: Pinterest">
    </amp-pinterest>

  <h4>Follow Button</h4>

    <amp-pinterest height=20 width=87
      data-do="buttonFollow"
      data-href="https://www.pinterest.com/zackargyle/"
      data-label="Zack Argyle">
    </amp-pinterest>

    <amp-pinterest height=20 width=87
      data-do="buttonFollow"
      data-href="https://www.pinterest.com/zackargyle"
      data-label="Zack Argyle">
    </amp-pinterest>

  <h4>Far Down a Page Embed with incorrect height</h4>

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

  </body>
</html>