Pinterest Pin Link Generator - Solving a Plugin Gap
A member of the Pin Potential community mentioned they were using a website builder that lacked Pinterest integration. Their readers wanted to pin blog images, but no plugin existed for their platform. This got me curious about how Pinterest's "Pin it" buttons actually work.
The solution is straightforward - Pinterest accepts pin creation requests through a URL structure at pinterest.com/pin/create/button
with query parameters for the destination URL (where the pin links back to) and the media URL (the actual image).
I built Pin It to generate these links and create embeddable HTML blocks with "Pin it" overlay buttons.
How it works
Users enter their image URL, destination URL, description, and alt text. The tool generates either a clean Pinterest URL or a complete HTML block that can be pasted directly into any website builder.
The HTML version creates a self-contained block with the image and overlay button as a single piece of code.
Implementation
The application uses vanilla JavaScript with modern web APIs:
function buildPinterestHref(description, media, url) {
const params = new URLSearchParams({
url: url,
media: media,
description: description
});
return `https://www.pinterest.com/pin/create/button/?${params.toString()}`;
}
The HTML block generator creates embeddable content with inline styles:
function buildEmbeddableBlock(description, media, url, alt) {
return `<div style="position: relative; display: inline-block;">
<img src="${media}" alt="${alt}" style="max-width: 100%; height: auto;">
<a href="${buildPinterestHref(description, media, url)}"
target="_blank"
style="position: absolute; top: 10px; right: 10px;
background: #bd081c; color: white; padding: 8px 12px;
text-decoration: none; border-radius: 4px; font-size: 14px;">
Pin it
</a>
</div>`;
}
Additional features include URL validation, clipboard integration for easy copying, and a test data button for quick previews. The application also includes a like counter using Val.town's API for usage tracking.
Solving specific problems
The most useful tools often address very specific needs. While you might expect universal Pinterest integration across website builders, many platforms still lack this functionality.
Understanding how platform APIs work can turn technical limitations into simple solutions. Pinterest's straightforward URL structure transforms a "missing plugin" problem into a copy-paste workflow.
You can try the tool at pinit.page or explore the source code on GitHub.