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?
Demo
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