Como agregar la barra de recomendaciones de Facebook a Blogger


Como agregar la barra de recomendaciones de Facebook a Blogger
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

barra de recomendaciones de facebook dejo de funcionar

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

Como agregar la barra de recomendaciones de Facebook a Blogger

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

Como agregar la barra de recomendaciones de Facebook a Blogger

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


Como agregar la barra de recomendaciones de Facebook a Blogger

6 Ahora es momento de dar un clic en “Continuar” mire la imagen


Como agregar la barra de recomendaciones de Facebook a Blogger

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


Como agregar la barra de recomendaciones de Facebook a Blogger

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


Como agregar la barra de recomendaciones de Facebook a Blogger

9 Al confirma el código te mostrara este mensaje y damos un clic en “Continuar”

Como agregar la barra de recomendaciones de Facebook a Blogger

10 Otra vez damos un clic en “Continuar”, mire la imagen


Como agregar la barra de recomendaciones de Facebook a Blogger

11 Y al finalizar te saldrá esta ventana, en el cual vamos a dar un clic en “Finalizar

Como agregar la barra de recomendaciones de Facebook a Blogger

12 Ahora vas a dar un clic en el siguiente enlace


13 En la cual te mostrara una venta como la siguiente imagen

Como agregar la barra de recomendaciones de Facebook a Blogger

14 En este punto debes dar un clic en “Crear una nueva aplicación


Como agregar la barra de recomendaciones de Facebook a Blogger

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

Como agregar la barra de recomendaciones de Facebook a Blogger

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

Como agregar la barra de recomendaciones de Facebook a Blogger

17 Ahora te mostrara una nueva ventana como la siguiente

Como agregar la barra de recomendaciones de Facebook a Blogger

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:

Como agregar la barra de recomendaciones de Facebook a Blogger
 
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

Como agregar la barra de recomendaciones de Facebook a Blogger

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.

Como agregar la barra de recomendaciones de Facebook a Blogger

Busca este código:

<html


Y te mostrara un texto marcado de color verde así, mira la foto:

Como agregar la barra de recomendaciones de Facebook a Blogger
 
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:

Como agregar la barra de recomendaciones de Facebook a Blogger
 
25.- Ahora da un clic en “Guardar plantilla

26.- Dirígete a diseño

Como agregar la barra de recomendaciones de Facebook a Blogger

27.- Abre “Añadir un Gadget

Como agregar la barra de recomendaciones de Facebook a Blogger
  
Al dar un clic en “Añadir un Gadget” se te va a desplegar una pantalla como esta:

Como agregar la barra de recomendaciones de Facebook a Blogger
 
Dale un clic donde dice “HTML/Javescript”, y se te va a desplegar otro cuadro como este:

Como agregar la barra de recomendaciones de Facebook a Blogger
 
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.

Como agregar la barra de recomendaciones de Facebook a Blogger
 
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
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

20 comentarios:

  1. Que bien webmaster, ya lo hise, de verdad gracias por publicar este gran articulo.

    ResponderEliminar
  2. No funciona, en mi caso. Apenas hago clic en la opción “create a new app”, no se despliega cuadro alguno, sólo ...plugins/recommendationsbar/#

    Ayuda?

    ResponderEliminar
  3. Hola Ruben ,solucionado. Lo que pasa es que ya tenía una AP, por lo que no te deja crear una nueva.
    Para 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.

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

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

    ResponderEliminar
  5. Hola Jordan Vicencio:
    La 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..

    ResponderEliminar
  6. 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:.

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

    ResponderEliminar
  7. Hola Jordan Vicencio.
    He 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..

    ResponderEliminar
  8. saludos por q solo m sale una noticia y no tres como tu ejemplo?'

    ResponderEliminar
  9. Hola 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.
    Saludos..

    ResponderEliminar
  10. Muy buenas Luis,mi duda es....en mi blog:

    http://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!

    ResponderEliminar
  11. Hola, buena idea la tuya, cuando lo tenga te lo envio.
    Saludos.

    ResponderEliminar
  12. Gracias!!! (soy el mismo de antes de los gadgets para follow etc etc)

    deja un comentario cuando los tengas con el enlace para agregarlo :D

    espero que sea pronto jeje

    Un saludo!

    ResponderEliminar
  13. Claro que si encantando en ayudarte.
    Saludos.

    ResponderEliminar
  14. 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?

    ResponderEliminar
    Respuestas
    1. Hola 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.
      Espero lo hayas logrado.
      Saludos

      Eliminar
  15. Buenas Tardes, Primero imagino que eres Chavez el bueno porque el otro se murio.
    quisiera 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

    ResponderEliminar
    Respuestas
    1. 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
      Explica tu insidencia y con gusto te enviare el codigo,
      Saludos.

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

    ResponderEliminar
    Respuestas
    1. Pude 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

      Eliminar
    2. Hola 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.
      Saludos.

      Eliminar