⚠️ Halaman ini membutuhkan JavaScript untuk tampil dengan benar. Mohon aktifkan JavaScript di pengaturan browser Anda.

Embed Pinterest Otomatis Anti Ribet

Ribet banget ya, kalau mau embed konten Pinterest di blog? ngurusin kode <iframe> per gambar, Tapi kamu bisa nampilin cuma modal tempel link. Enggak percaya?

Daftar isi

Demo 

  1. Demo artikel di situs ini
  2. Demo untuk blogspot 

Panduan

Letakkan css ini di tema :

 .pinterest {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 2rem 0;
        }

      .pinterest iframe {
        border: none;
        border-radius: 8px;
        box-shadow: none;
        }

Letakkan script ini di sebelum </body> atau di halaman artikel :
 <script>
  document.addEventListener('DOMContentLoaded', () => {
      const PINTEREST_PIN_URL_MARKER_REGEX = /%%(https?:\/\/[^\s]*\/pin\/[^\s]+)/i;
      let anyChangesMade = false;
      const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
      let node;
        let nodesToReplace = [];
      while(node = walker.nextNode()) {
          if (node.nodeValue.match(PINTEREST_PIN_URL_MARKER_REGEX)) {
              nodesToReplace.push(node);
          }
        }

      nodesToReplace.forEach(node => {
          const textContent = node.nodeValue;
          const match = textContent.match(PINTEREST_PIN_URL_MARKER_REGEX);
          if (match) {
              const url = match[1];
              const aTag = document.createElement('a');
              aTag.href = url;
              aTag.setAttribute('data-pin-do', 'embedPin');
              const containerDiv = document.createElement('div');
              containerDiv.className = 'pinterest';
              containerDiv.appendChild(aTag);
              node.parentNode.replaceChild(containerDiv, node);
              anyChangesMade = true;
          }
      });
      anyChangesMade && setTimeout(() => {
          window.PinUtils && window.PinUtils.build();
      }, 500);
  });
    </script>

    <script async defer src="https://assets.pinterest.com/js/pinit.js"></script>
 
Setelah itu kamu dapat menulis url pinterest dengan format seperti ini :

%%https://id.pinterest.com/pin/916412224198059662/

outputnya akan menjadi gambar seperti demo diatas

Comments