Como son varios los comentarios donde preguntan por la llamada Like-Box de Facebook, vamos a ver si podemos agregar una. Primero que nada, debemos hacer dos cosas, crear la página y leer el artículo de El escaparate de Rosa 
donde se explica todo paso a paso.La aparición de los llamados Plugins Sociales ha cambiado levemente la forma en que podemos conectarnos con Facebook y, de alguna manera, lo ha simplificado ya que nos permiten agregar cualquiera de ellos de manera directa y con una línea de código. Para usarlos, necesitamos saber la ID de nuestra página que podemos ver al hacer click en Editar Página:
http://www.facebook.com/pages/edit/?id=ESTE_ES_EL_PROFILE_ID
Ya que estamos allí, seguimos.
A la derecha, hacemos click en Promociona con un "Me gusta" en tu página y nos encontraremos en el wizard del plugin:
Ya que estamos allí, seguimos.
A la derecha, hacemos click en Promociona con un "Me gusta" en tu página y nos encontraremos en el wizard del plugin:
Donde tendremos que agregar el ID y luego, seleccionar las diferentes opciones:
Facebook Page ID es el número identificatorio, también lo vemos al final de la URL de esa misma página
Width es el ancho en pixeles; puede ponerse cualquier valor
Connections es la cantidad de avatares de usuarios a mostra (poner cero si no se quiere ninguno)
Stream muestra miniaturas de las entradas públicas de nuestra página de Facebook
Header muestra una barra 'Encuéntranos enFacebook'
Con cada detalle que modifiquemos podremos ver una previsualización del resultado. Una vez que nos hemos decidido, hacemos click en Get Code donde nos darán dos opciones, usar un IFRAME o un código especial:
Width es el ancho en pixeles; puede ponerse cualquier valor
Connections es la cantidad de avatares de usuarios a mostra (poner cero si no se quiere ninguno)
Stream muestra miniaturas de las entradas públicas de nuestra página de Facebook
Header muestra una barra 'Encuéntranos enFacebook'
Con cada detalle que modifiquemos podremos ver una previsualización del resultado. Una vez que nos hemos decidido, hacemos click en Get Code donde nos darán dos opciones, usar un IFRAME o un código especial:
<fb:like-box profile_id="PROFILE_ID"></fb:like-box>Código que luego, si queremos, podemos modificar manualmente; por ejemplo:
<fb:like-box profile_id="PROFILE_ID" width="350" connections="5" stream="false" header="false"></fb:like-box>Si bien el IFRAME funcionará correctamente, me inclino por usar este otro código y para que este sea comprendido por nuestra web, deberemos agregar un script justo después de <body>:
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: 'PROFILE_ID', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/es_ES/all.js';
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>Por último, en nuestra plantilla, agregaremos el código de Facebook, alli donde se nos ocurra mostrarlo, por ejemplo, en un elemento HTML en la sidebar y, sugeriría, colocarlo dentro de un DIV:
<div id="fbfans">
<fb:like-box profile_id="PROFILE_ID"></fb:like-box>
</div>¿De qué sirve ponerlos en un DIV? De ese modo, podemos controlar relativamente nuestro widget, sobre todo, el color de fondo que, por defecto es transparente:
#fbfans {
background-color: #FFF;
border: 10px solid #303941;
}
89 comentarios:
Excelente post JMiur!! Justo lo que muchos andabamos pidiendo. No es exactamente igual como lo consegui, pero es de agradecer que hayas estudiado el tema para explicarnos a todos como se hace.
Un gran abrazo!!
En este momento hay varias formas de hacerlo ya que conviven los scripts originales con los nuevos así que el tema suele ser bastante confuso.
Me sale un error, me puedes indicar en cual body lo coloca, es que en la plantilla aparece un diferente
Gracias
Andres:
Una página web sólo tiene una etiqueta <body> así que no puede ser que haya varias.
No se puede cambiar el fondo del Like Box usando el Iframe? :(
Es que lo otro trae mucha faena si no tienes ni idea del uso de las plantillas.. :S
No puedo cambiar el color a blanco... donde pongo el codigo de color? en el DIV? en que parte exactamente... gracias! :-D
¿Has agregado esto?
#fbfans { background-color: #FFF; }
Eso establece el color de fondo del widget.
Estuve intentando seguir los pasos, pero no pude hacer cambiar el fondo a blanco. quisiera saber donde agrego : #fbfans{ background-color: #FFF; } en el codigo. Gracias
En cualquier parte del CSS, por ejemplo, antes de </b:skin>
Hola
Tu sabes como hacer que cuando aprieten en "me gusta", este enlace aparezca en las ultimas noticias o titulares de sus amigos, a parte de que solo aparezca en su perfil o muro.?
Estoy algo liado con esto, vengo leyendo ya desde hacen dos días sobre el tema, pero no logro dar con la solución. ;)
Nota: Todo esto bajo la plataforma blogger.
Son temas que deberías consultar en los foros de desarrollaldores de Facebook. Nada tiene que ver Blogger con eso.
gracias...
He intentado tus pasos y no logró verlo en mi blog. Tendrá algo que ver el diseño elegido?? Pod´rias indicarme en qué partes de las planillas van los códigos??
Planeta Eskoria:
Lo veo perfectamente. Esta es una captura del sector
¿Qué navegador estás usando?
No entiendo como hacerlo... ayuda
Hice todo al pie de la letra. Pero cada vez que hago click en ME GUSTA que esta dentro de mi Facebook Box me aparece ERROR. ¿qué hago?
Este es mi blog.
http://climedentperu.blogspot.com/
Y ahí está, en la izquierda, en la sidebar del blog. No veo problemas.
Una duda, es posible cambiar el color del texto del iframe (el mio sale de color negro con los enlaces en morado/azul)...así como configurar otros aspectos como eliminar el header?
Los IFRAMES no pueden ser cambiados.
como hago para colocarlo en mi blogger no entiendo nada necesito ayuda urgente
Hola:
A mi me aparecen sólo los comentarios escritos en el muro como administrador.
Los comentarios de los fans sí aparecen en la página de facebook pero no en el like box, en like box sólo aparecen los oficiales por decirlo así.
¿no pueden aparecer todos los comentarios de todos los fans en like box?
Gracias.
Este, como todos lso gadgets de Facebook no tienen más opciones que aquellas que se muestran en la misma página y cualquier detalle sobre funcionamiento debe ser consultado con los desarrolladores de Facebook mismo ya que, en nuestras webs, sólo agregamos el código que nos dan y nada más.
hola tengo una duda, como puedo hacer para que el like box al instalarlo de esta manera me salga en español el boton y lo demas datos, otro, porque me aparecen los mensajes o mas bien como puedo eliminarlos y solo me salgan los perfiles(imagenes) y el nombre del sitio. desde el sitio de developer de facebook creo la aplicacion y si desactivo que salga el header y los mensajes , de todas formas me los pone.
gracias
En principio, en español sale cuando colocas el idioma si es usas el script:
'//connect.facebook.net/es_ES/all.js';
si es un iframe, lo debería detectar solo.
Hasta donde se, las opciones puedes controlarlas con los parámetros:
<fb:like-box profile_id="PROFILE_ID" stream="false" header="false">
Hola muy bueno el post, te cuento que yo tengo wl comment-box de facebook, y no puedo cambiarle el color de la letra no me ayudas??? porfa... este es mi blog: www.culturasoundsystem.ar.tc
El contendo no puede ser modificado salvo por las opciones que da el mismo Facebook.
Al parecer, en estos días Facebook ha actualizado el código de su Like Box. Eso ocasionó algunos problemas para nosotros que usamos Blogger (en el recuadro del Like Box aparecía el mensaje: "Sorry, something went wrong"). En todo caso, encontré una solución que hasta ahora me funciona bien. Si agregaron el Like Box siguiendo los pasos descritos por JMiur, tan sólo modifiquen esto:
- En la plantilla HTML de Blogger:
Reemplacen en el código del script justo después de < body > esto: su antiguo numero de su PROFILE_ID por su actual dirección de Facebook. Es decir: '121540012345678' por algo como 'http://www.facebook.com/SuPaginaEnFacebook'
- Luego en el elemento HTML, en la sidebar o donde hayan incrustado el Like Box en su blog, cambian esta parte:
fb:like-box profile_id="PROFILE_ID"
Por:
fb:like-box href="http://www.facebook.com/SuPaginaEnFacebook"
Con eso bastaría para que todo marche bien. Espero les resulte :D
¡Saludos!
Fabricio
Hola, muy bueno el foro, tengo un problema, he intentado con el ID y con el http de facebook de mi pagina y al actualizarlo en la aplicacion de like box no aparece nada?? la verdad que no se que estoy haciendo mal. si me podrian ayudar con esto se los agradeceria.
PD: si instalo el codigo que sale como default esta todo bien es la coneccon con la pagina de facebook que no la reconoce. espero que sirva de algo
windsurfer.cl
Por lo que veo,e stás usando un plugin de Worpress así que deberás verificar si está bien configurado.
una pregunta
Donde se escriben los kodigo o como ago para que aparesca en un costado??
El IFRAME se coloca allí donde quieras que se vea. Si se usa el script, se colcoan donde indica el post.
A mí me sirvió agregando esto al iFrame que te da Facebook:
background-color:#FFFFFF;
Gracias quedo de 10 :p
Hola, me sale en ingles; yo lo quiero en idioma español
Revisa que el script diga esto:
/connect.facebook.net/es_ES/all.js
Hola JMiur.
Sabrías decirme por qué en el Like-Box que he puesto en la página de blogspot, no se agregan más fans y se ha quedado bloqueado en el número 83 de fans, y tiene más fans... Hago pruebas, le doy a me gusta aparece que se agrega pero se actualiza la página y no vuelve aparecer, se queda en el número 83 y aquí http://www.facebook.com/mentenaturaldemoda donde aparecen los fans ni se mueve el 83 para nada y eso que intento agregar probando una y otra vez. Espero que me puedas decir algo... También noto problemas con la aplicación Graffiti, que a veces añade al muro y a veces se bloquea, le hago cosas a la aplicación la conecto, desconecto.. hasta que aparece en el muro lo nuevo...
Por último en los comentarios cuando se escribe una dirección muy larga se sale del espacio establecido como aquí http://mentenaturaldemoda.blogspot.com/2011/01/love-collection-de-swatch-para-san.html#comment-3272101405445133747
¿Se puede arreglar algo?
Muchas gracias. Saludos
Sobre Like-Box nada puedo decirte. Deberías preguntar en los foros de Facebook a ver si alguien sabe cuál puede ser el problema.
RSS Graffiti tiene problemas cuando FB hace cambios y ahí se desconfigura. Estuvo una semana sin funcionar. Antes de hacer cambios, conviene ir a la aplicación y ver si anuncian alguna clase de problema ya que estos suelesn ser publicados o comentados.
Como ves, ese texto largo no se sale del área de comentarios. Debes fijarte en estas dos reglas y agregar la propiedad word-wrap: break-word;:
#main-wrapper {
.......
word-wrap: break-word;
}
}
#sidebar-wrapper{
.......
word-wrap: break-word;
}
Hola yo tengo un problema coloco el likebox en mi pagina pero no aparece nada mas que un pequeño recuadro, Podrian ayudarmen, la direccion de mi pag es **http:// delocura.net16.net ** y el codigo que estoy usando es el siguiente
iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fhome.php%23%21%2Fpages%2FCanalitos%2F149344918462173&width=200&colorscheme=light&show_faces=true&stream=false&header=true&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:62px;" allowTransparency="true"></iframe
Podrian ayudarme porfavor!!!
No veo ningún código colocado en esa página.
hola............ SABES... TODO ME SALE EN INGLES COMO HAGO PARA SACARLO EN ESPAÑOL........ ESPERO SU AYUDA..
Si usas el script, verifica que diga connect.facebook.net/es_ES/all.js en lugar de connect.facebook.net/en_EN/all.js
LLevaba meses intentando que me salieran las fotografias del plug-in sin conseguirlo. Hoy lo he logrado gracias a tu código!!!!!!!!!!!!!!!!!
mil gracias!sinceramente, gracias, gracias, gracias!
Hola como hago para que me aparesca lo que se actualiza en mi muro aparesaca en la parte de arriba de la plataforma.No se se si se entiende lo que pregunto.
hola yo uso el codigo SCRIPT ;me aparecen las personas que le gusta pero no aparece nada en la parte media de la plataforma es decir lo que se actualiza en el muro,no se si siempre que se sube algo al muro aparecera en la plataforma.Gracias.
MI codigo es mas o menos este:
Nada del funcionamiento es posible configurarlo con el código que no es más que lo que acá se muestra o aquello que permiten las opciones del mismo Facebook.
Antes que nada muchisimas gracias por el trukito que lo andaba buscando hace rato ya, ahora la pregunta del millon!
Lo instale y quedo re bien, lo unico es que me aparecen doble los contactos que se agregan, en las imagenes que se muestran, en el conteo esta bien pero las imagenenes se repiten dos veces todas, porque puede ser?
Eso ya no sabría decirte porque no se me ocurre que en el código haya nada que permita controlarlo y puede ser un error circunstancial del mismo Facebook.
Acabo de enviarte un email, respecto a este tema :) Muy util por cierto.
Ya Solucione Mi Problemaa! Gracias De Todas Formas :) mi correo es (jonathan.acroma@hotmail.com) para que no te preocupes en responder :P
no entiendo muy bn como poner el color blanco, me lo puedes explicar con un ejemplo x favor?
Si es necesario, colocas el estilo junto con el resto del CSS de tu plantilla, antes de </b:skin>
#fbfans {
background-color: #FFF;
border: 10px solid #303941;
}
me gustaria que el color fuera transparente, es decir que cogiera todo el widget lo que hay detras del mismo.
si bien eso no fuera posible..
me gustaria elegir una foto de fondo, en colorsheme poder elegir un jpg.
es posible?
Es un IFRAME así que las opciones, son las disponibles por el mismo sistema.
mira man como puedo modificar el mio, el fondo esta en negro y no puedo cambiarlo!!.
Es lo que indica la última parte de esta entrada, colócalo en un DIV con fondo blanco.
hola quisiera poner este like box en un gadget en mi blog lo logre con el iframe solo que no puedo poner el fondo blanco ya que el iframe que me arroja el like box no contiene ninguna etiqueta , lo agrege en un gadget en una opcion que dices HTML/Javascript hay coloque el iframe pero no ce como poner el fonfo blanco y en donde se modifica
Puedes hacerlo del mismo modo que indica el post que se hace con el código de FB:
<div style="background-color: #FFF;">
....... acá el iframe .......
</div>
En el mio no conecta solo se queda un recuadro blanco y nada mas:O
mira mi blog
http://miratuspelisonline.blogspot.com/
ojala puedas ayudarme
No veo problemas, se ve todo normal, Detrezx.
Si ya se soluciono pasando algunas horas, igual muchas gracias
y dejame felicitarte por tu blog :D
Saludos!
Tengo un pequeño problema,hice todo eso y si,me sale,pero los usuarios de facebook que le dieron a "me gusta" salen repetidos,se "duplican".
¿Como puedo arreglar eso? te lo agradecería si me lo dijeras,el like box lo tengo aquí: http://mylittleperfectworld-survine.blogspot.com
Eso no podría responderlo, es un error que deberías consultar con Facebook mismo.
ahora tengo otro problema,ayer tenia 9 personas,ahora no tengo a nadie ñ.ñ ¿porque?
Lo mas raro es que me sale que a 7 amigos les gusta la pagina,pero luego a la izquierda pone 0 clicks en "me gusta" mira: http://www.facebook.com/pages/My-little-perfect-world/331451386865841
necesito ayuda...xD
Como dije antes, es algo que deberás consultar en Facebook mismo.
Muy buena explicación vamos a probarlo garacias por su Apoyo
Muchas gracias por estos posts!!! Me han sido muy utiles (tanto este como el del comment box) :)
Che vos no me lo pondrias en mi blog? no peudo yo
No. de ninguna manera.
Amigo no logro conseguir el resultado que debería botar el la secuencia de pasos descritos :/ no sé qué podría estar haciendo mal. Creo que es la ubicación de los códigos en donde fallo. Mi likebox no se visualiza como deberia o al menos como como he visto en tú página y en otras más. De veras agradecería pudieses ayudarme, mi blog:
http://viejacity.blogspot.com/
Mi likebox quiero está el el sidebar de la derecha pero como podrás ver no se ve bien, tiene errores.
De ante mano, garcias.
Saludos
Viejacity
No veo nada malo ahí.
Buenos días. Cuando agregamos una fotografía en la entrada, el texto se desplaza a la derecha de la caja y queda cortado. Como se puedes solucionar eso? añadiendo una barra de desplazamiento horizontal o configurándolo de alguna manera?
Gracias de antemano
Mustrame un ejemplo poque no veo nada de eso.
En esta página veras el ejemplo del mensaje 72: http://pineda.cup.cat/
Se ve así porque así está pensada esa plantilla. No estoy seguro si te refieres a eso pero, es una plantilla de tipo magazine en donde en el home, las entradas se ven resumidas, el texto a la derecha y con un enlace de leer más o "continua llegint" que permite acceder a la entrada en si misma, y la imagen a la izquierda.
Gracias. Si es eso. Imagino que la plantilla no se debe poder configurar pera ver la barra horizontal? Estaría bien poderlo hacer, por el mismo precio, daría para poder ver la introducción a la noticia, creo que quedaría mejor visualmente.
Te muestro una web donde si se ve la barra horizontal, http://www.esquerra.cat/ . Son plantillas diferentes que no se pueden modificar? Tal vez modificando el ancho? O no va por ahí la cosa?
No veo ninguna barra de scroll en ese sitio; ni en el home ni en al página interior donde se muestran las entradas resumidas de cierta categoría:
http://www.esquerra.cat/actualitat
Perdona el enlace correcto es este: http://www.esquerra.cat
Sigue sin verse ninga barra de scroll. HAz una captura y señala dónde la ves. La única que puede observarse es la del gadget de Facebook pero no hay ninguna otra.
A esa me refiero, la la barra de scroll horizontal. En la pagina que se muestra en el comentario 74, el gadget no tiene scroll horizontal y en la del comentario 78 si que tiene scroll horizontal. ¿Son gadgets diferentes o tal vez es por el ancho de la ventana del gadget?
Haz una captura de l oque ves porque no entiendo a que te refiers con eso de comentario 74 o 78.
Buen día JMiur.
Desde ayer, el Like-Box de Facebook se desplazó de la ubicación normal que tenía en la sidebar de mi blog, http://avibert.blogspot.com:
Muestra
Es un problema de Blogger o de Facebook?
Gracias por cualqier ayuda.
Saludos.
No sé de quien es la culpa :D
Prueba agregar algo así al CSS:
.fb_iframe_widget iframe {position: relative !important;}
Perfecta la solución.
Otra vez mil gracias, :)
Es raro porque no debería ser necesario hacer eso así que recuerda ese cambio por las dudas tengas que borrarlo en algún momento si las cosas vuelven a la normalidad :D
Queda agendado.
Saludos JMiur, :)
gracias x el post!
Que tal estimado. En el blog http://revistastrucoslanas.blogspot.com/ coloqué un Fanbox de Ciudad Blogger luego de intentar con el de Oloblogger y el que está en esta entrada. Luego de probadas me pasa algo muy peculiar que ni Ciudad Blogger y Oloblogger pueden explicarme y tal vez tu puedas.
El problema es que luego de instalar el Fanbox, no logro ver los usuarios salvo que esté conectado a la página del Face que está ligado al Fanbox. Me han dicho que puede ser tema de Permisos de la página de Face, cambié eso permitiendo publicar, pero esto tampoco funciona.
Quisiera conocer tu opinión y si es posible ayuda.
Gracias.
Lo desconozco; tendrás que consultar en Facebook directamente.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...