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>
<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>
<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.
Y muchos más artículos interesantes si nos sigues en...
Muchísimas gracias por la info! A la que tenga un ratín me aplico y pongo mi tablero en el blog. Saludos!
ResponderEliminarQue 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.
ResponderEliminarGracias a los/las dos. Siempre da gusto que te hagan saber que pensáis eso ;)
ResponderEliminarWow! vi esto en un blog y aunque busque y busque en pinterest no di con el gadget!
ResponderEliminarEres un amor!
Mil gracias, estoy facinada con blog!
:) jijiji
Gracias por la información, probaremos si vale la pena o me conformo con un boton más sencillo...
ResponderEliminarHola! no he entendido aun en que opción de gadget hay que añadir el link que nos da el pinterest
ResponderEliminarSi 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.
EliminarUn millón de gracias. Me ha sido de una utilidad ENORME
ResponderEliminarEn 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?
ResponderEliminarUn saludo.
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
EliminarHola, 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
ResponderEliminarNo 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á.
EliminarMuchas 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.
ResponderEliminarTrate de usar el codigo que posteas, pero no me sale nada. De todas formas, muchas gracias por todo este blog! Saludos.
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?
EliminarAsi es!
EliminarNo me queda claro si esa frase admirativa quiere decir que la idea te sirvió o simplemente afirmabas...
EliminarHola 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.
ResponderEliminar¿Me puedes ayudar con el código? El tablero sería este: http://www.pinterest.com/anabejaran0/diseno-que-adoro/
Muchas gracias!
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"
EliminarBuenas. 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?
ResponderEliminarOtra cosita que me he dado cuenta es que mis imágenes al ampliarse se ven borrosas.
Saludos
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