Crear un botón dinámico de Pinterest?

¿Hay alguna manera de crear un botón dinámico de Pinterest? Intento agregar el soporte de Pinterest a un sitio donde el contenido principal es dinámico, por lo que solo tendría un solo botón Pin It en el origen de la página que incluyera el contenido actual.Crear un botón dinámico de Pinterest?

No puedo encontrar una manera de hacerlo con el botón Pin It precompilado, porque requiere que especifique una URL codificada con anticipación.

Sin embargo, también hay un marcador Pin It que logra el efecto que quiero, pero que requiere que el usuario lo agregue manualmente a la barra de marcadores.

¿Hay alguna manera de que yo pueda (a) modificar el botón Pin It, o (b) integrar de alguna manera el bookmarklet en mi página de modo que quede anotado el contenido de la página actual?

Fuente

2012-06-20 daGUY

Para cualquiera que esté interesado, aquí es lo que hice:

HTML:

<a href="#" id="pinit">Pin It</a>

JS:

$(document).ready(function(){ 
    $("#pinit").click(function(){ 
     $("#pinmarklet").remove(); 
     var e = document.createElement('script'); 
     e.setAttribute('type','text/javascript'); 
     e.setAttribute('charset','UTF-8'); 
     e.setAttribute('id','pinmarklet'); 
     e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e); 
    }); 
});

Normalmente, al hacer clic en el bookmarklet Pin It en la barra de marcadores del navegador , inserta dinámicamente una secuencia de comandos (pinmarklet.js) que ejecuta automáticamente una función que abre la interfaz de usuario de Pinterest para elegir las imágenes que desea fijar.

Modifiqué esto para que la secuencia de comandos se inserta cuando se hace clic en un enlace (#pinit). También agregué un id a la secuencia de comandos (#pinmarklet) para poder eliminarlo ($("#pinmarklet").remove();) y volver a agregarlo cada vez que se hace clic en el enlace; de lo contrario, los enlaces duplicados al mismo script se siguen acumulando si continúa haciendo clic en el enlace.

De todos modos, el efecto final es que estás haciendo lo mismo que el bookmarklet, solo dentro de la página. Por lo tanto, funciona de la misma manera y extrae lo que sea el contenido de la página actual, lo que significa que puede cambiar otro contenido dinámicamente y será recogido por el mismo enlace "Pin It".

Fuente

2012-06-21 13:50:47 daGUY

¡Muchas gracias por compartir! : D – Jess

Esto es genial. Delorian hasta '12 para todavía la mejor solución, de alguna manera. – bplittle

He construido un improved Pinterest button that supports an HTML5-valid syntax on GitHub.

La forma en que usaría esta solución depende de si su sitio está poblando dinámicamente la página en el lado del servidor (con PHP u otro lenguaje de fondo) o del lado del cliente mediante los métodos JavaScript y AJAX.

Por el lado del servidor, deberá generar el HTML 5 <div> con sus atributos data-* rellenado en la plantilla y luego cargar el archivo pinterest-plus-html5.min.js con una etiqueta <script> antes del cierre de la <body>.

Para el lado del cliente, deberá cargar el archivo pinterest-plus-html5.min.js, ya sea con una etiqueta <script> en el <head> o mediante carga asincrónica, tal como se describe en la documentación. A continuación, generará HTML5 <div> con JavaScript, inserte o reemplace dinámicamente la etiqueta del botón de Pinterest en la página y luego llame al PinterestPlus.pinit() para convertir el <div> en un botón de Pinterest .

Espero que esto ayude!

Fuente

2012-06-26 16:32:20

Una solución simple del lado del servidor es probablemente mejor que la del lado del cliente. The code is here (PHP, WordPress o ASP)

Fuente

2013-01-17 11:57:28 user1987005

añadir algo de código con su respuesta. Entonces el usuario puede referirlo. –

Lo que los pines del botón de pintrest se controlan con los parámetros en el href del botón.

Fuente

2013-05-17 04:29:06 chuckles

Dynamic Link para Pinterest

A continuación código generará botón de Pinterest dinámico para diferentes páginas.

<a href="http://pinterest.com/pin/create/button/?url=http://www.printe-z.com/booked-forms.html&amp;media=http://www.printe-z.com/image/cache/data/newImages/business_forms_Booked-200x120.jpg&amp;description=description will come here" class="pin-it-button" count-layout="none"> 
<img src="http://assets.pinterest.com/images/PinExt.png" data-cfsrc="//assets.pinterest.com/images/PinExt.png" title="Pin It" border="0"> 
</a>

Fuente

2013-08-30 09:26:42 Cnab

Pinterest proporciona una función de "construir" para la construcción de botones dinámicos. Eso significa que puede generar sus anclajes de Pinterest dinámicamente & use esta función para convertirla en un botón Pinterest, de la misma manera que pinit.js lo hace cuando se carga.

Aquí se explica cómo se puede especificar el nombre de la función: http://porizi.wordpress.com/2013/11/07/dynamic-pinterest-button/

Fuente

2013-11-11 12:27:29 phidias

Tengo una página con una galería de pantalla completa, con sólo una botón de Pinterest en la parte inferior de la página, terminé en esta página buscando una solución. Sin éxito que se me ocurrió esto:

var imgurl = player.children(".gallery-image").eq(next).css("background-image").match(/\((.+)\)/)[1]; 
$(".pintrest-container > a").attr("data-pin-href", "//www.pinterest.com/pin/create/button/?url=http://mywebsite.com/&media=" + imgurl + "&description=My Website");

La expresión regular /$(.+)$/ es muy útil para analizar la URL de la imagen en el atributo de fondo, debido a que su formato es url('image.jpg'), por lo que la expresión regular elimina la url('') y da sólo el camino.

Entonces sólo establece el atributo data-pin-href con mi nueva imagen, funciona muy bien!

Fuente

2014-09-11 15:43:44

Crear un botón dinámico de Pinterest?

Respuesta

Cuestiones relacionadas