Integrate Pinterest Hover Save Button on Images

Thank you very much for your reply. Is the provided code for a hover pin it button? I need a Pinterest Hover Button for the images.

So at first I create a hook element –> wp_footer, Location set to Post > All posts and use that code:

<script>
document.addEventListener("DOMContentLoaded", function() {
    var images = document.querySelectorAll(".single-post .wp-block-image img, .single-post .gb-block-image img, .single-post p[data-slot-rendered-content='true'] img, .single-post p img");
    var postTitle = document.querySelector(".single-post .entry-title").innerText || document.title; // Adjust the selector if needed to match your theme

    images.forEach(function(img) {
        var a = document.createElement('a');
        a.className = 'pin-it-button';
        var url = encodeURIComponent(window.location.href);
        var media = encodeURIComponent(img.src);
        var description = encodeURIComponent(postTitle);
        a.href = 'https://pinterest.com/pin/create/bookmarklet/?url=' + url + '&media=' + media + '&is_video=false&description=' + description;
        a.rel = 'noopener';
        a.target = '_blank';
        a.setAttribute('data-pin-do', 'buttonPin');
        img.parentNode.insertBefore(a, img);
    });
});
</script>

In the customizer I add that CSS:

.pin-it-button {
  position: absolute;
  z-index: 3;
  margin: 12px;
  font: 18px/35px "Arial";
  text-align: center;
  text-decoration: none;
  color: #fff !important;
  background: #e60023 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzBweCIgd2lkdGg9IjMwcHgiIHZpZXdCb3g9Ii0xIC0xIDMxIDMxIj48Zz48cGF0aCBkPSJNMjkuNDQ5LDE0LjY2MiBDMjkuNDQ5LDIyLjcyMiAyMi44NjgsMjkuMjU2IDE0Ljc1LDI5LjI1NiBDNi42MzIsMjkuMjU2IDAuMDUxLDIyLjcyMiAwLjA1MSwxNC42NjIgQzAuMDUxLDYuNjAxIDYuNjMyLDAuMDY3IDE0Ljc1LDAuMDY3IEMyMi44NjgsMC4wNjcgMjkuNDQ5LDYuNjAxIDI5LjQ0OSwxNC42NjIiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+PHBhdGggZD0iTTE0LjczMywxLjY4NiBDNy41MTYsMS42ODYgMS42NjUsNy40OTUgMS42NjUsMTQuNjYyIEMxLjY2NSwyMC4xNTkgNS4xMDksMjQuODU0IDkuOTcsMjYuNzQ0IEM5Ljg1NiwyNS43MTggOS43NTMsMjQuMTQzIDEwLjAxNiwyMy4wMjIgQzEwLjI1MywyMi4wMSAxMS41NDgsMTYuNTcyIDExLjU0OCwxNi41NzIgQzExLjU0OCwxNi41NzIgMTEuMTU3LDE1Ljc5NSAxMS4xNTcsMTQuNjQ2IEMxMS4xNTcsMTIuODQyIDEyLjIxMSwxMS40OTUgMTMuNTIyLDExLjQ5NSBDMTQuNjM3LDExLjQ5NSAxNS4xNzUsMTIuMzI2IDE1LjE3NSwxMy4zMjMgQzE1LjE3NSwxNC40MzYgMTQuNDYyLDE2LjEgMTQuMDkzLDE3LjY0MyBDMTMuNzg1LDE4LjkzNSAxNC43NDUsMTkuOTg4IDE2LjAyOCwxOS45ODggQzE4LjM1MSwxOS45ODggMjAuMTM2LDE3LjU1NiAyMC4xMzYsMTQuMDQ2IEMyMC4xMzYsMTAuOTM5IDE3Ljg4OCw4Ljc2NyAxNC42NzgsOC43NjcgQzEwLjk1OSw4Ljc2NyA4Ljc3NywxMS41MzYgOC43NzcsMTQuMzk4IEM4Ljc3NywxNS41MTMgOS4yMSwxNi43MDkgOS43NDksMTcuMzU5IEM5Ljg1NiwxNy40ODggOS44NzIsMTcuNiA5Ljg0LDE3LjczMSBDOS43NDEsMTguMTQxIDkuNTIsMTkuMDIzIDkuNDc3LDE5LjIwMyBDOS40MiwxOS40NCA5LjI4OCwxOS40OTEgOS4wNCwxOS4zNzYgQzcuNDA4LDE4LjYyMiA2LjM4NywxNi4yNTIgNi4zODcsMTQuMzQ5IEM2LjM4NywxMC4yNTYgOS4zODMsNi40OTcgMTUuMDIyLDYuNDk3IEMxOS41NTUsNi40OTcgMjMuMDc4LDkuNzA1IDIzLjA3OCwxMy45OTEgQzIzLjA3OCwxOC40NjMgMjAuMjM5LDIyLjA2MiAxNi4yOTcsMjIuMDYyIEMxNC45NzMsMjIuMDYyIDEzLjcyOCwyMS4zNzkgMTMuMzAyLDIwLjU3MiBDMTMuMzAyLDIwLjU3MiAxMi42NDcsMjMuMDUgMTIuNDg4LDIzLjY1NyBDMTIuMTkzLDI0Ljc4NCAxMS4zOTYsMjYuMTk2IDEwLjg2MywyNy4wNTggQzEyLjA4NiwyNy40MzQgMTMuMzg2LDI3LjYzNyAxNC43MzMsMjcuNjM3IEMyMS45NSwyNy42MzcgMjcuODAxLDIxLjgyOCAyNy44MDEsMTQuNjYyIEMyNy44MDEsNy40OTUgMjEuOTUsMS42ODYgMTQuNzMzLDEuNjg2IiBmaWxsPSIjZTYwMDIzIj48L3BhdGg+PC9nPjwvc3ZnPg==) 3px 50% no-repeat;
  -webkit-font-smoothing: antialiased;
  border-radius: 30px;
  width: auto;
  background-position-x: 9px;
  background-size: 20px 20px;
  text-indent: 34px;
  font-weight: 700;
  padding: 4px 15px 4px 4px;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  box-shadow: inset 0 0 1px #888;
  vertical-align: baseline;
  opacity: 1;
  transition: none;
}

.pin-it-button:after {
  content: 'Save';
  color: #fff;
}

I have tried it, but it doesn’t work I don’t see a Pinterest Button.

I was trying around with that code, but the hover doesn’t work. I need a Pinterest Hover Button on my images. 🙁

js.file:

document.addEventListener("DOMContentLoaded", function() {
    var images = document.querySelectorAll('img:not(.no-pin)'); // Exclude images with the class 'no-pin'

    images.forEach(function(image) {
        // Wrapper für das Bild und den Button erstellen
        var wrapper = document.createElement('div');
        wrapper.className = 'pinterest-pin';
        image.parentNode.insertBefore(wrapper, image);
        wrapper.appendChild(image);

        // Pinterest-Button erstellen
        var button = document.createElement('a');
        button.className = 'pin-it-button';
        button.setAttribute('href', 'https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(window.location.href) + '&media=' + encodeURIComponent(image.src) + '&description=' + encodeURIComponent(image.alt));
        button.setAttribute('data-pin-do', 'buttonPin');
        button.setAttribute('data-pin-config', 'above');

        // PNG-Icon für den Button
        var buttonImage = document.createElement('img');
        buttonImage.src = 'https://assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png'; // Dein PNG-Icon
        buttonImage.alt = 'Pin it';
        button.appendChild(buttonImage);

        wrapper.appendChild(button);
    });
});

and CSS:

/* Grundlegende Stile für den Pinterest-Button */
.pinterest-pin {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Verhindert, dass der Button außerhalb des Bildes angezeigt wird */
}

/* Stile für das Bild im Wrapper */
.pinterest-pin img {
    display: block;
}

/* Stile für den Pinterest-Button */
.pinterest-pin .pin-it-button {
    position: absolute;
    top: 10px; /* Abstand vom oberen Rand */
    left: 10px; /* Abstand vom linken Rand */
    display: none; /* Standardmäßig ausgeblendet */
    z-index: 10;
    background: #E60023; /* Pinterest-Rot als Hintergrundfarbe */
    border-radius: 5px; /* Abgerundete Ecken */
    padding: 10px; /* Innerer Abstand vergrößern */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten hinzufügen */
    display: flex; /* Flexbox verwenden */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    width: 60px; /* Breite des Buttons */
    height: 60px; /* Höhe des Buttons */
}

/* Stile für das PNG-Icon */
.pinterest-pin .pin-it-button img {
    width: 24px; /* Größe des Pinterest-Icons */
    height: 24px; /* Höhe des Icons */
    object-fit: contain; /* Sicherstellen, dass das Icon proportional skaliert wird */
}

/* Hover-Effekt für Desktop */
@media (hover: hover) and (pointer: fine) {
    .pinterest-pin:hover .pin-it-button {
        display: flex; /* Button bei Hover anzeigen */
    }
}

/* Sicherstellen, dass der Button nicht über das Bild hinausgeht */
.pinterest-pin {
    overflow: hidden; /* Verhindert, dass der Button außerhalb des Bildes angezeigt wird */
}

/* Spezifische Anpassungen für kleinere Bildschirme */
@media (max-width: 768px) {
    .pinterest-pin .pin-it-button {
        top: 10px; /* Etwas größeren Abstand für mobile Geräte */
        left: 10px;
        max-width: 50px; /* Kleinere maximale Breite für mobile Geräte */
        max-height: 50px; /* Kleinere maximale Höhe für mobile Geräte */
    }
}

Greetings Kathrin

Yes, it shows, but on my end the button looks different every time.

But from the start. The Pinterest Button should have a hover effect on Desktop but should be permanent on Mobiles.

I have used that javascript:

document.addEventListener("DOMContentLoaded", function() {
    var images = document.querySelectorAll('img:not(.no-pin)'); // Alle Bilder auf der Seite, die nicht die Klasse 'no-pin' haben

    images.forEach(function(image) {
        // Überprüfen, ob der Wrapper bereits existiert
        if (image.parentNode.classList.contains('pinterest-pin-wrapper')) return;

        // Wrapper für das Bild und den Button erstellen
        var wrapper = document.createElement('div');
        wrapper.className = 'pinterest-pin-wrapper'; // Eindeutige Klasse für den Wrapper
        wrapper.style.position = 'relative'; // Sicherstellen, dass der Wrapper relativ positioniert ist
        image.parentNode.insertBefore(wrapper, image);
        wrapper.appendChild(image);

        // Pinterest-Button erstellen
        var button = document.createElement('a');
        button.className = 'custom-pin-it-button'; // Eindeutige Klasse für den Button
        button.setAttribute('href', 'https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(window.location.href) + '&media=' + encodeURIComponent(image.src) + '&description=' + encodeURIComponent(image.alt));
        button.setAttribute('data-pin-do', 'buttonPin');
        button.setAttribute('data-pin-hover', 'true');

        // PNG-Icon für den Button
        var buttonImage = document.createElement('img');
        buttonImage.src = 'https://assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png'; // PNG-Icon
        buttonImage.alt = 'Pin it';
        buttonImage.style.width = 'auto';
        buttonImage.style.height = 'auto';
        buttonImage.style.maxWidth = '60px';
        buttonImage.style.maxHeight = '60px';
        button.appendChild(buttonImage);

        wrapper.appendChild(button);
    });
});

And that CSS:

.pinterest-pin-wrapper {
    position: relative; /* Wrapper relativ positionieren */
    display: inline-block; /* Inline-Block-Element */
}

.custom-pin-it-button {
    position: absolute;
    top: 10px; /* Abstand vom oberen Rand */
    left: 10px; /* Abstand vom linken Rand */
    opacity: 0; /* Button standardmäßig unsichtbar */
    z-index: 10; /* Sicherstellen, dass der Button oben liegt */
    width: 60px; /* Feste Breite */
    height: auto; /* Höhe automatisch anpassen */
    transition: opacity 0.3s ease-in-out; /* Weicher Übergang für die Sichtbarkeit */
}

.pinterest-pin-wrapper:hover .custom-pin-it-button {
    opacity: 1; /* Button anzeigen beim Hover */
}

/* CSS für mobile Geräte: Button immer sichtbar */
@media (max-width: 767px) {
    .custom-pin-it-button {
        opacity: 1 !important; /* Button immer sichtbar auf mobilen Geräten */
    }
}

Now it looks like that after reloading the site:

The Button has lost the hover-effect and it doesn’t appear as an overlay but is situated beside the image:

https://imgur.com/a/mDvDVcH

And sometimes it is beside the image and at the bottom:

https://imgur.com/a/yVepWF7

On Mobile the Button is always after the image and causes CLS because it is loaded at last.

It is not possible to exclude my website-logo and my avatar from the button. The no-pin class is ignored.

Do you have a better solution? There is no plugin for doing that.

Greetings Kathrin

Dear Ying, I have tried several plugins today. They are all not working. I have tried the code from David provided from Genereate Press it doesn’t show anything. Why it is impossible to add such a button?

Images with no-pin are excluded from the JS but I can’t add it to the logo and some pictures in a GeneratePress Box. Can you help me here? And maybe can you help with the Code that David provided that was created by your team?

Greetings Kathrin

Thank you very much, but can you also help me with the code provided by David here: https://generate.support/topic/save-share-url-not-generating-optimally/#post-122285 and here: https://generate.support/topic/tyring-to-figure-out-if-this-is-custom-code-or-a-plugin/

I have tried the code already but it isn’t showing. I don’t know why.

Greetings Kathrin

Thank you very much, I have added the code again and activated everything but I don’t see a pin it button.

Greetings Kathrin