Como agregar la barra de recomendaciones de Facebook a Blogger
El día de hoy voy compartir
recomnendations bar de Facebook, que traducido al español significa barra de
recomendaciones de Facebook. Con esta nueva innovación de Facebook, podemos
tener más tráfico en nuestro blog, ustedes se preguntara como! pues cada vez
que alguien le da me gusta de Facebook en cualquier artículo de su blog, este
inmediatamente pasa por la App de Facebook y lo convierte en artículos
recomendados, los cuales aparecen en su página web como una pantalla emergente.
Con esto usted puede incrementar todos los días más tráfico en su blog. Yo lo
publique en mi blog y de verdad que te genera más y más tráfico. La instalación
de la barra de recomendaciones de Facebook es muy fácil, lo único que necesita
hacer usted es estar atento a mi tutorial, y vera que funciona.
Comunicado importante:
Lamentablemente este grandioso truco de Facebook
dejo de funcionar el 5 de noviembre del 2014. Los motivos solo Facebook lo
sabe.
Este tutorial queda sin funcionamiento
Vamos a trabajar
1.- Abra la pagina de usuario de
Facebook
Actualización
1 Da un clic en el siguiente enlace
2 Una vez que se haya abierto la ventana
de Facebook te mostrara una nueva ventana como la siguiente
3 Debes dar un clic donde dice Register
now
Become a Facebook Developer to start
creating apps. Register now.
4 Al dar un clic te mostrara una venta
como la siguiente imagen
5 Luego en la parte de abajo activa la
casilla que dice
I accept the Facebook Platform Policy
and the Política de privacidad de Facebook
Mire la imagen
6 Ahora es momento de dar un clic en “Continuar”
mire la imagen
7 Luego de dar un clic en “Continuar”
les mostrara una imagen como la siguiente y en la cual tendrán que insertar su número
de teléfono, para poder recibir el código de verificación al dar un clic en “Continuar”
8 Y te llegara un código de confirmación
en tu teléfono celular e insértalo donde dice “Ingrese el código de confirmación”
y das un clic donde dice “Confirmar”
9 Al confirma el código te mostrara este
mensaje y damos un clic en “Continuar”
10 Otra vez damos un clic en “Continuar”, mire la imagen
11 Y al finalizar te saldrá esta ventana,
en el cual vamos a dar un clic en “Finalizar”
12 Ahora vas a dar un clic en el
siguiente enlace
13 En la cual te mostrara una venta como
la siguiente imagen
14 En este punto debes dar un clic en “Crear
una nueva aplicación”
15 Te mostrara una nueva venta en la
cual tienes que poner el nombre de tu blog, tal como lo tengo puesto yo en la
imagen, y luego le das un clic en “Continuar”
16 Luego te mostrara un cuadro de verificación
el cual tienes que llenar el código de control de seguridad, mira la imagen,
una vez que lo hayas llenado da un clic en “Continuar”
17 Ahora te mostrara una nueva ventana
como la siguiente
Ahora solo copia el código a partir de
donde dice “App ID;” 256095977843225
y guárdalo
en tu blog de notas o Word.
18.- Cuando ya hayas copiado el código en
tu blog de notas o en Word, vuelve a la página de Facebook y con el mouse dirígete
hacia abajo para ver si está bien configurado, en el cual debe aparecerte un
cuadro como este o parecido:
Verifica que este tal como me aparece a
mí en la pantalla de Facebook, si esta tal como se muestra en la foto, es
porque está bien configurado.
Ahora vienen los pasos más sencillos que
he podido conseguir para que lo configures en tu blog de blogger.
19.- Ve a blogger abre “Plantilla”
20.- Primero has una copia de seguridad de
tu plantilla
21.- Luego da un clic donde dice “Editar HTML”
Ahora se te abrirá el editor HTML de tu
plantilla, se mostrara igual como la imagen que esta a continuación
En este punto deberás presionar la tecla
“Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador
integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que
insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación
mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en
tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al
momento que yo diga busca este código.
Busca este código:
<html
|
Y te mostrara
un texto marcado de color verde así, mira la foto:
22.- Borra todo lo que está marcado de color verde y
pega este código en la parte que borraste.
<html xmlns:fb='http://ogp.me/ns/fb#'
|
23.- Luego busca este código con el
buscador que pusiste anteriormente para buscar el código anterior.
<body>
|
24.- Debajo del código <body> pega el siguiente código.
<div id='fb-root'/>
<script> //Facebook Bar Recomendaciones by www.ayudadeblogger.com //<![CDATA[
(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&appId=***************"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
//]]>
</script> |
Ahora, los asteriscos que están marcados
de color amarillo cámbialo por el Id que copiaste anteriormente, por ejemplo
este es mi Id 256095977843225
y el tuyo
sería completamente diferente.
Mira la foto así es como te quedaría:
25.- Ahora da un clic en “Guardar
plantilla”
26.- Dirígete a diseño
27.- Abre “Añadir un Gadget”
Al dar un clic en “Añadir un Gadget” se te va a desplegar una pantalla como esta:
Dale un clic donde dice
“HTML/Javescript”, y se te va a desplegar otro cuadro como este:
Dentro de este cuadro vas a pegar el
siguiente código realizando un solo cambio
<fb:recommendations-bar
href="https://developers.facebook.com/docs/reference/plugins/recommendationsbar/" site="http://www.ayudadeblogger.com/"></fb:recommendations-bar>
|
Al copiar el código
te va aparecer así como esta en la foto.
Ahora solo te resta cambiar donde dice http://www.ayudadeblogger.com/ por la dirección URL de tu blog.
28.- Da un clic en "Guardar" y listo a disfrutar de
tu nuevo widget de Facebook.
Espero haber sido tan explicativo
posible.
Cualquier pregunta no dude en hacérmelo
saber y de inmediato le responderé.
Saludos a todos los usuarios de la red
Blogger.
Si quieres recibir mis tutoriales de
calidad en tu bandeja de entrada, lo único que necesitas hacer es suscribirte
es completamente gratis.
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Que bien webmaster, ya lo hise, de verdad gracias por publicar este gran articulo.
ResponderEliminarNo funciona, en mi caso. Apenas hago clic en la opción “create a new app”, no se despliega cuadro alguno, sólo ...plugins/recommendationsbar/#
ResponderEliminarAyuda?
Hola Ruben ,solucionado. Lo que pasa es que ya tenía una AP, por lo que no te deja crear una nueva.
ResponderEliminarPara los que ya tiene una, comenzar sólo desde el punto 12 y listo.
Ahora otro problema: la aplicación de FB se aplica sólo para la ultima entrada. asi que en mi caso, que publiqué una nota de Cablevisión, sólo recomienda las dos notas relacionadas.
Hola Ruben, muchas gracias por este tutorial. Tenia una caja de recomendación y me daba problemas en algunas entradas. Lo bueno era que podía controlar sus características, tiempo en que apareciera, si aparece después de cierto porcentaje de la entrada, etc.
ResponderEliminar¿Es posible hacer eso con estos códigos? Ya que necesito reducir el tiempo en que aparezcan, ya que algunos de mis artículos son pequeños, no como este que esta genial. Saludos!
Hola Jordan Vicencio:
ResponderEliminarLa linea de tiempo es proporcionada por Facebook, y se ejecuta bajo la app de Facebook. La barra de recomendaciones de Facebook es automatico y se produce al momento que el usuario baja hasta la mitad del post publicado. Te recomiendo que lo dejes tal como esta, o publica aqui la direccion de tu blog para poder observarlo y darte una directriz.
Saludos espero tur respuesta..
Muchas gracias por tu respuesta Luis, la voy a probar de nuevo porque volví al que tenia antes. Pero lo tendré que hacer mañana, ahora debo estudiar para un par de pruebas D:.
ResponderEliminarAquí te dejo el link http://labruteza.blogspot.com/ (si te fijas en las ultimas 2 entradas no aparece la barra de recomendación, pero con tu tutorial si aparecían, pero el problema era ese, que se demoraban mucho en aparecer, quizás no me di cuenta sobre lo que me dices que aparecen automáticamente al pasar por la mitad de la entrada)
Muchas gracias por responder, saludos!
Hola Jordan Vicencio.
ResponderEliminarHe visto tu blog, y vi las ultimas dos entradas, y si aparece la barrra de recomendaciones de Facebook, esta todo bien. Cualquier pregunta no dudes en hacermelo saber.
Saludos..
saludos por q solo m sale una noticia y no tres como tu ejemplo?'
ResponderEliminarHola Adolfo Candia, por que yo tengo incrustado otro codigo en la parte que dice "Dentro de este cuadro vas a pegar el siguiente código realizando un solo cambio", ahi tengo habilitado una secuecia que te permite que aparesca tres a cuatro cuadros de recomendaciones de Facebook, ahora si quieres que te aparesca como mi widget de facebook enviame un email a esta direccion: ayudadeblogger@gmail.com y con mucho gusto te enviare el codigo para que te aparesca como mi cuadro de recomendaciones de facebook.
ResponderEliminarSaludos..
Muy buenas Luis,mi duda es....en mi blog:
ResponderEliminarhttp://football-afa.blogspot.com
los botones de la derecha de "me gusta", "follow" y "google+" no hay forma de encontrar para que ocupen una sola linea,es decir....no tanto espacio,solo un boton de me gusta,uno de facebook y otro de añadir a mis circulos,sin que ocupen 3 o 4 renglones,como me las apaño? hay algun codigo? es que me salen siempre uno debajo del otro pero no encuentro ningun gadget que englobe a los 3,no me refiero a compartir en facebook o tweet el blog,sino a follow,me gusta a la pagina de facebook y agregar a circulos en google+
Un saludo! y espero respuesta!
Hola, buena idea la tuya, cuando lo tenga te lo envio.
ResponderEliminarSaludos.
Gracias!!! (soy el mismo de antes de los gadgets para follow etc etc)
ResponderEliminardeja un comentario cuando los tengas con el enlace para agregarlo :D
espero que sea pronto jeje
Un saludo!
Claro que si encantando en ayudarte.
ResponderEliminarSaludos.
mira cuando le doy click al este enlace que tu colocas: https://developers.facebook.com/apps/ me envia a otro cuadro distinto al que muestras. porque?
ResponderEliminarHola es por que facebook cada vez va cambiando su imagen, ahora cuando abres el link te aparecera esta palabra: App ID/API Key abojo de ella es donde esta tu codigo API.
EliminarEspero lo hayas logrado.
Saludos
Buenas Tardes, Primero imagino que eres Chavez el bueno porque el otro se murio.
ResponderEliminarquisiera consultar yo tengo perfil de usuario y pagina
comence con perfil de usuario (amigos) y estoy tratando de pasarme a pagina pero cuesta se pierde trabajo
tu barra funciona para pagina y como es el codigo para que aparescan tres a cuatro cuadros de recomendaciones de Facebook,
saludos
Hola, no entiendo muy bien tu pregunta, pero si es lo que creo, y solo quieres el codigo para que aparesca 3 o 4 cuadros de remendaciones de facebook. Tendras que enviarme un mensaje directo a mi correo electronio: ayudadeblogger@gmail.com
EliminarExplica tu insidencia y con gusto te enviare el codigo,
Saludos.
Hola Luis, hice exactamente lo que explicas una y otra vez y nunca me funcionó. Desde la pantalla de inicio de la aplicación es distinta y no entiendo por qué usar como URL del sitio "http://developers.facebook.com/docs/reference/plugins/recommendationsbar/" cuando debería de ser la de nuestro blog, sin embargo seguí juso lo que dices y no me funcionó en nada. Ojalá y puedas actualizar el post dado que parece ser que nadie lo tiene actualizado y no podemos usar esta interesante aplicación. Saludos y gracias.
ResponderEliminarPude resolver el problema, pero sí te recomiendo actualizar el tutorial dado que los códigos que proporcionas no son ya funcionales, al menos en blogspot,. Saludos
EliminarHola gracias por hacerme saber sobre este error, ya que facebook a actualizado la forma de poner este truco, ahora lo he actualizado, puedes seguir las instrucciones tal como esta en este post y funciona perfectamente.
EliminarSaludos.