web-dev-qa-db-fra.com

Bouton Pinterest personnalisé pour URL personnalisée (lien texte, image ou les deux)

J'ai essayé de trouver la solution mais je n'y arrive pas. J'ai besoin d'une image personnalisée pour le bouton Pinterest (Pin It) et d'épingler une image personnalisée par url mais pas une page actuelle.

J'ai créé un lien personnalisé:

<a href="http://pinterest.com/pin/create/button/?url=http://inspired-ui.com&media={ImageURL}&description=DescriptionText" class="pinitbutton">Pin It</a>

dans le style, je mets l'image d'arrière-plan, mais je ne vois que le bouton Pin It par défaut et non mon bouton personnalisé

Il existe certaines solutions où vous pouvez définir une image de bouton personnalisée pour le bouton Pin It, mais je ne peux pas modifier le média = {ImageURL} dans ces solutions.

La solution populaire est

<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='http://www.brandaiddesignco.com/blog/PinIt.png'/></a>

Mais ça ne m'aide pas. Quelqu'un connaît-il la solution?

htmlcsspinterest
33
Sergey

En effet, la solution populaire de Jeremy Mansfield sur www.brandaiddesignco.com a une excellente méthode pour personnaliser le bouton Pinterest comme vous le souhaitez. veux !

J'ai fait trois exemples , sous la forme de jsFiddle , donc vous pouvez voir comment cela se fait en utilisant cette méthode.

Référence: Méthode jsFiddle Text-Link
Référence: Méthode du logo personnalisé jsFiddle
Référence: Logo personnalisé jsFiddle et méthode d'image

Pour plus Infos Pinterest , voir mes autres SO Réponse .

22
arttronics

L'ajout d'un espace codé avant le dernier fragment de l'URL empêchera le JS de Pinterest de "détourner" le lien:

//pinterest.com/pin/create/%20button?url=

Mise à jour:

Il semble que ma solution précédente ne fonctionne plus. En voici un autre:

//pinterest.com/pin/create%2Fbutton/?url=
20
jzfgo

Au risque de trop simplifier les choses, utilisez votre 'http://pinterest.com/pin/create/button/?url=' chemin d'accès que vous avez déjà, configurez vos variables et ajoutez-les comme vous le faites, et n'incluez simplement aucun javascript pinterest. Sans cela, js ne trouvera pas le lien et ne le remplacera pas par leur propre bouton pinterest. Personnalisez simplement votre lien avec une image à l'intérieur (ou définissez une image d'arrière-plan ou autre) et vissez le j Pinterest. Définissez la cible à ouvrir dans une nouvelle fenêtre.

17
courtsimas

Le lien/bouton personnalisé ressemble à ceci:

<a href="http://stackoverflow.com/questions/11312923/custom-pinterest-button-for-custom-url-text-link-image-or-both" data-image="http%3A%2F%2Fcdn.sstatic.net%2Fstackexchange%2Fimg%2Flogos%2Fso%2Fso-logo.png" data-desc="Custom Pinterest button for custom URL (Text-Link, Image, or Both)" class="btnPinIt">
    Custom Pin it image or text here!
</a>

Remarque: Je ne pense pas que les attributs de données doivent être encodés (comme je l'ai fait pour data-image) mais cela ne semble pas le blesser.

JQuery:

$('.btnPinIt').click(function() {
    var url = $(this).attr('href');
    var media = $(this).attr('data-image');
    var desc = $(this).attr('data-desc');
    window.open("//www.pinterest.com/pin/create/button/"+
    "?url="+url+
    "&media="+media+
    "&description="+desc,"_blank");
    return false;
});
14
rharvey

Voici ce qui a fonctionné pour moi :

<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonPin" data-pin-custom="true"><img src="../img/custompinint.png" /></a>

L'attribut data-pin-custom est ce que j'ai choisi de documentation Pinterest .

J'espère que cela t'aides.

5
Mahesh

Après quelques essais et erreurs, voici ce qui a fonctionné pour moi. Cette réponse est une combinaison du thread de réponse de @ rharvey et d'un autre message de débordement de pile. Cette solution ouvre une fenêtre pop-up pour partager du contenu via pinterest.

Remarque: Afin d'éviter que 2 fenêtres n'apparaissent, vous devez définir un objectif. Voici la solution complète:

 <a href="http://stackoverflow.com/questions/11312923/custom-pinterest-button-for-custom-url-text-link-image-or-both" data-image="http%3A%2F%2Fcdn.sstatic.net%2Fstackexchange%2Fimg%2Flogos%2Fso%2Fso-logo.png" data-desc="Custom Pinterest button for custom URL (Text-Link, Image, or Both)" class="btnPinIt" target= "pinIt">
    Custom Pin it image or text here!
</a> 

<script>
$('.btnPinIt').click(function() {
    var url = $(this).attr('href');
    var media = $(this).attr('data-image');
    var desc = $(this).attr('data-desc');
    window.open("//www.pinterest.com/pin/create/button/"+
    "?url="+url+
    "&media="+media+
    "&description="+desc,"pinIt","toolbar=no, scrollbars=no, resizable=no, top=0, right=0, width=750, height=320");
    return false;
});
</script>
2
Michael Smith

Fonctionne parfaitement pour moi. Votre script

 <script>
    function pinIt()
    {
      var e = document.createElement('script');
      e.setAttribute('type','text/javascript');
      e.setAttribute('charset','UTF-8');
      e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
      document.body.appendChild(e);
    }
    </script>

Appelez-le avec

<a href="javascript:pinIt();">Pin</a>
1
Mishka Alt