Botón personalizado de Pinterest para URL personalizada (enlace de texto, imagen o ambos)

Question

Traté de encontrar la solución pero no puedo. Necesito una imagen personalizada para el botón de Pinterest (Pin It) y fijar una imagen personalizada por url, pero no una página actual.

he creado un enlace personalizado:

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

en estilo puse la imagen de fondo, pero sólo veo por defecto botón Pin It y no mi botón personalizado

Hay algunas soluciones en las que se pueden establecer personalizada imagen de botón para el botón Pin It pero no puedo cambiar el medio = {ImageURL} en esas soluciones.

La solución popular es

<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> 

Pero no me ayuda. ¿Alguien sabe la solución?

Answer 1

De hecho, la solución popular por Jeremy Mansfield en www.brandaiddesignco.com tiene un gran método para personalizar el botón de Pinterest cualquier forma que desee!

he hecho tres ejemplos, en forma de jsFiddle de, para que pueda ver cómo se hace uso de ese método.

Referencia:jsFiddle Text-Link method
Referencia:jsFiddle Custom Logo method
Referencia:jsFiddle Custom Logo and Image method

Para obtener más información Pinterest, ver mi otra SO Answer.

Answer 2

A riesgo de simplificar demasiado, use su ruta 'http://pinterest.com/pin/create/button/?url=' que ya tiene, configure sus variables y añádalas como lo hace, y simplemente no incluya pinterest javascript. Sin esa js, no encontrará el enlace y lo reemplazará con su propio botón de pinterest. Simplemente personalice su enlace con una imagen dentro de él (o establezca una imagen de fondo o lo que sea) y atornille el pinterest js. Establezca el objetivo para abrir en una nueva ventana.

Answer 3

Adición de un espacio en blanco codificada antes de que el último fragmento de la URL impedirá JS de Pinterest de "secuestro" el enlace:

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

Actualización:

Parece que mi solución anterior no lo hace trabajar más Aquí es otra:

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

Answer 4

enlace personalizado/botón tiene el siguiente aspecto:

<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> 

Nota: No creo que los atributos de datos necesitan ser codificados (como lo hice dataimagen a) pero no parece lastimarlo.

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; 
}); 

Answer 5

Después de un poco de ensayo y error, a continuación es lo que funcionó para mí. Esta respuesta es una combinación del hilo de respuesta de @ rharvey y otra publicación de desbordamiento de pila. Esta solución abre una ventana emergente para compartir contenido a través de pinterest.

Nota: para evitar que aparezcan 2 ventanas, debe establecer un objetivo. A continuación se muestra la solución completa:

<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> 

Answer 6

Funciona a la perfección. La secuencia de comandos

<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> 

de llamadas con

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

Answer 7

Aquí es lo que funcionó para mí:

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

El atributo de datos pines personalizado es lo que tome de Pinterest documentation.

Espero que esto ayude.