Hace unos días CebicheTV me decía que había visto en Daddy Design un Fanbox personalizado que quería aplicar pero que no entendía muy bien cómo hacerlo.
La forma como lo presentan es un estilo minimalista que se adapta muy bien a plantillas de diseños más simplistas, aunque a partir del código CSS se puede modificar para hacer una readaptación del mismo.
Como puedes ver se ha eliminado la cabecera del Fanbox, se han quitado los bordes, el botón 'Me gusta' se ha puesto debajo, y el número de fans está en otro color.
Para conseguir personalizar el FanBox de esta forma necesitaremos saber la ID de nuestra página de Facebook.
Para conseguir personalizar el FanBox de esta forma necesitaremos saber la ID de nuestra página de Facebook.
Para saberla entra a tu página de Facebook y haz click en el botón Editar la página que se encuentra en el lado superior derecho.
En la barra de direcciones de tu navegador verás al final una serie de números, esa es la ID.
https://www.facebook.com/pages/edit/?id=XXXXXXXXXXXXXXX
Ahora descarga este archivo, descomprímelo y sube el archivo a un hosting.
Luego entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pega este código:
<script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script>
<fb:fan profile_id="XXXXXXXXXXXXXXX" stream="0" connections="8" logobar="0" width="240" css="URL del archivo CSS"></fb:fan>
Cambia las equis que están en rojo por la ID de tu página de Facebook que conseguiste anteriormente. Y agrega la URL de tu archivo CSS que subiste al hosting. Con eso será suficiente para tener el FanBox con este estilo minimalista.
¿Se puede personalizar más? Claro, si abres el archivo facebook.css te encontrarás con este código:
.fan_box a:hover{
text-decoration: none;
}
.fan_box .full_widget{
height: 200px; /* Altura del FanBox */
border: 0 !important; /* Eliminamos el borde */
background: #fff !important; /* Color de fondo del FanBox */
position: relative;
}
.fan_box .connect_top{
background: none !important;
padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
display: none; /* Con eso eliminamos la cabecera */
}
.fan_box .connect_action{
padding: 0 !important;
}
.fan_box .connections{
padding: 0 !important;
border: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}
span.total{
color: #FF6600; /* Color de la fuente para el número de fans */
font-weight: bold;
}
.fan_box .connections .connections_grid {
padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #666 !important; /* Color del nombre de los fans */
padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0; /* Con eso colocamos abajo el botón 'Me gusta' */
right: 5px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
En esas anotaciones color verde se indica cuáles son las áreas que podemos modificar, como el color de fondo, el color del nombre de los fans, el color del número de fans, etc.
Se recomienda no cambiar el tipo de letra para evitar desajustes con los espacios. Y si cambias la altura del gadget deberás hacerlo tanto en el código que va en el HTML/Javascript como en el archivo CSS, tomando en cuenta que la altura en negrita deberá tener aproximadamente 40px más que la altura establecida en el CSS.
Seguro podrán hacerse modificaciones interesantes, pero así como está a mí me parece bastante lindo el diseño :)
Ciudad Blogger
Grandiosa idea Potro, voy a ver si juego un poco con los estilos para personalizar mas ese plugin. :)
ResponderEliminarRealmente buenisimo ;D
ResponderEliminarOjalá nos puedan presumir sus creaciones en caso de que le hagan muchas modificaciones ;)
ResponderEliminarexelente potro pero como le ago para q me aparascan mas caritas ya modifique el 8 pero me sale menos de 8
EliminarSi tienes pocos estará así mientras se llena, es como un problema del plugin, pero cuando tengas más fans se mostrará completo.
EliminarMuy bueno, siempre pensé que era imposible de modificar. Hay alguna forma de agregar el css en la plantilla?
ResponderEliminarde acuerdo con 3-M-i-L-i-0 yo tambien pensaba que no se podia modificar, incluso una vez intente pero cree un caos en el codigo y tenia mas cara de dibujo que de FanBox y despues me rendi, ahora veo que la cosa se puso facil, lo voy a probar en cuanto ternime otros ajustes!... ;) Gracias Potro!.......
ResponderEliminarPotro disculpa, te tengo una duda diferente a este tema que hace tiempo estoy buscando: ¿¿¿Como enumeras los comentarios??? Es que andube buscando y no encontré nada en Ciudad Blogger, si depronto me regalaras el link te agradeceria mas!.... ;)
ResponderEliminar3-M-i-L-i-0, me temo que no. Es necesario que el fanbox haga el llamado de los estilos desde un archivo CSS.
ResponderEliminarCirculo W.H., por supuesto que te regalo un link, es de Oloblogger y ahí explican cómo enumerar los comentarios:
http://oloblogger.blogspot.com/2010/03/numerar-comentarios-en-blogger.html
MaGoS RaDioMuSiC, tú debes hacerlo con pinzas y guantes por si acaso, jajaja :P
ResponderEliminarbU, en tu página de Facebook, en la parte superior derecha, es un botón gris.
interest my measter...i have read about this issue...
ResponderEliminarmay if we use iframe, we can do this...
<div style='width:290px;height:264px;background-color:#debe94;overflow:hidden;'>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fpages%2FProdigy-of-Head%2F122292581115426&width=292&colorscheme=light&show_faces=true&stream=false&header=true&height=289" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:289px;margin:-1px" allowTransparency="true"></iframe>
</div>
hihihi...
cheers master \m/
change is this...
ResponderEliminarhttp%3A%2F%2Ffacebook.com%2Fpages%2FProdigy-of-Head%2F122292581115426
forget :D
Yup, thats pretty similar to this post:
ResponderEliminarhttp://ciudadblogger.com/2011/02/agregar-fanbox-en-el-blog-sin-bordes-y.html
Oh my Godness!! Yiiah xD
ResponderEliminarHola Potrito! Cómo andás? Espero que regio! Pasando a saludarte y chusmear que hay de nuevo para meter mano en la plantilla, jaja :) Oye Potris, una consulta, si uso el windows live writer y quiero volver a probar instalar "expandir post"... qué tengo que clicar en el programa para que tome el punto de corte a expandir? Si agregara el código que dabas en la nota en el post del WLW la plantilla lo leería y aplicaría automáticamente la función expandir? Te prometo no mandarme ninguna taradez esta vez! Un besote y que tengas un día fabuloso!!! XoXo
ResponderEliminarpotro, como siempre acudo a vos cuando ya no se qué hacer.
ResponderEliminarexiste un blog similar al tuyo que muestra cómo agregarle una ID diferente a cada post, para que uno lo personalice a su gusto:
http://loseasi.blogspot.com/2011/05/agregar-una-id-unica-cada-post-o.html
yo quisiera hacer algo como esta imagen:
http://dl.dropbox.com/u/17851544/muestra.bmp
quiero que se vean las tres primeras entradas (que son la cantidad de entradas que estoy mostrando) una al lado de la otra.
el problema es que yo soy medio lento, y por mas que Vku (el autor del blog) me explique, no logro entender.
me podrias dar una mano con esto??
muchas gracias!!!
Potro Ayuda DD: mi dropbox no quiere jalar subo un archivo de 30kb una imagen pequeña poes, y antes tardaba como 5 segundos en subirse ahora tarda como Media hora!! Estoy desesperado a que se debe? ya reinicie y todo pero nada :(
ResponderEliminarSi entro a la web dropbox.com y subo un archivo se sube normal pero desde mi pc ultramegasuperlento =/
ResponderEliminarHola Macarena Martinez,
ResponderEliminarHace mucho que probé WLW, bueno, en realidad sólo lo probé una vez hace un par de años y luego no lo volví a tocar. No sé qué tanto haya cambiado y si tenga integrada la función para hacer el corte del leer más nativo de Blogger. Pero en caso de que no lo tuvieras puedes poner el corte manualmente de esta manera:
<!-- more -->
Sólo recuerda que donde lo pongas no debe estar dentro de algún DIV u otro código.
Otro beso para ti!
EpideMia, no he tenido la oportunidad de probar ese tutorial por lo que no sabría cómo ayudarte, pero estoy seguro que si sigues pacientemente los pasos que Vku explica podrás ver buenos resultados. Saludos.
ResponderEliminarTutoGeek, quizá pueda ser que otro recurso de tu computadora está consumiendo mucha memoria o banda ancha de tu conexión. Igual a veces Dropbox se pone un poco tonto y tarda en subir los archivos desde la computadora, ya me pasó un par de veces y solo se solucionó.
buen post potro!!
ResponderEliminarUna pregunta!! Fijate que le kiero poner una imagen de cabezera a mi blog,pero cuando la pongo queda en medio y no se mira bien.Si te fijas aqu ien la imagen kiero que quede en donde esta sombreado en rojo ,como a laizquierda y no en el centro donde esta amarillo,ahi se la puse pero asi kedo!! Porfavor potro ayudame,gracias!!!
Checa la imagen
mira como kedo
Potro, muchisimas gracias hermano ... me sirvio miles!
ResponderEliminarHooolaa Pootro pues ya se soluciono y ps el problema empeso cuando instale un programa śpeedbit´ y no queria pubisprograma śpeedbit´ y no queria subir y lo desinstale y limpie con ccleaner y poco despues ya jalo xd
ResponderEliminarSuper!!! Mua Potrito!!! ahora ya me gustas en facebook!!!
ResponderEliminarMicroboy90, ¿en cuál blog tienes la imagen de la cabecera para que pueda verlo?
ResponderEliminarCebicheTV, por nada ;)
TutoGeek, esos programas siempre nos traen más perjuicio que beneficio, qué bueno que ya está funcionando :)
Kary, gracias! buen fin de semana!
ola potro me gustaría que me encuentres una plantilla fácil por que encuentro en btemplates no me gustan y por eso te pido una plantilla fácil de modificar si pudiera ser de color azul,blanco. Te lo agradecería mucho.
ResponderEliminarPotro. Me he cargado mi blog :(
ResponderEliminarHe añadido unos trozos a la Edición de html de mi blog, le di a vista previa, y salía transparente el fondo de las entradas (a pesar de que normalmente es blanco), pero pensé que se podía cambiar desde el Diseñador de plantillas, pero después, guarde los cambios y entré en el editor, pero me salía que el fondo ya estaba blanco. Lo he intentado cambiar de color, pero el fondo seguía transparente. Hasta he intentado ponerle el antiguo html de nuevo, pero sin exito (es decir, que seguia transparente igualmente). Por favor, necesito ayuda. Es "URGENTE", estoy estropeando mi blog.
(De los dos blogs que salen en mi cuenta, el que me estoy cargando es Blue Games).
Este comentario ha sido eliminado por el autor.
ResponderEliminarAh, y me acabo de dar cuenta de que sólo pasa en la pagina principal del blog.
ResponderEliminarHola amigo [El Potro] como siempre gracias por todos tus aportes.
ResponderEliminarTengo unas dudas.
1.- Cómo puedo cambiar el texto "Te gusta esto" por otro..?
2.- Cómo puedo centrar todo..?
3.- Como puedo resaltar el botón "Me gusta" y ponerlo en la parte superior junto con una pequeña imagen del blog.?
Bueno eso por el momento.. Gracias de antemano por tu ayuda..!
Att: BDJMarcelo => MEG@-PC
hola potro gracias genial me ayudas mucho queria pedirte otro favor y ke pena molestarte tanto. sabes como puedo cambiar el color de fondo de cada comentario es que quedo blanco y al rededor si lo pude cambiar me gustaria cambiar el color de cuando dejan el comentario gracias y si sabes como puedo que no aparesca fecha de comentario mejor gracias y sigas asi este es my blog http://cinewow.blogspot.com/2011/07/ver-transformers-3-el-lado-oscuro-de-la.html
ResponderEliminarBlue, hay dos cosas importantes que siempre debes tomar en cuenta, una es hacer un respaldo de la plantilla cada vez que haces un cambio. Otra es que si ves que en la Vista Previa no se ve bien entonces no guardes los cambios.
ResponderEliminarTodo parece bien en el código, ¿cuál fue el código que agregaste, en qué área y para qué truco?
Pozo+10™, no se pueden cambiar, esos los añade la aplicación misma.
ResponderEliminarBDJMarcelo, ese texto no se puede cambiar porque es controlado directamente por Facebook. Para alinear elementos mira esta entrada. Para subir de nuevo el botón cambia bottom: 0; por top:0;
Cinecolombi, ya te he respondido esa duda en otro comentario.
ResponderEliminarPara que no aparezca la fecha del comentario agrega antes de ]]></b:skin> esto:
.comment-timestamp a {
display: none;
}
Sólo toma en cuenta que si lo eliminas no se mostrará tampoco el icono para borrar los mensajes.
Pues intente hacer este truco: http://jmsgtecnologias.blogspot.com/2009/12/ocultar-entradas-en-la-pagina-principal.html
ResponderEliminarComo te he dicho, le puse el antiguo HTML, pero no sirvio, es decir, que le di a Vista Previa y seguia viendose igual.
Pozo+10™, ellos no usan la misma aplicaciones que usamos nosotros para crear la pestaña de bienvenida, sino que como bien supones ellos crean sus propias aplicaciones.
ResponderEliminarBlue, en ese código que pusiste hay una condicional que sólo surge efecto en la portada, ahí debe estar el problema. Expande los artilugios de tu blog y busca esa área que mencionan ahí, localiza el código rojo, aunque dices que ya lo eliminaste debe haber todavía un fragmento, sólo revisa esa área con mucho cuidado y no guardes los cambios, dale Vista Previa para estar seguro que has eliminado el código correcto. Saludos.
perdón, salgo con cualquier cosa, es que se encuentra cada cosa mas rara en internet. que esesto? http://spirit.net.ar/
ResponderEliminarPues es una tabla que se mueve con jQuery pero no tengo la menor idea para qué sea :|
ResponderEliminarTienes razón, uno se encuentra con cada cosa rara en la red...
Potro tengo un incoveniente google no me esta indexando mi web hace varios dias si...pero ahora ninguna entrada que puede ser??? www.facetv.co.cc
ResponderEliminarGoogle dejó de indexar los dominios co.cc
ResponderEliminarhttp://twitter.com/#!/Ciudad_Blogger/status/86616167917174784
Hola Potro Como Yo Puedo Comunicarme Con Tigo Tramite Facebook MSN Otro MEdio De Comunicacion....... Por Que Quiero Aserle unos Ajuste Ami Web De Musica Oviamente Recompensando El Favor.. Por Que Quiero Cambiar total MEte mi Web.
ResponderEliminarPotro tengo una pregunta fuera de este tema. Se trata sobre la plantilla de Etéreo, del diseñador de Blogger. La plantilla predeterminada a elegir que te da Blogger. Ahora mi pregunta es la siguiente:
ResponderEliminarComo puedo hacer que el fondo principal de mi blog, el fondo donde se encuentran las entradas, gadgets etc. sea de un color definido. Porque al elegir un color, se aplica, PERO desde arriba comienza un tono blanco-gris , un color grisaseo, y SEA CUAL SEA EL COLOR QUE ELIGA, siempre comienza desde arriba de esa manera, un blanco grisaseo. Y quisiera que eso desapareciera, y sea del color que yo elegi. En este caso el color negro, pero nose de que manera hacerlo. Nesecito tu ayuda Potro!
Hola potro tengo una problema en mi blog y necesito tu ayuda, si es posible.
ResponderEliminarYo estaba modificando algunas cosas del blog, y ahora me quedo con un problema y no se como modificarlo.
http://cine-desde-casa.blogspot.com/2011/07/paul.html
Fíjate en esa entrada, que la Imagen que esta hay queda demasiado abajo, y sobra muchísimo espacio.
Necesito tu ayuda urgente por favor.
De antemano muchas gracias potro.
hola potro solo es una duda muy pekeña y sencilla
ResponderEliminarcomo era el codigo de una imagen k si pulsas vas a otro sitio
gracias potro
Hola de nuevo potro ya solucione lo del espacio que me quedo de mas.
ResponderEliminarY tengo una nueva ayuda sobre casi lo mismo.
Fue que trate de poner las estrellas del balcón de jaime.
http://elbalcondejaime.blogspot.com/2010/12/mostrar-estrellas-de-valoracion-en-las.html
Y ubique las estrellas en div class='post-body entry-content para que me quede así como la de este blog http://zonadvd-net.blogspot.com
Que aparecen en todas las entradas en la cabecera de las entradas eso fue lo que hizo que me quede ese tremendo espacio que lo solucione quitando las mismas estrellas y con otras cosas mas.
Mi pregunta es como puedo ponerla en la cabecera de todas las entradas si que me quede mal las entradas y sin ese tremendo espacio que me quedo.
Espero tu ayuda potro. Gracias por todo.
existe algun codigo html para reducir el tamaño de una pagina web, en proporciones equivalentes, GRACIAS!!
ResponderEliminarHola Potro, soy Horacio de Logia Tecno, no se si me recordás. Mirá, tengo un problema y es que mi blog ha disminuido de visitas drásticamente.De un número no menor a 50 visitas por día, sin actualizar, pasé a tener 15 o 20 actualizando.
ResponderEliminarTenía la redirección .co.cc de la que alguna vez hablaste (http://ciudadblogger.com/2009/03/dominio-gratis-cocc.html) y volví a .blogspot.com porque pensé que quizá sea eso, dado que la verificación de l sitemap de la que hablaste hace poco (http://ciudadblogger.com/2011/06/enviar-sitemap-google.html) me ponía una "x" roja en vez de la palomita verde. Luego de sacar la redirección anduvo perfectamente.
Quería preguntarte si sabes que puede estar fallando y qué tengo que hacer o con lo hecho está bien?Google no me pone ni siquiera en sus resultados, aún buscando mi url entera.
Espero que puedas ayudarme y espero que sólo me esté ahogando en un vaso con agua. Perdón por escribir algo tan largo, pensé escribir a tu mail pero no lo tenes activado aquí.
Gracias!!!
YA HISE TODO LO ESPECIFICADO EN TU POST PERO CUANDO COLOCO EL WITGET DEL FANBOX APARESE ESTO: Plugin cannot be rendered with the specified parameters.
ResponderEliminarAyuda!!!
Dembowz4, pues no sé qué quieras cambiar de tu blog, puedes usar el buscador para encontrar los temas que necesitas. De todas formas a mediados de la semana habilitaré de nuevo el formulario de contacto, ahora está deshabilitado porque tengo un sin fin de trabajo. Saludos.
ResponderEliminarPozo+10™, pues yo le acabo de dar click en 'Me gusta' y funciona sin problemas.
[FastenMovies], pues me parece que no tienen esas opciones. Si mal no recuerdo algunas plantillas del Diseñador tienen la opción de cambiar el color de las entradas pero no todas, supongo que en las que no lo da es porque su estructura no lo permite.
ResponderEliminarmariocrack6, el código para cualquier imagen con enlace es este:
<a href="URL del enlace"><img src="URL de la imagen" /></a>
Oscar, no veo mucho espacio en las estrellas, pero igual puedes eliminar los estilos predefinidos que tiene tu plantilla para las tablas. Eso lo puedes hacer borrando esta parte:
ResponderEliminartable{border:1px solid #fff;margin:0 -1px 24px 0;text-align:left;width:100%}
tr th,thead th{color:#888;font-size:12px;font-weight:bold;line-height:18px;padding:9px 24px}
tr td{border-top:1px solid #fff;padding:6px 24px}
tr.odd td{background:#fff}
JUVENTUD MINCA, debajo de
ResponderEliminarbody {
Agrega esto:
width:80%;
Eso hará que se reduzca el 20% de su tamaño, si lo quieres más reducido cámbialo por un valor más bajo, por ejemplo 70%, si lo quieres más amplio por uno más grande como 90%
Fomoriano, hiciste bien en regresar a blogspot.com ya que desde hace unos días Google dejó de indexar los dominios co.cc así que por ahora ya no aparecerán en los resultados de las búsquedas. Pero pierde cuidado, regresando a blogspot.com tu blog volverá a indexarse, sólo es cuestión de esperar a que los robots pasen por tu blog y actualicen la información.
ResponderEliminarhttps://twitter.com/ciudad_blogger/status/86616167917174784
NOTIPAK, Facebook anda teniendo un problemilla con eso, verifica que la ID de tu página sea la correcta. Si todo está bien entonces habrá que esperar a que Facebook lo resuelva, a mí igual me aparece así por momentos.
ResponderEliminarolle potro me puedes enseñar o deasir como se ponen señales asi como la de estas paguina de futbol40.com ose esas de canal 1 canal 2 y lo que hay en vivo
ResponderEliminarPotro los dominios .com.ar son gratis podrias hacer un tutorial de como adquirir uno en Blogger por favor,Saludos
ResponderEliminarpotro como puedo hacer para poner los botones para compartir de blogger al lado de las etiquetas? porque lo trato de hacer desde editar entradas del blog y no se puede..
ResponderEliminarbuenos dias potro...el dia de ayer me aceptaron en adsense pero coloco los anuncios y no me salen en la pagina principal solo en el feed...que puede ser potro......gracias www.televisiononline2011.blogspot.com
ResponderEliminarENLATVHD, sólo consigue los códigos de las transmisiones y luego puedes ponerlas en un menú o en un tabview
ResponderEliminarPozo+10™, quizá sí sea un problema temporal de Facebook porque yo ahora mismo le di Me gusta y se quedó marcado normal.
Juvinao, claro que sí, deja lo agrego a la lista de entradas pendientes ;)
ResponderEliminarPokerPRO, prueba acomodando los códigos de las etiquetas y los de compartir en una tabla HTML.
televisiononline2011, no sé cómo los estés poniendo pero mira esta entrada:
http://ciudadblogger.com/2010/01/10-lugares-para-poner-adsense-en.html
ya revise lo que me dijistes pero nada....entre al panel de adsense y copie los codigos html adsense de los anuncios los agregue a la sidebar y tampoco salen los anuncios.....no se que pasa
ResponderEliminartelevisiononline2011, pero sigo sin saber cómo los estás poniendo pues no es el mismo procedimiento si lo pones en un gadget de la sidebar a que si lo pones directo en la plantilla. Tampoco mencionas en cuál blog lo has puesto. Sin suficientes datos es difícil adivinar la causa y solución.
ResponderEliminarPozo+10™, tendré que empezar a cobrar por esos clicks mágicos, jajaja :)
lo coloque en un gadget y tambien desde la configuracion de entradas pero nada...esta es la web www.televisiononline2011.blogspot.com
ResponderEliminaren el gadget solo pegue el codigo html que me dan en adsense y listo pero no salen
ResponderEliminartelevisiononline2011, no veo algún código de Adsense pegado dentro de un elemento HTML/Javascript, sólo veo varios bloques que agregaste desde Elementos de la página. Esos suelen fallar mucho, lo mejor es que lo agregues tú en un HTML/Javascript o directo en la plantilla.
ResponderEliminarOtra cosa es que sólo se permiten 3 bloques de anuncio por página, si pones demasiados como has hecho no se mostrarán los excedentes.
Gracias potro te agradezco por la informacion me sirvio ya solucione el problema....mil gracias tu como siempre transmitiendo tu conociemiento ...gracias
ResponderEliminarvaya, vaya... cada vez recurro a tus conocimientos, logre hacer correctamente varios cambios en mi blog, te doy las gracias, eres una gran ayuda lo valoro y lo agradezco de corazon, lo mio no es compartir taaanto conocimiento como tu, pero igual ayudo en cierta forma a los usuarios.... Bueno mi amigo, un abrazo a la distancia, muchas gracias por todo, estoy seguro que volvere a visitar esta pagina... Hasta pronto.
ResponderEliminarOtro abrazo para ti cesar1976 y muchas gracias por tomarte el tiempo en comentar, ya sabes que eres bienvenido las veces que lo desees ;)
ResponderEliminarSaludos.
El Potro: muchas gracias, y volvi, caí como mosca en el papel engomado jejejej... una por curiosidad por saber tu respuesta y la otra para sacar como dejar mis comentarios de otro color, ya lo habia visto anteriormente y no lo queria agregar pero ahora me dieron ganas jejejeje... bueno ya no molesto mas... hasta pronto mi buen amigo cuidece mucho saludos al circulo familiar y un abrazo a la distancia... agregare un enlace tuyo en el mio en forma de agradecimiento...
ResponderEliminarGracias por el enlace ;)
ResponderEliminarHola Potro, algo me dice que no modifique pero mi curiosidad es grande =) volveré por cualquier duda =)
ResponderEliminarOye, de casualidad no se podrá hacer lo mismo para el fanbox de Twitter que anda rondando por la red?
ResponderEliminarMe temo que no :(
ResponderEliminarSale, pues de todos modos muchas gracias, este blog ha sido de gran ayuda para mi =)
ResponderEliminarOye Potro talvez no es compatible este truco con el fan-box que he agregado podrias cuando tengas tiempo ver el fan-box que tengo en mi blog a ver si es por eso? cuando puse el truco no me reconoce la -id- de mi pagina ya verifique mi -id- y no tengo duda que esta correcta. que sucedera?
ResponderEliminarel archivo CSS lo subi a Dropbox.
gracias.
Hola Leonardh.,
ResponderEliminarSi ya tenías un fanbox elimínalo y agrega este. Siguiendo los pasos de la entrada deberá aparecer el nuevo fanbox personalizado.
Si al ponerlo no te sale me avisas.
Saludos.
Hola potro, en realidad es la primera vez que intento agregar el Fanbox (ya lo puse y funciona bien) de facebook, pero este fanbox que he agregado al blog no es este que tu tienes aca en el post, este no lo puse porque no me lo permitio la pagina que tienes enlazada me marca un error, precisamente el mismo error de la ID, no me reconoce mi ID de la pagina, busque otro fanbox y resulta que este otro si me la recocio pero pues parece que no es compatible con este TRUCO Para Personalizarlo.
ResponderEliminarla verdad ya no recuerdo de donde lo obtuve porque como vi que funciono bien perdi la pagina de donde lo agregue.
Me conformaria con lograr modificar de este fanbox el [-Largo-] el -ancho- ya se de donde, el Largo al parecer no tiene de donde modificar y esto hace que se muestren incompletas las fotos de quienes dan click en -me gusta-.
Tengo el mismo problema!!!!!!!!!
EliminarSi te fijas en la entrada verás que no es necesario hacer nada en otra página, sólo debes poner la ID de tu página donde se indica en las equis de color rojo. Pero no es necesario que crees el fanbox en alguna otra página, por eso te decía que siguiendo los pasos que se indica el fanbox se creará automáticamente sin necesidad de entrar en alguna página para crearlo.
ResponderEliminarSi te da muchos problemas igual puedes intentar con esta opción:
http://ciudadblogger.com/2011/02/agregar-fanbox-en-el-blog-sin-bordes-y.html
que torpeza la mia! jajaja- crei que este post era solo para personalizar el fan-box que ya tenia Yo en el blog.
ResponderEliminarpero como dices, en realidad es para -crearlo-y -peronalizarlo- por eso me marcaba error (pues no puedo tener dos a la vez).
Ahora solo queria preguntar si al quitar el fanbox que ya tengo para poner este- No se perderan los avatares de las personas que ya han dado click en -me gusta- ???
ahora si me falto leer con mas detenimiento este Post!! jejeje...... espero que no se pierdan los avatares si pongo este otro fanfox porque igual y se enojarian quienes ya dieron clik en -me gusta-.
que error fue ver puesto ese otro fanbox, porque ni siquiera se puede modificar, y asi no me gusto.
jamas hablaria mal de otros blogs de ayuda (pues tambien hacen lo que pueden para Ayudarnos), pero es muy cierto que aca en Ciudad Blogger tienes los Mejores Tutoriales del internet.
En lo absoluto, aun si quitaras definitivamente el gadget tus fans siguen ahí, cuando lo vuelvas a poner ahí estarán, a menos claro que ellos hayan decidido que ya no les guste la página, así que pierde cuidado, y no te preocupes que descuidos tenemos todos ;)
ResponderEliminarBien, ya he eliminado el otro fanbox y agregue el de este Post, puse de vuelta mi ID de la pagina y puse la direccion de donde esta alojado el archivo CSS (dropbox) ahora como se modifica el archivo CSS porque le di doble click para abrirlo directamente en Dropbox, me lo muestra pero no me permite modificar nada (solamente copiarlo).
ResponderEliminarademas mencionas que: Con eso será suficiente para tener el FanBox con este estilo minimalista.
Pero a mi me ha aparecido exactamente igual al que tenia antes (y que ya borre claro) bueno solamente aparecio un poquito mas larguito pero fue todo.!
Para editarlo necesitas abrirlo con un programa, si usas Windows entonces ábrelo con WordPad, editalo y lo guardas de nuevo (sin cambiarle el nombre y extensión).
ResponderEliminarAhora no ves cambios porque el archivo no lo has subido correctamente, debe estar dentro de la carpeta Public:
[Cómo usar Dropbox]
Ahora si ya he subido el archivo de estilosFanbox correctamente y ya aparecio personalizado, necesitaba preguntar si se puede hacer que aparezcan un poco mas pequeñas las fotos de las personas y hacer mas largo el fanbox para que quepan mas porque mi Sidebar es angosta (No quiero hacerla mas ancha) se podra? y no es que quiera ser tan copion verdad pero me gustaria ponerle tambien el boton arriba y una pequeña imagen como lo has echo tu!- jajajajajaja- espero que pueda hacerlo yo porque como te digo mi sidebar es angosta.
ResponderEliminarNOTA: Ya intente hacer mas largo el fanbox pero lo unico que sucedio fue que desaparecio el boton -Me gusta- y tuve que volver a dejar todo como al principio. gracias.
Pues de hecho el que yo tengo en el blog (en la sidebar) no es con este método, sino con este otro, que en realidad lo que hice fue sólo eliminar los bordes y ajustar el tamaño del fanbox a la medida de mi sidebar.
ResponderEliminarCon el método de esta entrada se supone que igual se puede controlar el ancho y el número de seguidores, pero la vez que l probé noté que aunque sí podía hacerlo más ancho no se mostraban más seguidores, se quedaba incompleto.
Si quieres puedes intentarlo, sólo es modificar connections="8" por el número de avatares que quieres mostrar y cambiar el width="240" en negrita por el ancho que quieres.
El tamaño de los avatares no se puede cambiar, pero si lo que quieres es que se vea similar al mío entonces sí te recomiendo la otra opción que te comenté.
Saludos.
gracias Potro..!!
ResponderEliminarAca estoy de vuelta Potro jejeje- decidi quedarme con el de este Post (el del boton abajo), pero queria preguntarte si es posible cambiar el boton --Me gusta-- Arriba, porque configure el fanbox para que aparecieran mas avatar de personas y el Boton queda entre los avatar y es un poquito antiestetico, se puede?? gracias...!
ResponderEliminarClaro, ahí en las anotaciones en color verde dice cuál es el área donde se ha hecho para que el botón esté abajo, sólo debes cambiar bottom: 0;, por top:0;
ResponderEliminarAver Potro, espero haberlo colocado bien jejeje porque no aparece mira:
ResponderEliminarprimero lo puse sin espacio (top:0;)
y despues asi:
.fan_box .connect_widget{
position: absolute;
top: 0; /* Con eso colocamos abajo el botón 'Me gusta' */
right: 5px;
margin: 0 !important;
y no aparecio arriba el boton.
Al final de la URL del archivo CSS agrega esto ?2
ResponderEliminarQuedaría más o menos así:
css="http://tuhosting.com/facebook.css?2"
Ese número es una caché y se agrega y cambia para que se vean los cambios que hagas en el archivo, así que cada cambio que hagas en el archivo CSS deberás cambiar ese número por 3, luego 4, etc.
Luego, elimina esta parte del archivo CSS:
.fan_box .connect_widget{
position: absolute;
bottom: 0; /* Con eso colocamos abajo el botón 'Me gusta' */
right: 5px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
Habiendo hecho eso el botón se verá arriba del gadget.
Saludos.
Te agradezco Potro ! ahora funciona mejor ya con el boton arriba. hasta pronto, saludos...!!!
ResponderEliminarquiero que solo salga el Stream sin la cabecera y sin el boton ME GUSTA!
ResponderEliminarCambia stream="0" por stream="1"
ResponderEliminarY connections="8" por connections="0"
Luego esto:
.fan_box .connect_widget{
position: absolute;
bottom: 0; /* Con eso colocamos abajo el botón 'Me gusta' */
right: 5px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
Por esto:
.fan_box .connect_widget{
display: none !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
display: none !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
display: none !important;
}
Potro no puedo cambiar la altura, la cambio pero sigue siendoo la misma :S
ResponderEliminarAhí en color verde dice dónde se cambia, quizá también tengas que cambiar el número de avatares a mostrar en connections="8"
ResponderEliminarSi estás haciendo cambios y no ves que hagan efecto entonces haz esto, al final de la URL del archivo CSS agrega esto ?2
Quedaría más o menos así:
css="http://tuhosting.com/facebook.css?2"
Ese número es una caché y se agrega y cambia para que se vean los cambios que hagas en el archivo, así que cada cambio que hagas en el archivo CSS deberás cambiar ese número por 3, luego 4, etc.
Hola Potro! Yo de nuevo por acá!!!!
ResponderEliminarTengo: Una Opinión y Unas CUANTAS DUDAS!! ^
Op: ES HORRIBLE COMO QUEDA EL FANBOX CON ESTA COSA! De verdad, al menos en mi blog se ve HORRIBLEEEEEEEEEE!!!!! ^^
Duda: Me gusta como queda el FanBox original, peroooooooo mi fondo es Violeta, de hecho una imagen (cofcofmuylindacofcof) y sólo quiero poder cambiar el color de las letras de todos los textos que figuran porque al ser oscuras no van nada bien con mi blog... =(
Alguna sugerencia??
Besitos ♥
Jajajaja, bueno, es cuestión de gustos. Algunos prefieren algo muy simplificado, otros no tanto ;)
ResponderEliminarIgual puedes seguir usando el fanbox antiguo, y cambiar el color de fondo del Fanbox, no sé, quizá con un color que contraste y que permita la legibilidad de los textos:
http://ciudadblogger.com/2011/02/agregar-fanbox-en-el-blog-sin-bordes-y.html
Besos!
No tengo manera de saber la ID de mi Facebook , por mas que miro no veo la opción de Editar la página ,ayuda plis!!
ResponderEliminarGracias.
El botón está arriba en la parte derecha, justo arriba de 'Administradores'.
ResponderEliminarHola que tal potro, hay alguna manera de solo poner el boton me gusta para fan pages y si es asi como?
ResponderEliminarGracias
Hola, puedes hacerlo directo desde Facebook, sólo no selecciones que se vean los avatares, ni la cabecera ni el stream:
ResponderEliminarhttp://developers.facebook.com/docs/reference/plugins/like-box/
BUenos días; he colocado el boton social "me gusta" en mi web, pero necesito colocarlo sin el recuadro contador. ¿Sabes si hay alguna manera? Mi página acepta solo código para Script.
ResponderEliminarSaludos.
Jesús.
Buenos días Jesús,
ResponderEliminarCambia donde dice layout=button_count por layout=standard
Eso quitará la burbuja que muestra el número de Likes.
Saludos.
Muy bueno tu aporte Potro. Una pregunta antes te tener el dominio en facebook mi pagina era https://www.facebook.com/pages/edit/?id=30694677933899
ResponderEliminarahora que tengo mas fans
https://www.facebook.com/FamilyGuyco
Cuando hice el cambio automaticamente desaparecio el gadget de Fan Box en mi Blogger
http://familyguyco.blogspot.com/
E intentado de todo pero no lo puedo arreglar.
Hola Vampy Saenz,
ResponderEliminarHe entrado a tu blog y veo sin problema el Fanbox, si aún no lo ves prueba entrar desde otro navegador.
Saludos.
Este comentario ha sido eliminado por el autor.
ResponderEliminarAlguna forma facil de hacer que aparezcan mas caras ?? sin tener que hostear nada a poder ser :)
ResponderEliminarNo entendí Jon, ¿a qué te refieres?
Eliminarme refiero a que donde tengo el me gusta de facebook y debajo aparecen las fotos de la gente, solo aparecen 6 o 7...y me gustaria que aparecieran 15 o 20...y no quiero seguir todos tus pasos para personalizarlo porque es un blog de blogger y no puedo hostear ningun archibo...
EliminarQue mal me expreso sorry potro
Pues no, a menos que no tengas más fans tendrás que reducir las medidas del fanbox o dejarlo como está.
Eliminarfans tengo mas de 300 y las medidas por mucho que las modifico solo aparecen 7 fotos... podrias mandarme el enlace oficial de la app?
Eliminarcomo puedo cambia el texto de "A usuario le gusta esto"??
ResponderEliminarcomo puedo cambiar el texto de "A luis le gusta esto"
ResponderEliminarpor cualquier otro mensaje?
No se puede modificar.
Eliminarhola potro , estoy leyendo tu post y me parece muy bueno solo tengo unas dudas soy novato en editar css, si quiero que aparezca la cabezera como deberia estar esta linea:
ResponderEliminardisplay: none; /* Con eso eliminamos la cabecera */
hola potro , estoy leyendo tu post y esta muy bueno pero tengo una duda, quiero que aparezca la cabezera y el boton de "me gusta" en el lugar de siempre no abajo como se mofificarian estas lineas:
ResponderEliminardisplay: none; /* Con eso eliminamos la cabecera */
&
bottom: 0; /* Con eso colocamos abajo el botón 'Me gusta' */
En ese caso sólo elimina ambas líneas Alexander.
EliminarSaludos.
hola potro, entonces si borro esas lineas apareceran los valores x defecto que usa facebook no ? ... muchas gracias por tu ayuda =)
Eliminarhola otra vez potro , hice los cambios y me kedo malazo ... si tuvieras correo te adjuntaria un pantallazo, lo que kiero solo es que quede:
ResponderEliminarlas letras amarillas y no azules y negras como es el original
el borde y las lineas de color amarillo
y fondo transparente ( ke se vea el background de mi sitio)
todo lo demas exactamente igual , si me pudieras ayudar podria poner un link a tu blog desde mis 4 blogs ... bueno es que soy mas SEO ke programador, de veras espero que puedas ayudarme, gracias de todas maneras
Hola Alexander, el color de la fuente se cambia donde se indica en las anotaciones en color verde, sólo debes cambiar el código del color por el que deseas:
Eliminarhttp://ciudadblogger.com/p/codigos-de-colores-rgb-y-hexadecimales.html
El fondo transparente no lo he intentado, pero en caso de que se pudiera entonces tendrías que localizar el color de fondo y cambiar el #fff por transparent
En todas las áreas donde diga important debes dejar esa palabra intacta.
Saludos.
Hola, estoy intentando modificar las letras naranjas en css de 'a X personas les gusta tal' y cambio el código de color y vuelvo a subir al hosting, pero no se modifica nada. No domino mucho css pero imagino que será simplemente asi, es correcto?
ResponderEliminargracias, un saludo!
Hola David, al final de la URL del archivo CSS agrega esto ?2
EliminarQuedaría más o menos así:
css="http://tuhosting.com/facebook.css?2"
Ese número es una caché y se agrega y se cambia para que se vean los cambios que hagas en el archivo, así que cada cambio que hagas en el archivo CSS deberás cambiar ese número por 3, luego 4, etc.
LOL
ResponderEliminarola que tal potro eres un genio con esto , bueno la cuestion es que agregue la cajita de comentarios como esta de fan box si me funciono perfecto pero en mi plantilla ddonde van los gadgets ses tranparente y pues los coments no se ven bien quiero personalizar la cajita de comentarios como el fan box como lo puedo hacer mira te dejo mi blog por fis. hay cuando tenga tiempo me ayuda por favor.
ResponderEliminarhttp://asianmusic-dreams.blogspot.mx/
¿Cuál cajita de comentarios Misael? yo veo todo bien ahí.
EliminarHola!! Me encantan Los tutos.de tu blog ñ__ñ Omm me preguntaba Si se puede Poner un Fanbox en el blog Pero de seguidores de tu blog..Osea en vez de tener a tus seguidores Haii en el gadget Si los puedes colocar escondidos en un boton o algo por el estilo >_< Gracias!!
EliminarNo que yo sepa, a decir verdad el gadget de Seguidores tiene muy pocas opciones de configuración :(
EliminarLo que tal vez sí podrías hacer es esto, aunque nunca lo he probado con ese gadget:
http://ciudadblogger.com/2011/04/expandir-y-contraer-gadgets-con-efecto.html
Potro, no me queda bién centrado dentro de la caja (Widget), está muy a la derecha ¿que debo corregir?. Este es el blog: http://quienblognuevo.blogspot.com.es/
ResponderEliminarAbajo de div.likeboxwrap { ponle:
Eliminarmargin-left: -10px;
Ahora si ha quedado como quería gracias a tu ayuda.
EliminarGracias
Potro, porque será que las letras no me salen en color azul?. Ahí si que no toque nada te juro.
EliminarPorque está configurado para mostrar otro color, ese lo cambias aquí:
Eliminar/* Color del nombre de los fans */
Es que no lo estoy haciendo con "personalizar el fanbox de facebook", sino con la otra entrada que tienes, y no se porque se me puso en gris ¿quieres echarle una mirada? http://quienblognuevo.blogspot.com.es/.
EliminarUna pregunta más que no es de esta entrada. Porque detras de mi avatar aparece una figura, donde se corrige sabes?.
Entonces hay que hacer la pregunta en la otra entrada para que podamos entendernos mejor y darle el seguimiento como se debe ;)
EliminarDe cualquier forma, no ese método no podrás cambiarlo, el color predeterminado de los nombres de los usuarios es gris, si creas el fanbox desde la página de Facebook podrás ver que ese es su color original.
Ya he entendido entonces. Gracias como siempre.
EliminarSaludos
Hola denuevo :P
ResponderEliminarA mi me gusta como queda la caja pero lo unico que quiero sacarle es la barrita de abajo que dice "Plug-in social de Facebook" que tendria que hacer para sacar solo eso? Gracias
Sigue este otro método, con él podrás eliminar esa barra:
Eliminarhttp://ciudadblogger.com/2011/02/agregar-fanbox-en-el-blog-sin-bordes-y.html
Hola Potro, lo probe y quedó perfecto! Solo tengo un problema.. cuando entro a mi blog y no estoy conectado en facebook (no inicié sesion)no me parace la fanbox, en cambio si me conceto en facebook y entro a mi blog si me aparece. Cómo hago para que la fanbox me quede VISIBLE SIEMPRE? (osea, que la pueda ver cuando este o no conectado en facebook)
ResponderEliminarDesde ya gracias!!!
Hola mi videoteca, revisa los permisos de tu página, puede ser que tenga alguna restricción y por eso no se vea siempre.
EliminarPotro parece que ya no funciona esto, podrías chequearlo?, saludos amigo ;)
ResponderEliminarSí, parece que ya no :(
EliminarVas a ver si puedes arreglarlo o lo vas a dejar así?, como para no seguir esperando tu respuesta haha, saludos men
EliminarDepende, ¿vas a hacer alguna donación por PayPal? jajaja
EliminarNo wn, por ahora no tengo tiempo de revisarlo :(
Hola Potro!
ResponderEliminar¿Cómo estás?
Potro, necesito tu ayuda para el siguiente: la box de fans de la página de Facebook se ha vuelto loca. Antes estaba dentro de unos margenes, centrada, etc, pero ahora ya no. Intenté cambiar los pixels del ancho pero no funciona.
Mis preguntas son 2:
¿Cómo puedo volver a centrar las fotos de los fans en el ancho del cuadro y,
¿Cómo puedo reducir el ancho en sí mismo dado que entra ya en el "cuerpo" central del blog lo que queda muy inestetico. ¿Podrías ayudarme por favor?
Intenté pegar aqui el código que tengo para que lo vieras pero aquí dice "HTML no es aceptable"... :(
Muchisimas Gracias y recibe un abrazo,
Artur
Hola Artur, ¿qué código estabas usando para conseguir lo de los márgenes y el centrado? ¿en cuál blog lo tienes puesto?
EliminarOoopps... Disculpa, no habertelo dicho! Pues el código es lo que quería pegar aqui pero no me permite. El blog es: www.arturjoselopes.com
ResponderEliminarEl código lo fui a buscar a facebook developers:
https://developers.facebook.com/docs/reference/plugins/like-box/
La cuestión es que no me permite personalizar el tamaño. Intenté cambiar los px del ancho pero aún así no me da resultado. Además lo que cambias es el interior del gadget, quiero decir, el nr. de cuadraditos de fotos disponible, pero no la anchura del cuadro. Me podrías entonces decir que puedo hacer? Muchas Gracias una vez más Potro! Un saludo!
Yo lo veo funcionando bien Artur, si reduces el width que está dentro de div.likeboxwrap { verás que se reduce el tamaño visible del gadget.
Eliminarmuy bueno potro oye de casualidad no sabes como cambiar el color de fondo de la caja de comentarios de facebook.. la caja la agregue con el tutorial de karla de compartidisimo. pero mi plantilla es oscura y los comentarios no se alcanzan haber.. muchas gracias espero tu respuesta..
ResponderEliminarNop, no se puede modificar, sólo puedes cambiar el theme, de "light" por "dark".
EliminarOk Potro! Lo había intentado antes pero no me asumia el tamaño... Que estraño... Muchas Gracias! Un saludo! Igualmente sabes cómo quitarle la linea gris que delimita la caja en en lado derecho y abajo?
ResponderEliminarDe igual forma, reduce un poco más el ancho y alto.
Eliminar¡De acuerdo!
ResponderEliminarMuchas Gracias Potro!
Un abrazo!
Mil graxias muy bueno aunque tengo que editarlo no se me ajusto muy bien con mi blog espero lograrlo :)
ResponderEliminar