Menampilkan widget pinterest atau tombol pin pinterest pada halaman postingan atau sidebar Amp Template dapat dengan mudah anda lakukan, sebelumnya jika anda ingin mengetahui cara embed twitter dan instagram silahkan simak pada postingan cara embed twitter code dan cara embed instagram yang sudah terlebih dahulu saya postingkan.

Pada dasarnya trik ini tidak berbeda dengan trik-trik sebelumnya, sobat blogger cukup menambahkan beberapa fungsi kode yang akan saya  jelaskana dibawah ini.

Sebagai bahan pertimbangan, jika belum mempunyai akun pinterest silahkan anda buat terlebih dahulu di pinterest.com, sehingga nantinya widget pinterest yatg ditampilkan adalah benar-benar milik anda sendiri :).

Langkah-langkahnya begini sob
;

Pertama

Silahkan salin kode dibawah ini dan letakan sebelum tag </head>

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

Catatan: jika kode script diatas sudah ada pada template anda, maka abaikan saja langkah ini.

Kedua

Salin kode dibawah ini dan letakan pada area yang anda inginkan, atau ingin ditampilkan.

Menampilkan Widget Pinterest langsung

<amp-pinterest width=240
      height=243
      data-do="embedPin"
      data-url="https://www.pinterest.com/pin/342906959112275993/">
</amp-pinterest>

Hanya Menampilkan Tombol Pin it

<figure>
    <amp-img src="https://lh3.googleusercontent.com/-3M4P4AmBfOo/V_fCjJ5OPfI/AAAAAAAAH94/W5sFlE3OuQgEAYrXKL_aQM1-pom7ikhGACEw/w300-h169-p/no-image.jpg"
        width="300"
        height="169"
        alt="an image"></amp-img>
    <amp-pinterest height=28
        width=56
        data-do="buttonPin"
        data-url="https://amptemplates.blogspot.com"
        data-media="https://amptemplates.blogspot.com"
        data-description="amp-pinterest in action">
    </amp-pinterest>
  </figure>

Ketiga

Ganti url https://www.pinterest.com/pin/342906959112275993/ dengan url pinterest anda

DEMO

Silahkan dicoba dan semoga bermanfaat, terimakasih salam antoncabon.


Share this:

YOU MIGHT ALSO LIKE

Related Posts

Show Disqus Comment Hide Disqus Comment

Disqus Comments