Teilen Sie Bilder mit einem Pinterest-Aufruf zu Action

Dieser Artikel zeigt, wie ein Pinterest-Aufruf zu den Bildern hinzugefügt wird, die nur auf Schwebungen erscheinen, um das Engagement der sozialen Medien zu steigern. Es betont ein sauberes, benutzerfreundliches Design und vermeidet unnötige Abhängigkeiten.

Schlüsselvorteile:

• Erhöhen Sie die Pinterest -Aktien und die Sichtbarkeit von Inhalten.
• Implementieren Sie eine einfache, schwebendaktivierte Pinterest-Taste mit HTML und CSS.
• Streamline -Code mit Vanilla javascript anstelle von jQuery (es sei denn, bereits Teil Ihres Projekts).

Warum gemeinsam genutzbare Bilder von Bedeutung sind:

hochwertige, ansprechende Inhalte ist entscheidend. Social Sharing -Schaltflächen verbessern dies und ermöglichen es Benutzern, einzelne Elemente (wie Bilder) auf Plattformen wie Pinterest problemlos zu teilen. Insbesondere Pinterest profitiert von visuell ansprechenden Inhalten.

Erstellen von pinterest-freundlichen Bildern:

Eine Pinterest -Pin -URL besteht aus:

1. Basis -URL: https://www.pinterest.com/pin/create/button/
2. url: Ihre Seiten-URL (URL-codiert).
3. media: Bild-URL (URL-codiert).
4. description: Beschreibender Text (URL-codiert, idealerweise unter 200 Zeichen).

Während JavaScript von Pinterest zusätzliche Funktionen bietet, verwendet dieser Ansatz einen minimalen Code für den Einfachheit halber.

Die hartcodierte (weniger effiziente) Methode:

Diese Methode beinhaltet das manuelle Hinzufügen von HTML für jedes Bild:

<a href="//m.sbmmt.com/link/af3b0930d888e15a07a36b9987b70858" target="_blank" class="pinterest-anchor pinterest-hidden">
    <div class="pinterest-logo"></div>
</a>
<img src="" data-pin="pinIt" alt="">

CSS stilft die Taste (pinterest-anchor, pinterest-hidden, pinterest-logo), positionieren Sie sie und kontrollieren der Sichtbarkeit auf Schwebeplätzen. Das Pinterest -Logo ist als Basis64 -codiertes Bild innerhalb des CSS eingebettet.

Die automatisierte (effizientere) Methode (mit JQuery):

Dieser jQuery -Code generiert dynamisch den Pinterest -Link für jedes Bild mit dem Attribut data-pin="pinIt":

$("img[data-pin='pinIt']").each(function() {
    $(this).before('<a href="//m.sbmmt.com/link/c84f1f1c3914a66236542d1166b01780' + encodeURIComponent($(location).attr("href")) + '&media=' + encodeURIComponent($(this).attr("src")) + '&description=' + encodeURIComponent($(this).attr("alt")) + '" target="_blank"><div class="pinterest-logo"></div></a>');
    $(this).hover(function() {
        $(this).prev().css("display", "block");
    }, function() {
        $(this).prev().css("display", "none");
    });
});

Die automatisierte (effizientere) Methode (mit Vanille -JavaScript):

Dieses Vanille -JavaScript -Äquivalent erzielt das gleiche Ergebnis ohne jQuery:

var pinables = document.querySelectorAll('img');

Array.prototype.forEach.call(pinables, function(el, i){
    data = el.dataset;
    if (data.pin=='pinIt') {
        el.insertAdjacentHTML('beforebegin', '<a href="//m.sbmmt.com/link/c84f1f1c3914a66236542d1166b01780' + encodeURIComponent(window.location.href) + '&media=' + encodeURIComponent(el.src) + '&description=' + encodeURIComponent(el.alt) + '" target="_blank"><div class="pinterest-logo"></div></a>');
        el.onmouseover = function(){ this.previousSibling.style.display='block'; }
        el.onmouseout = function(){ this.previousSibling.style.display='none'; }
    }
});

Weitere Überlegungen:

Während dieser Ansatz sauber und unauffällig ist, kann der Anteil in einem neuen Fenster den Benutzerfluss stören. Eine Popup-Alternative könnte berücksichtigt werden.

häufig gestellte Fragen (FAQs): (Diese sind für die Kürze zusammengefasst, wobei die ursprüngliche Bedeutung aufrechterhalten wird.)

• Hinzufügen einer Schaltfläche "Pin it": Verwenden Sie Pinterests Speichern -Schaltfläche von ihrer Entwicklerseite.
• Anpassen der Schaltfläche: Anpassen von Größe, Form und Farbe auf der Entwicklerseite von Pinterest, bevor Sie den Code erhalten.
• Aufruf zu Pins: In der Beschreibung der PIN einrufen.
• Tracking -Leistung: Verwenden Sie Pinterest Analytics.
• Bilder finnbar machen: Verwenden Sie hochwertige, relevante Bilder mit beschreibendem Alt-Text.
• Pinterest -Suchoptimierung: Verwenden Sie relevante Schlüsselwörter und Hashtags in Beschreibungen und Titeln.
• Ermutigend ein Pinning: Fügen Sie eine klare 'Pin It'-Taste und Anrufe hinzu.
• Hinzufügen einer Pinterest -Freigabe -Taste: Verwenden Sie ein Social -Media -Schaltflächen -Plugin.
• Fahrverkehr mit Pinterest: Erstellen Sie hochwertige, ansprechende Stifte mit Anforderungen.
• Pinterest Marketing: Erstellen Sie ein Geschäftskonto, optimieren Sie Ihr Profil und verwenden Sie Pinterest -Anzeigen.

Das obige ist der detaillierte Inhalt vonTeilen Sie Bilder mit einem Pinterest-Aufruf zu Action. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!