Tableros Pinterest en el blog | Oloblogger Llevo casi un mes dándole vueltas a una manera de mostrar un tablero de Pinterest en el blog y hoy q...

11 de diciembre de 2012

Tableros Pinterest en el blog

Llevo casi un mes dándole vueltas a una manera de mostrar un tablero de Pinterest en el blog y hoy que por fin consigo algo decente, descubro que justo desde hace ese mismo tiempo Pinterest ofrece un gadget que permite hacer lo mismo.

Frustración aparte, en el siguiente enlace podéis encontrar el generador oficial dónde con sólo indicar la dirección de un perfil (Profile Widget) o la de un tablero concreto (Board Widget), podréis conseguir el código para colocar vuestros pines en vuestro sitio. Hasta 30 por tablero.

El código es el mismo en ambos casos y sólo cambia la forma de la dirección del tablero y las opciones que se pueden insertar para las medidas generales del tablero y las del ancho de las imágenes:

<a data-pin-scale-width="200" data-pin-scale-height="600" data-pin-board-width="220" data-pin-do="embedBoard" href="http://pinterest.com/pinterest/pin-pets/"></a>
<script src="//assets.pinterest.com/js/pinit.js"></script>

  • data-pin-scale-width: Opcional. Ancho de cada imagen, si no se indica el dato el ancho será por defecto de 92px
  • data-pin-scale-height: Opcional. El alto total del gadget. En este caso, si no indicamos nada el alto se calculará automáticamente.
  • data-pin-board-width: Opcional. El ancho total del gadget. Si no incluimos el parámetro, será de 175px

La dirección del tablero es obligatoria y tendrá la forma http://pinterest.com/USUARIO para mostrar todas las imágenes del perfil o http://pinterest.com/USUARIO/TABLERO para ver un solo tablero.


Aquí una demo en acción.


Y ya que lo tenía perfilado, el que prefiera un estilo similar pero totalmente hecho a mano con sus ventajas (formato libre con CSS) y sus inconvenientes (más cantidad de código), puede echar un vistazo a esta otra página que había montado para que os hiciérais una idea de las posibilidades.

No olvidéis pasar el puntero por encima de las imágenes del primer tablero. El segundo es una versión con otro estilo más sencillo.

Si os gusta y tenéis ganas de experimentar (o sólo de copiar y pegar), a continuación el código completo que utilicé.

Los que ya tengáis jQuery en la plantilla, tendréis que quitar la primera línea para evitar duplicar versiones. Por otro lado, casi al final tenéis algunos parámetros de configuración de la salida y el lugar dónde indicar la dirección del feed.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B3b6MFUtZc42LW82V1pQRHRGamc"></script>
<style type="text/css">
/* Contenedor general */
#PintBoard {width:576px; margin:0 auto;}
.PintFeed {}
/* Cabecera tablero */
.PintHeader {margin:20px auto;text-align:center;font-weight:bold;}
.PintHeader a {padding:10px 20px; background-color: white; color: black;}
/* Caja imágenes */
.PintBody {}
/* Lista */
#PintBoard ul {position: relative; margin:0; list-style: none;}
#PintBoard ul li {position: relative; list-style: none; float:left; width:100px; height:110px; margin: 0; padding: 0; overflow:hidden;color:transparent;border:1px solid white;}
#PintBoard ul li img {}
#PintBoard ul li:hover {overflow: visible; z-index: 2;}
/* Imágenes impares */
.odd {}
/* Imágenes impares */
.even {}
/* Título imagen */
#PintBoard ul li h5 {}
#PintBoard ul a {position: relative;display:block;}
#PintBoard ul img {position: absolute; margin:0; padding:1px; border:0; background: white;}
#PintBoard ul li:hover img {position:relative; top:50%; left: 50%;width:250px;margin-left:-125px;margin-top:-50px; box-shadow: 0 0 16px rgba(0,0,0,.8);}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#PintBoard').BoardFeed('http://pinterest.com/USUARIO/TABLERO/rss', {
limit: 20, //Máximo 25
header: true, //Nombre del tablero
showtittle: false //Título imagen. Requiere cambio CSS
});
});
</script>
<div id="PintBoard"></div>
<div style="clear:both;"></div>

La dirección para ver todos los tableros de un usuario terminaría algo distinto; con un feed.rss:
http://pinterest.com/USUARIO/feed.rss

El script para descargar y alojar bajo vuestro control está disponible en este enlace: tablero-pinterest.js

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

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

20 comentarios :

  1. Muchísimas gracias por la info! A la que tenga un ratín me aplico y pongo mi tablero en el blog. Saludos!

    ResponderEliminar
  2. Que información más últil. Me encanta pasar por tu blog para ver qué cosas puedo agregar al mío, me ha servido mucho, todos tus tips, para lograr varias cosas que no tenía idea alguna de cómo hacer. Solo quería pasar y darte las gracias.

    ResponderEliminar
  3. Gracias a los/las dos. Siempre da gusto que te hagan saber que pensáis eso ;)

    ResponderEliminar
  4. Wow! vi esto en un blog y aunque busque y busque en pinterest no di con el gadget!
    Eres un amor!
    Mil gracias, estoy facinada con blog!
    :) jijiji

    ResponderEliminar
  5. Gracias por la información, probaremos si vale la pena o me conformo con un boton más sencillo...

    ResponderEliminar
  6. Hola! no he entendido aun en que opción de gadget hay que añadir el link que nos da el pinterest

    ResponderEliminar
    Respuestas
    1. Si fuera un gadget sería en uno tipo HTML/JavaScript, pero por el tamaño del tablero, yo lo pondría directamente en un página estática. Sería lo que yo puse en el ejemplo enlazado a mitad del post.

      Eliminar
  7. Un millón de gracias. Me ha sido de una utilidad ENORME

    ResponderEliminar
  8. En primer lugar, gracias por la información. Tengo un problema: no veo la manera de activar Board Witgets. ¿Sabes cuál puede ser la causa?

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola. Supongo que el problema estará en la dirección que pones, porque el generador no presenta más dificultades. De todas formas también puedes probar a crear tú el código según las indicaciones que doy en esta entrada

      Eliminar
  9. Hola, soy Ana, sería posible poner el tablón de pinterest en mi blog, sin tener ni idea de edición de html y esas cosas???.....sé llegar a la plantilla, pero nada mas....luego no entiendo nada, ni de body, de ni de nada.....hay alguna manera para torpísimos? Mil gracias

    ResponderEliminar
    Respuestas
    1. No tienes que hacer nada de eso Annia. Simplemente consigue el código desde Pinterest y luego creas una nueva entrada (una Página también serviría) y dentro pegas el código. Ya está.

      Eliminar
  10. Muchas gracias, cada vez que quiero modificar mis blogs vengo a revisar por aqui. Ahora, no sabes como hacer para que cada vez que se hace clik en un pin, nos lleve directo a ese pin, en vez de abrir una ventana para pinear? Con el mismo estilo que el gadget oficial.
    Trate de usar el codigo que posteas, pero no me sale nada. De todas formas, muchas gracias por todo este blog! Saludos.

    ResponderEliminar
    Respuestas
    1. No sé si lo que quieres es lo que imagino, pero eso sería simplemente una imagen replicando el botón y en ella un enlace al pin en Pinterest ¿no?

      Eliminar
    2. No me queda claro si esa frase admirativa quiere decir que la idea te sirvió o simplemente afirmabas...

      Eliminar
  11. Hola Oloman! A ver si me puedes ayudar. Me gustaría embeber en mi blog de wordpress.com uno de mis tableros pero controlando yo el ancho y alto. Pinterest me da un código por defecto en el que no puedo tocar nada y no me gustan las dimensiones que tienen.
    ¿Me puedes ayudar con el código? El tablero sería este: http://www.pinterest.com/anabejaran0/diseno-que-adoro/
    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Ana, usa el código que puse al principio del post. En esa parte explico que para controlar el ancho/alto hay un par de parámetros que se pueden modificar. Para el ancho sería "data-pin-board-width: xxx"

      Eliminar
  12. Buenas. Estoy pensando añadir esto a mi blog pero me gustaría que al pinchar en las imágenes estas se abran en una ventana aparte. Sería eso posible?
    Otra cosita que me he dado cuenta es que mis imágenes al ampliarse se ven borrosas.

    Saludos

    ResponderEliminar
    Respuestas
    1. Alicia, si te refieres al oficial, ese ya te lleva a ventana nueva al pinchar en "See on Pinterest" y con respecto al otro código, me costó bastante desarrollarlo y lo aborrecí tras ver que había uno oficial, así que no quiero ni recordarlo. De todas formas la manera sería editando el JavaScript que lo sustenta y añadiendo allí la etiqueta target='_blank' al enlace correspondiente.

      Eliminar