Añadir facebook a blogger
Te explicamos cómo integrar tu página de facebook en el blog en unos sencillos pasos.
Si estás viendo este tutorial es porque ya tienes página en facebook y quieres que esa página esté en tu blog para poder poner a tus seguidores de facebook y también poder sumar nuevos seguidores.
En este tutorial te explico cómo integrar la like box de facebook.
Lo primero que tienes que hacer es ir a la siguiente dirección:
https://developers.facebook.com/docs/plugins/like-box-for-pages/
El paso siguiente es poner la dirección de tu página de facebook en la casilla donde pone Facebook Page URL, borra la que aparece por defecto y pega la tuya.
En la casilla de al lado introduce un ancho para tu caja, 250, 300px (ten en cuenta al poner el ancho de la caja de facebook el ancho actual de la columna del blog donde vas a colocarla)
Ahora dale al botón azul que dice Get Code, espera un poco y te sale una pantalla con un código en dos partes, copia la primera parte del código.
Entra a tu blog y en el menú de la izquierda dale a la opción Plantilla/ Editar html, busca en el código html donde empieza la etiqueta <body…….> fíjate bien donde se cierra la etiqueta y dale un par de intros para pegar el primer trozo del código que te ha generado facebook después haz click en guardar plantilla.
El siguiente paso es ir a Diseño y en la parte derecha pinchar en Añadir un gadget. Busca el gadget de Html/Javascript y dale al +. En la casilla del título puedes poner facebook (es para identificarlo) y en la de abajo pega el segundo trozo del código que te ha dado facebook. Dale a guardar y si todo ha ido bien ya tendrás tu like box de facebook integrado en tu blog para que todo el mundo que te visite le pueda dar al me gusta y compartirlo en facebook.
ACTUALIZACIÓN
Si todo ha ido bien ya debe funcionar.
Si tienes alguna duda pudes preguntar intentaré resolverlas en las medida de mis posibilidades 🙂
Enlace relacionados con cómo poner facebook en el blog:
Gracias, gracias!!!!!que bien explicado!!!!!!!
Hola , he seguido todos los pasos y no me aparece nada. Al meter el código en la plantilla me daba error y he corregido lo que me decía pero sigue sin aparecerme nada.
Saludos
Hola Cocó, hay una actualización del post con posibles soluciones, espero te sirva de ayuda
También he seguido todos los pasos y al meter el código en la plantilla me da error. Gracias
Hola Docente, he añadido una actualización al tutorial para solucionar el error de código que da en la plantilla del blog, espero te sirva
A mí me ha pasado lo mismo, da un error
Error al analizar XML, línea 656, columna 64: The reference to entity "version" must end with the ';' delimiter.
Un saludo
Hola Mar, a mi me salia el mismo problema, pero ya detecte el error, cuando sale la ventanita para obtener el codigo, aparecen 4 opciones: HTML5, XFBML, IFRAME, URL. Se tiene que escoger IFRAME y luego solo ir al diseño del blog /Insertar Gadget/ Cuadro de HTML/Javascript y copiar el codigo….espero te ayude
Perfecto Sarah Funciona asi como dices !!!!
Muy buena la explicación!! a los que no les funciona ver la respuesta de Sarah Pacheco, si funciona!
Hola a todos, he añadido una actualización al tutorial con la aportación de Sarah (muchas gracias Sarah) y también os pongo el código de facebook que funciona (el de la parte que hay que poner en el html).
dios , muchas gracias estaba cansada ya de buscar y probar me ha venido genial
donde aparecen las 4 opciones ?
A mí también me da un error:
Error al analizar XML, línea 656, columna 64: The reference to entity "version" must end with the ';' delimiter.
¿Hay solución?. Gracias
Hola Mar, sí que hay solución revisa el post porque he añadido una actualización. Espero que te sirva
Excelente informacion me sirvió muchisimo gracias
Mil graciaaaas! Instalado!
Hola Trini! Yo lo hice con la actualizacion que diste y no tuve problema, pero queria preguntarte, como lo pongo con los post? Gracias por los tutoriales, un beso! 🙂
yo lo hice con la actualización y con el código que da en la primer opción en FB y con el otro "IFRAME" y nada.. solo sale un recuadro pero sin nada
Gracias!!!
Buenisimo aporte, muchas gracias 😀
yo tb hice lo mismo y no me sale nada. ¿Que es lo que tendria que salir en mi blog?
Qué contenta estoy!!! Lo he conseguido, debo admitir que no a la primera, pero con la actualización, sin problema!!
Muchas gracias
A mi no me sale con ninguna opción………………gracias……….un bico
Muchaaaaaas Graciiias!!Me has hecho muy feliz,al fin tengo mi cuadro de facebook en mi blog:D Al principio me daba error con la primera parte pero gracias a la actualizacion ya me salio….mil gracias por tu trabajo
Gracias 😉
Me sirvió, muchas gracias..
Muchas gracias!! Muy buenos tutoriales!!
Gracias por dar solución al error que sale…ya logré poner la cajita 🙂
Super simple, super util! Gracias!
muchas gracias por tu ayudad!
Lo siento pero a mi no me sale lo de IFRAME por ningun sitio 🙁
hola al cambiar la url de ejemplo que viene en facebook developer y poner la de mi facebook no me sale nada podria ayudarme?¿
En principio no se puede usar para páginas personales, es para páginas de organizaciones, empresas, grupos etc. Si tu página es un perfil personal no lo podrás poner
solo es para paginas de fb ? no se puede usar en fb personales ?
Hola, para los perfiles personales no sirve
Gracias 🙂 has sido de gran ayuda!!!
Gracias 😀 me sirvió mucho.
¿Todo eso es gratis?
sip 🙂
Gracias!
grasias me ayudo mucho 😀
No sale IFRAME por ningun lado
Hola Sergio, Facebook ha cambiado la forma en la que pones su código. Ahora ha eliminado esa opción del iframe pero puedes probar cualquiera de las opciones que da más abajo, puedes usar el código que genera siguiendo el tutorial o puedes usar alguno de los códigos opcionales (sólo para la segunda parte del código, la que debes poner en la opción de Diseño- HTML/Javascript) Si te fijas te muestra en su página de developers una serie de opciones para elegir de como quieres mostrar tu página de facebook en el blog, elige la opción que más te guste y sustituye la url que da de ejemplo por la de tu página.
Hola!! Una cosita, se puede poner también que no se quede estática, no sé si me explico. Que te salga cuando estás leyendo el blog por ejemplo??
Gracias
Genial!! Muchas gracias. Tuve que añadir la actualización y va perfecto en mi blog. Muy bien explicado, gracias otra vez.
Muchas gracias, guapa!
¡Hola qué tal!, queria darte las gracias por tus estupendas indicaciones, además se entiende perfectamente. Un saludito guapa 😀
GRACIAS AMIGO TE PASASTE UNA HORA BUSCANDO SOLUCION A ESTO DEL ERROR Y CON EL CODE QUE PONES AKI SI FUNCIONA GRACIAS
Muchísimas gracias!! perfecto!! puedo ponerle fondo transparente?
Gracias por la actualizacion !!!! ha sido genial !
GRACIAS
Estupendo! Pero he tenido que usar tu código pues el de facebook me da error. Por cierto, te dejo aquí mi blog, siempre puedes dar tu opinión tan positiva, y participar. GRACIAS
http://mividaesunfilm.blogspot.com.es/
Muchas gracias!! perfecto post con rectificación funciona perfecto!!
Muchísimas gracias!! Lo he conseguido gracias a tan buena explicación y al código para evitar el error. Gracias!
Besos
Espectacular! funciona muy bien!
¡Muchísimas gracias! Solo aclaro que me salió un error de este tipo "How to fix XML error "The reference to entity "version" must end with the ';' delimiter." y lo solucioné viendo este video: https://www.youtube.com/watch?v=L8QX2usHmqI
Pero luego de eso, me salió todo siguiendo tu blog, muchas gracias. Saludos
Luego
Ahora me pregunto… cómo se hace para añadir estos comentarios que usas en tu blog? Veo que la gente puede usar su cuenta google+ y muchas otras, y aparece automaticamente el avatar del usuario, la fecha y hora, así como un sistema para responder…. ¿cómo se hace esto? En mi caso estoy construyendo un blog privado con php mysql y jquery, no uso wordpress ni blogger ni nada parecido
Gracias Miles, realmente me ha funcionado!!!!
Gracias pude hacerlo
Me ha sido de mucha ayuda este post. gracias.
Ahora cuando copio el codigo en una pagina en blanco y la levanto en mi navegador no me aparece nada.
He estado investigando y me e dado cuenta de que ese codigo que da facebook genera un iframe el cual si lo copias en tu web, trankilamente aparece sin ningun problema. El tema es que el iframe se genera para cada pagina de facebook. asi que tendras que cambiar los nombres para que puedas verlo. Aqui el codigo…
"<(i-frame) class="" src="http://www.facebook.com/v2.4/plugins/page.php?adapt_container_width=true&app_id=&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F44OwK74u0Ie.js%3Fversion%3D41%23cb%3Dfcfe24755e8c0c%26domain%3Dlocalhost%26origin%3Dhttp%253A%252F%252Flocalhost%252Ff3319097b47e6a%26relation%3Dparent.parent&container_width=1350&height=250&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2Fvision.creativa.eventos?fref=ts%2F&locale=es_LA&sdk=joey&show_facepile=true&show_posts=true&small_header=false&width=350" style="border: medium none; visibility: visible; width: 350px; height: 450px;" title="fb:page Facebook Social Plugin" scrolling="no" allowfullscreen="true" allowtransparency="true" name="f2c014ad0bd74f2" frameborder="0" height="250px" width="400px">"
Ahi donde dice vision.creativa….etc etc, cambiale y pon el nombre de tu pagina que sale en la pestaña de direccion. Espero que les sirva.
hola amiga me has salvado la vida ;_; llevo dos meses intentando hacer esto y con el segundo código que pusistes va maravillosamente :'D te mando muchos abrazos ^__^
Yo no podía ponerlo, me marcaba error y hasta que encontré tú actualización. Mil gracias. <3
Muchas gracias. Con tu código de actualización si funciona!
Super bien!!! muchas gracias!
Muchas gracias!!!!!
Me ha servido mucho.
Hola, muchas gracias por el post, me ha costado pero al final lo he conseguido!! sólo que se me ha quedado fuera del margen de mi columna.. le puse un ancho de 250 y ahora hago todos los pasos iguales pero le pongo 100 y no varía sigue igual… se queda raro que sobresalga de lo demás ¿hay alguna forma de corregirlo?? gracias!!!
Muchas gracias por este post, muy clara la explicación… me funsionó con la actualización
Muchas gracias por la información. Los pasos muy claros. Saludos.
Hola Trini,
Por lo que he leído en los comentarios, no es posible vincular un blog con perfiles personales de facebook, así que voy a crearme una página de fans en facebook. Sin embargo, tengo una duda. Si yo vinculo el blog a mi página de fans de facebook, y cuelgo una entrada, podré visualizar en el blog los comentarios y “me gusta” que me pongan en dicha página. Si yo comparto luego dicha entrada de mi página de fans a mi perfil personal, y de nuevo amigos me hacen comentarios o “me gustas”, ¿estos también se podrán visualizar en el blog? ¿Hay alguna manera de que esto sea posible?
¡Muchas gracias!
Muchas Gracias!! Si me ha resultado 🙂
Excelente, logre hacerlo con el código que tu publicaste ya que el que te da FB da un error.
Hola me gustaria tener un Like Box como el que ustedes utilizan en su pagina, como le hago?
MUY AGRADECIDO AMIGO….
Muchas gracias por esta explicación. 🙂
A mi me daba error la primera parte del código, pero al encontrar el código que añades como alternativo, todo perfecto.
Saludos!
Muchas gracias!! muy bien explicado. A mi no me funcionó el primero y tuve que seleccionar el segundo, así que genial todo. Gracias por la información
Gracias!!!.
Muchas Gracias !!!!
https://sebafeels.blogspot.cl/
Me salia error por la versión. Pero pude completar el código, la que va en el y es la siguiente :
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Espero que les sirva. 🙂
Lo siento mucho, pero no funciona. Porque esto lo publicaste hace 4 años. Y ahora las cosas son muy diferentes. Es casi imposible poner un vínculo de tu página FB a tu blog. SINCERAMENTE NO SE PUEDE.
hice todo y solo me muestra el nombre de la pagina y el icono de herramienta llave y destornillador en blanco blog ipasme Acarigua