Partagez des images avec un appel à l'action Pinterest

Cet article montre comment ajouter un appel à l'action Pinterest aux images, apparaissant uniquement sur le plan de survol, pour stimuler l'engagement des médias sociaux. Il met l'accent sur une conception propre et conviviale et évite les dépendances inutiles.

Avantages clés:

• augmenter les partages Pinterest et la visibilité du contenu.
• Implémentez un bouton Pinterest simple et activé par volant à l'aide de HTML et CSS.
• rationaliser le code en utilisant Vanilla JavaScript au lieu de jQuery (sauf si vous faites déjà partie de votre projet).

Pourquoi les images partageables comptent:

Le contenu engageant de haute qualité est crucial. Les boutons de partage social améliorent cela, permettant aux utilisateurs de partager facilement des éléments individuels (comme les images) sur des plates-formes comme Pinterest. Pinterest, en particulier, bénéficie d'un contenu visuellement attrayant.

Création d'images conviviales Pinterest:

Une URL de la broche Pinterest se compose:

1. URL de base: https://www.pinterest.com/pin/create/button/
2. url: URL de votre page (encodée par URL).
3. media: URL de l'image (encodé par URL).
4. description: texte descriptif (encodé par URL, idéalement sous 200 caractères).

Bien que JavaScript de Pinterest offre des fonctionnalités supplémentaires, cette approche utilise un code minimal pour la simplicité.

La méthode du codé dur (moins efficace):

Cette méthode consiste à ajouter manuellement du HTML pour chaque image:

<code class="language-html"><a href="https://www.php.cn/link/af3b0930d888e15a07a36b9987b70858" target="_blank" class="pinterest-anchor pinterest-hidden">
    <div class="pinterest-logo"></div>
</a>
<img src="" data-pin="pinIt" alt=""></code>

CSS stylise le bouton (pinterest-anchor, pinterest-hidden, pinterest-logo), le positionnant et le contrôle de sa visibilité sur le plan. Le logo Pinterest est intégré comme une image codée de base64 dans le CSS.

La méthode automatisée (plus efficace) (avec jQuery):

Ce code jQuery génère dynamiquement le lien Pinterest pour chaque image avec l'attribut data-pin="pinIt":

<code class="language-javascript">$("img[data-pin='pinIt']").each(function() {
    $(this).before('<a href="https://www.php.cn/link/c84f1f1c3914a66236542d1166b01780'%20+%20encodeURIComponent(%24(location).attr(" encodeuricomponent target="_blank"><div class="pinterest-logo"></div></a>');
    $(this).hover(function() {
        $(this).prev().css("display", "block");
    }, function() {
        $(this).prev().css("display", "none");
    });
});</code>

La méthode automatisée (plus efficace) (avec vanille javascript):

Cet équivalent JavaScript de vanille obtient le même résultat sans jQuery:

<code class="language-javascript">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="https://www.php.cn/link/c84f1f1c3914a66236542d1166b01780'%20+%20encodeURIComponent(window.location.href)%20+%20'&media='%20+%20encodeURIComponent(el.src)%20+%20'&description='%20+%20encodeURIComponent(el.alt)%20+%20'" target="_blank"><div class="pinterest-logo"></div></a>');
        el.onmouseover = function(){ this.previousSibling.style.display='block'; }
        el.onmouseout = function(){ this.previousSibling.style.display='none'; }
    }
});</code>

Considérations supplémentaires:

Bien que cette approche soit propre et discrète, l'ouverture du partage dans une nouvelle fenêtre pourrait perturber le flux de l'utilisateur. Une alternative pop-up pourrait être considérée.

Questions fréquemment posées (FAQ): (Celles-ci sont résumées pour la concision, en maintenant la signification d'origine.)

• Ajout d'un bouton «épingle»: Utilisez le code de bouton Enregistrer Pinterest à partir de leur page de développeur.
• Personnalisation du bouton: Personnaliser la taille, la forme et la couleur de la page du développeur de Pinterest avant d'obtenir le code.
• Call à l'action sur les broches: Inclure un appel à l'action dans la description de la broche.
• Performances de suivi: Utilisez Pinterest Analytics.
• Rendre des images plus pinnables: Utilisez des images pertinentes de haute qualité avec du texte alt descriptif.
• Optimisation de la recherche Pinterest: Utilisez des mots clés et des hashtags pertinents dans les descriptions et les titres.
• Encourager la broche: Ajoutez un bouton Effacer «épingle» et des appels à l'action.
• Ajout d'un bouton Pinterest Partage: Utilisez un plugin de boutons de médias sociaux.
• Le trafic de conduite avec Pinterest: Créez des épingles engageantes de haute qualité avec des appels à l'action.
• Marketing Pinterest: Créez un compte commercial, optimisez votre profil et utilisez Pinterest Ads.

Cette sortie révisée maintient le sens d'origine tout en améliorant la clarté et le flux, adaptés à une présentation plus professionnelle. Les URL d'image sont conservées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!