button - icono - Enlace para "fijarlo" en Pinterest sin generar un botón

pinterest en español

Question

Tengo una página con decenas o cientos de publicaciones, cada una con botones sociales. Simplemente no puedo generar todos los botones para cada url: es demasiado lento (facebook, g +, twitter, pinterest ... para cientos de enlaces). Entonces, en lugar de que se genere el botón compartir de Facebook sobre la marcha, uso un simple img que apunta a

https://www.facebook.com/sharer.php?u=${url_of_current_post}&t=

Cuando el usuario hace clic en él, se abre una ventana emergente con contenido generado por Facebook.

¿Cómo puedo hacerlo para Pinterest? Solo encuentro el código para generar el botón, pero me gustaría evitar js si es posible. ¿Hay algo como lo siguiente?

http://pinterest.com/pinthis?url=${url_of_current_post}

Por favor, no trates de hacerme usar el botón js, gracias.

Answer 1

El código del botón estándar de Pinterest (que puede generar aquí ) es una etiqueta <a> incluye un <img> del botón de Pinterest.

Si no incluye el script pinit.js en su página, esta <a> etiqueta funcionará "tal como está". Puede mejorar la experiencia al registrar su propio manejador de clics en estas etiquetas, que abre una nueva ventana con las dimensiones adecuadas, o al menos agrega target="_blank" a la etiqueta para que haga clic en abrir en una nueva ventana.

La sintaxis de la etiqueta se vería así:

<a href="http://pinterest.com/pin/create/button/?url={URI-encoded URL of the page to pin}&media={URI-encoded URL of the image to pin}&description={optional URI-encoded description}" class="pin-it-button" count-layout="horizontal">
    <img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>

Si el uso de las versiones de JavaScript de los botones de uso compartido está arruinando los tiempos de carga de la página, puede mejorar su sitio utilizando métodos de carga asincrónicos. Para ver un ejemplo de cómo hacer esto con el botón de Pinterest, consulte mi proyecto de botón de GitHub Pinterest con una sintaxis HTML5 mejorada .

Answer 2

Encontré un código para wordpress:

 <script type="text/javascript">

    function insert_pinterest($content) {
        global $post;
        $posturl = urlencode(get_permalink()); //Get the post URL
        $pinspan = ''<span class="pinterest-button">'';
     $pinurl = '''';
     $pinend = ''</span>'';
        $pattern = ''//i'';
        $replacement = $pinspan.$pinurl.''$2.$3''.$pindescription.$pinfinish.''''.$pinend;
        $content = preg_replace( $pattern, $replacement, $content );
        //Fix the link problem
        $newpattern = ''/<span class="pinterest-button"><//a><//span><//a>/i'';
     $replacement = '''';
     $content = preg_replace( $newpattern, $replacement, $content );
     return $content;
    }
    add_filter( ''the_content'', ''insert_pinterest'' );

    </script>

Luego pones lo siguiente en tu PHP:

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ''full'' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">Pin It</a>

Answer 3

Entonces, ¿quieres el código para el botón pin it sin instalar el botón? Si es así, simplemente pegue este código en el lugar de la url de la página desde la que está anclando. Debería funcionar como un botón pin it sin el botón.

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

Answer 4

Para tales casos, encontré muy útil el Share Link Generator , me ayuda a crear Facebook, Google+, Twitter, Pinterest, LinkedIn compartir botones.

Answer 5

Puede crear un enlace personalizado como se describe here usando una pequeña secuencia de comandos jQuery

$(''.linkPinIt'').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","top=0,right=0,width=750,height=320");
    return false; 
});

esto funcionará para todos los enlaces con la clase linkPinIt que tienen la imagen y la descripción almacenadas en los atributos de data-image HTML 5 data-image y data-desc

<a href="https%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F" 
   data-image="https%3A%2F%2Fc4.staticflickr.com%2F8%2F7027%2F6851755809_df5b2051c9_b.jpg" 
   data-desc="Title for Pinterest Photo" class="linkPinIt">
    Pin it!
</a> 

ver este ejemplo jfiddle

Answer 6

Si desea crear un hipervínculo simple en lugar del botón pin it,

Cambia esto:

http://pinterest.com/pin/create/button/?url=

A esto:

http://pinterest.com/pin/create/link/?url=

Entonces, una URL completa simplemente podría verse así:

<a href="//pinterest.com/pin/create/link/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">Pin it</a>

Answer 7

Tenía la misma pregunta. ¡Esto funciona muy bien en Wordpress!

<a href="//pinterest.com/pin/create/link/?url=<?php the_permalink();?>&amp;description=<?php the_title();?>">Pin this</a>