JMiur [E]

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:


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:
<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:

Esteban  

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!!

Responder
JMiur  

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.

Responder
Andres Fanatico  

Me sale un error, me puedes indicar en cual body lo coloca, es que en la plantilla aparece un diferente

Gracias

Responder
JMiur  

Andres:
Una página web sólo tiene una etiqueta <body> así que no puede ser que haya varias.

Responder
sandru3  

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

Responder
MeLiSsSsA  

No puedo cambiar el color a blanco... donde pongo el codigo de color? en el DIV? en que parte exactamente... gracias! :-D

Responder
JMiur  

¿Has agregado esto?

#fbfans { background-color: #FFF; }

Eso establece el color de fondo del widget.

Responder
diego  

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

Responder
JMiur  

En cualquier parte del CSS, por ejemplo, antes de </b:skin>

Responder
Kalco  

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.

Responder
JMiur  

Son temas que deberías consultar en los foros de desarrollaldores de Facebook. Nada tiene que ver Blogger con eso.

Responder
Kalco  

gracias...

Responder
Planeta Eskoria  

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??

Responder
JMiur  

Planeta Eskoria:
Lo veo perfectamente. Esta es una captura del sector
¿Qué navegador estás usando?

Responder
Arkangell7mx  

No entiendo como hacerlo... ayuda

Responder
Rafael Orlando  

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/

Responder
JMiur  

Y ahí está, en la izquierda, en la sidebar del blog. No veo problemas.

Responder
Kinoko Power  

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?

Responder
JMiur  

Los IFRAMES no pueden ser cambiados.

Responder
GOURMET  

como hago para colocarlo en mi blogger no entiendo nada necesito ayuda urgente

Responder
AstroAlcalá  

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.

Responder
JMiur  

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.

Responder
luigisfashions  

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

Responder
JMiur  

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">

Responder
Sound System - Cultura en radio  

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

Responder
JMiur  

El contendo no puede ser modificado salvo por las opciones que da el mismo Facebook.

Responder
Sad-Bastard-Music.com  

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

Responder
admin  

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

Responder
JMiur  

Por lo que veo,e stás usando un plugin de Worpress así que deberás verificar si está bien configurado.

Responder
simpleXnecromancia  

una pregunta

Donde se escriben los kodigo o como ago para que aparesca en un costado??

Responder
JMiur  

El IFRAME se coloca allí donde quieras que se vea. Si se usa el script, se colcoan donde indica el post.

Responder
Andrea  

A mí me sirvió agregando esto al iFrame que te da Facebook:

background-color:#FFFFFF;

Responder
3-M-i-L-i-0  

Gracias quedo de 10 :p

Responder
Huayano  

Hola, me sale en ingles; yo lo quiero en idioma español

Responder
JMiur  

Revisa que el script diga esto:
/connect.facebook.net/es_ES/all.js

Responder
MENTE NATURAL DE MODA  

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

Responder
JMiur  

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;
}

Responder
***PªNt3R@***  

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!!!

Responder
JMiur  

No veo ningún código colocado en esa página.

Responder
Diego  

hola............ SABES... TODO ME SALE EN INGLES COMO HAGO PARA SACARLO EN ESPAÑOL........ ESPERO SU AYUDA..

Responder
JMiur  

Si usas el script, verifica que diga connect.facebook.net/es_ES/all.js en lugar de connect.facebook.net/en_EN/all.js

Responder
V  

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!

Responder
CUADEC  

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.

Responder
CUADEC  

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:

Responder
JMiur  

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.

Responder
MaX  

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?

Responder
JMiur  

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.

Responder
Eligor!  

Acabo de enviarte un email, respecto a este tema :) Muy util por cierto.

Responder
Eligor!  

Ya Solucione Mi Problemaa! Gracias De Todas Formas :) mi correo es (jonathan.acroma@hotmail.com) para que no te preocupes en responder :P

Responder
thony  

no entiendo muy bn como poner el color blanco, me lo puedes explicar con un ejemplo x favor?

Responder
JMiur  

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;
}

Responder
rrrrr  

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?

Responder
JMiur  

Es un IFRAME así que las opciones, son las disponibles por el mismo sistema.

Responder
megadownload  

mira man como puedo modificar el mio, el fondo esta en negro y no puedo cambiarlo!!.

Responder
JMiur  

Es lo que indica la última parte de esta entrada, colócalo en un DIV con fondo blanco.

Responder
carlos rguez  

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

Responder
JMiur  

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>

Responder
Detrezx  

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

Responder
JMiur  

No veo problemas, se ve todo normal, Detrezx.

Responder
Detrezx  

Si ya se soluciono pasando algunas horas, igual muchas gracias
y dejame felicitarte por tu blog :D

Saludos!

Responder
Juan Manuel Romera  

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

Responder
JMiur  

Eso no podría responderlo, es un error que deberías consultar con Facebook mismo.

Responder
Juan Manuel Romera  

ahora tengo otro problema,ayer tenia 9 personas,ahora no tengo a nadie ñ.ñ ¿porque?

Responder
Juan Manuel Romera  

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

Responder
JMiur  

Como dije antes, es algo que deberás consultar en Facebook mismo.

Responder
HotelyRumba  

Muy buena explicación vamos a probarlo garacias por su Apoyo

Responder
Juanola  

Muchas gracias por estos posts!!! Me han sido muy utiles (tanto este como el del comment box) :)

Responder
Tremendos Krew  

Che vos no me lo pondrias en mi blog? no peudo yo

Responder
JMiur  

No. de ninguna manera.

Responder
viejacity  

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

Responder
JMiur  

No veo nada malo ahí.

Responder
reagrupamentpineda  

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

Responder
JMiur  

Mustrame un ejemplo poque no veo nada de eso.

Responder
reagrupamentpineda  

En esta página veras el ejemplo del mensaje 72: http://pineda.cup.cat/

Responder
JMiur  

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.

Responder
reagrupamentpineda  

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?

Responder
JMiur  

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

reagrupamentpineda  

Perdona el enlace correcto es este: http://www.esquerra.cat

JMiur  

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.

reagrupamentpineda  

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?

JMiur  

Haz una captura de l oque ves porque no entiendo a que te refiers con eso de comentario 74 o 78.

Responder
Manfenix  

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.

JMiur  

No sé de quien es la culpa :D

Prueba agregar algo así al CSS:

.fb_iframe_widget iframe {position: relative !important;}

Manfenix  

Perfecta la solución.
Otra vez mil gracias, :)

JMiur  

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

Responder
Manfenix  

Queda agendado.
Saludos JMiur, :)

Responder
S73b4n  

gracias x el post!

Responder
ELSACERDOTE2011  

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.

JMiur  

Lo desconozco; tendrás que consultar en Facebook directamente.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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

 
CERRAR