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

share link generator

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.

Creé 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 el estilo, establecí la imagen de fondo pero solo veo el botón Pin It predeterminado y no mi botón personalizado

Hay algunas soluciones en las que puede establecer una imagen de botón personalizada 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

A riesgo de simplificar demasiado las cosas, 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 ningún 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 2

Agregar un espacio en blanco codificado antes del último fragmento de la URL evitará que JS de Pinterest "secune" el enlace:

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

Actualizar:

Parece que mi solución anterior ya no funciona. Aquí hay otro:

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

Answer 3

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

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

Referencia: método jsFiddle Text-Link
Referencia: jsFiddle Custom Logo method
Referencia: jsFiddle Custom Logo y método de imagen

Para obtener más información de Pinterest , consulte mi otra respuesta SO .

Answer 4

Después de un poco de prueba y error, a continuación está 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. Debajo está la solución completa:

 <a href="http://.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 5

El enlace / botón personalizado se ve así:

<a href="http://.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 los datos deban codificarse (como lo hice con la imagen de datos), pero parece que no me duele.

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 6

Esto 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 data-pin-custom es lo que recogí de la documentación de Pinterest .

Espero que esto ayude.

Answer 7

Funciona para mí perfectamente Tu guion

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

Llámalo con

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