Para el que no lo conozca, el sitio funciona mediante una especie de tablones en los que cuelgas todo lo que gustes. A estos tablones se les asigna una categoría y eso es precisamente lo que hace muy fácil y cómoda la navegación siguiendo un tema concreto.
El contenido suele venir de terceras partes y mediante el Pin vas colocando los recortes en tus tablones. El resto de usuarios podrán promocionarlo con sus Like o incluso replicándolo (Repin) en sus propios tablones al modo de Tumblr. El texto que se puede incorporar es breve y por tanto, lo que predomina son las imágenes, lo que lo hace bastante sencillo y muy atractivo a la vista.
En esta infografía en castellano que encontré en Clases de Periodismo, podéis ver las principales características de Pinterest.
Puedes hacer Pin desde el botón Add del sitio o para más comodidad, instalar un plugin en tu navegador que encontrarás en su página de gadgets. En el anterior enlace también podréis encontrar los típicos botones para invitar a que te sigan en la red o los de compartir contenido. Y sobre estos últimos va esta entrada.
Hay un par de códigos que se pueden incluir. El primero (Básico) sólo permite un botón por página, ya que captura la URL de la misma. Esta circunstancia lo convierte en poco práctico cuando se quiere mostrar en todos y cada uno de los posts de una página de inicio, por ejemplo.
<a href="http://pinterest.com/pin/create/button/?url=URL_ENVIADA&media=URL_IMAGEN&description=RESUMEN_TEXTO" class="pin-it-button" count-layout="horizontal">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
Para Blogger, el código tendría que ser de la siguiente manera para que cargara automáticamente los datos a enviar. Para ello aprovechamos algunas variables DATA.
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet'>Pin It</a>
<script type='text/javascript' src='http://assets.pinterest.com/js/pinit.js'></script>
<script type='text/javascript' src='http://assets.pinterest.com/js/pinit.js'></script>
La segunda opción, la avanzada, nos facilita dos trozos. Uno sirve para la carga asíncrona del script y hay que insertarlo lo más cerca posible del cierre del body. Antes de él, claro. La carga asíncrona nos sirve para que los elementos principales del blog no demoren por culpa del script:
<!-- Pinterest asíncrono -->
<script type='text/javascript'>
//<![CDATA[
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
if (window.location.protocol == "https:")
s.src = "https://assets.pinterest.com/js/pinit.js";
else
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
if (window.location.protocol == "https:")
s.src = "https://assets.pinterest.com/js/pinit.js";
else
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
//]]>
</script>
Luego hay que colocar el segundo trozo allí dónde queremos que aparezca el botón y que normalmente será al pie de cada entrada. Es igual que el básico que hemos visto antes pero sin la última línea que es la llamada al script y que en este segundo caso ya hemos incluido de manera asíncrona. Igual que hemos hecho antes, los datos variables los podemos sustituir por variables DATA en Blogger.
<!-- Customize and include for EACH button in the page -->
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet'>Pin It</a>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet'>Pin It</a>
Sin embargo, se conoce que todo esto está poco pulido todavía y es bastante común que la imagen del botón no aparezca. En su lugar aparece el texto del enlace: "Pin It".
Para solucionar ese inconveniente podemos meter nosotros una imagen con un botón y santas pascuas y alegrías:
<!-- Customize and include for EACH button in the page -->
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEPLGydLPLYU5jj7jRRPYDDsh54AGdXF0-fpgGdfUGO54T7Tb2S64rCYSXlb414loIdc39mtouyoxB32Ap9VgUcrhvlqor00m56kbT-bDb3vDhLb2fs_2TQ9n04UpE_mzhtI_Tb-hVHu0/s1600/OK+pin+it.gif' /></a>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEPLGydLPLYU5jj7jRRPYDDsh54AGdXF0-fpgGdfUGO54T7Tb2S64rCYSXlb414loIdc39mtouyoxB32Ap9VgUcrhvlqor00m56kbT-bDb3vDhLb2fs_2TQ9n04UpE_mzhtI_Tb-hVHu0/s1600/OK+pin+it.gif' /></a>
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Es muy interesante Oloman!
ResponderEliminarSaludos desde Colombia!
Saludos Ricardo
EliminarHola querido amigo, de entrada muy bueno, cambiando de tema quería echar un vistazo a este sitio lleno de secuencias de comandos http://www.phpkobo.com
ResponderEliminarDejo el enlace por si a alguien le interesa pero eso de que utilice PHP y SQL es algo que limita su uso en Blogger. Gracias no obstante.
EliminarSería interesante saber, que audiencia es la que visita Pinterest, ya que es un sitio que no ofrece soporte a otros idiomas excepto por el inglés. De ahí se deduciría que calidad de visitas te podría generar, claro que el resultado que pueda medirse directamente de las estadísticas cuando usas el servicio, sería contundente.
ResponderEliminarLo digo porque, si en su mayoría es visitada por personas que sólo hablan inglés, podría ser más difícil capturar una audiencia desde ahí. Eso pienso, ¿tu qué piensas al respecto?
Bueno, de cualquier modo, no está de más probar, y ver que resultados te puede dar, sobre todo para sitios o blogs que hablen de recetas de cocina, moda, maquillaje, decoración de todos tipos, eventos especiales, y temas por el estilo, ya que son los temas más populares, si observamos el número de repins y comentarios por cada pin. Si vemos la categoría de tecnología por ejemplo, muy rara vez nos encontraremos con que algún pin tuvo más de 20 repins, o más de dos comentarios...
Lo percibo, como un sitio muy fashion, donde las expresiones comunes serían: ¡oh, mira qué bonito vestido para cóctel!, ¡esto se ve riquísimo...!, ¡qué cool lucen esas uñas pintadas así!, en fin... ¿cuál es tu percepción?
Karla Ciertamente no está hecho para el usuario hispano parlante, y con preferencias por los temas fashionistas. También he notado que la edad de los usuarios va en un rango bien joven. Muy visual. Seguiremos experimentando.
EliminarYo estoy en esa red desde hace apenas una semana, pero es que además no creo que tenga mucho futuro en ella precisamente por lo del predominio de la imagen. Aquí hay mucho texto y poca foto. Me gusta y tal, pero personalmente no creo que me sirva mucho de promoción.
EliminarDe todas formas, por lo que he observado y leído la GRAN mayoría de sus usuarios son anglo parlantes y curiosamente, féminas. Los temas más populares son recetas y moda y aunque suene a tópico, esa puede ser la razón.
Posiblemente, con el tiempo la gente encontrará otras utilidades o maneras de usar la red, de igual manera que sucedió por ejemplo con Twitter. Supongo que recordais que al principio era casi un simple SMS con el que contabas tu vida al personal: "Esperando el autobús", "Voy a ver la peli tal", etc.
Es difícil adivinar qué va a tener éxito y que no, pero en este caso es indudable que este sitio está pegando fuerte. Ya veremos si se desinfla como a mi parecer está ocurriendo con G+.
Amigo OloBlogger, el botón no es clickeable.
ResponderEliminarLo he puesto de varias formas en mi blog y no se puede hacer clic sobre él. Sería bueno que nos ayudaras en eso. Me gusta Pinterest y aquí te dejo mi página ahí. http://pinterest.com/bancodeimagenes/ Saludos.
Coincido con el comentario anterior. A mí tampoco me funciona. Al final lo he hecho trabajar con otro código, porque éste no me funcionó. Me abre una ventana con el thumbnail y el snippet, pero al confirmar pulsando el botón "Pin it" me abre la misma ventana sin imagen ni texto, y sin haber hecho el pin.
ResponderEliminarLo he dejado como comentarios en la plantilla, por si quisieras verlo, simplemente busca "pinterest".
Jose Luis y Felipe. Había una errata tipográfica en la opción básica que ya he arreglado. Supongo que usasteis esa porque en el blog de Felipe sólo veo el título del comentario (asíncrona), pero sin contenido.
ResponderEliminarYo tengo la avanzada y podéis comprobar que funciona, pero de todas formas, la opción que tenéis ahora es mejor si no queréis forzar una imagen concreta, que es lo que se hace con este código al usar la miniatura Blogger.
Pues a mí sigue sin funcionarme. Me abre la ventana emergente con el thumbnail y el snippet, bien, pero al darle al botón no hace el pin. Debo estar cometiendo algún error tonto.
EliminarDe todas forma, lo arreglé con una chapuza. Lo bueno de este botón es que muestra el número de pins, pero no me convencía eso de que no deje escoger la imagen, y coja siempre el thumbnail (que no siempre es la mejor del post, y además no tiene buena resolución). La solución del enlace arrastrable que ofrecen puede ponerse como un hipervínculo, pero no tiene botón ni muestra el número de pins...
Por tanto, estuve dándole vueltas y acabé con ésto (sustituyo '<' y '>' para poder copiar el código):
[a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet'/]
[div style='margin: -23px 0px 0px 0px;']
[a href='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)})());'][img height='20px' src='http://dl.dropbox.com/u/57549161/Imagenes/pin%20it.gif' width='43px'/][/a]
[/div]
Esta opción muestra el botón con el número de pins, pero le coloca por encima otra imagen (el mismo botón) con el script que permite escoger imágenes. Probablemente lo arreglen pronto, pero mientras tanto me parece una buena opción.
Espero que no te importe que ponga esto como comentario... Un saludo!
Siempre lo digo, pero para que quede claro, lo repito. No sólo no me importa sino que estoy deseando que comentéis cosas que puedan servir para todos, incluido un servidor.
EliminarTenía pendiente de publicar un par de sistemas más para el botón. Uno de ellos es similar al que comentas, así que lo veré con detalle y luego decido cual me gusta más y publico.
El otro es el mismo que este de aquí (con imagen pre-escogida por nosotros), pero con una mejora para mandar una imagen más grande.
Gracias Felipe.
Investigado. Tu código no me funcionó, pero supongo que fue porque falta o sobra algún carácter. Finalmente publicaré las dos variantes (la tuya y una versión de la de este post) porque cada una tiene ventajas e inconvenientes.
EliminarExcelente :)
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarYa lo hice: Otras opciones para instalar el botón de Pinterest :D
Eliminarhola!!! ya publicasre la que tu tienes? la que arroja como varias imagenes...esa segun ya la tenia pero ahora no encuentro donde la baje.
ResponderEliminarSí. Es el segundo sistema que se explica en este post.
EliminarMil gracias por la ayuda!!. Ya pensaba que nunca sería capaz de instalar el boton de pinterest en cada entrada. Ya he perdido la cuenta de intentos. Ahora le tengo puesto y dando a elegir entre todas las imagenes :D
ResponderEliminarAlégrome pues. No hay de qué ;)
EliminarMuy interesante, siempre tratando de mantener a todos informados
ResponderEliminarPor más que cambio la imagen personalizada para el botón me sigue apareciendo esta: http://passets.pinterest.com/images/pidgets/bps1.png la cual no tengo en ninguna parte de mi plantilla y no tengo ni idea de porque sale :S ¿sabes a qué se puede deber?
ResponderEliminarHola. Esa imagen es la que inserta automáticamente el script de Pinterest. Para poner una personalizada tendrías que usar el último código que se cita en esta entrada.
EliminarPero si es ese el que usas y sigue apareciendo la "oficial", entonces ya no conozco otra manera. Piensa que esto es de cuando el sistema no funcionaba bien del todo y quizás cambiaron ya algo que afecta a eso.