viernes, 22 de marzo de 2013

Insertar caja de comentarios de Facebook en Blogger

En este sencillo tutorial vamos a colocar la caja de comentarios de Facebook en Blogger. Como comenté en el post que explicaba como insertar la caja en wordpress, las ventajas de son que cada vez que un usuario nos deje un comentario se publicará en su muro de facebook junto al enlace de nuestra entrada por lo que ganaremos visitas. Además los usuario suelen estar logueados en facebook por lo que también recibiremos más comentarios.



Actualización:
Blogger ha cambiado el editor de la plantilla y aunque sigue siendo muy parecido, a continuación dejo los pasos de nuevo.:


 1.- Entramos en blogger.com y seleccionamos el blog sobre el que queremos insertar la caja de comentarios
2.- Nos vamos a Plantilla > Editar HTML > Marcamos Plantilla de formato


3.- Buscamos la etiqueta <body> y justo después pegamos el siguiente código:


<div id="fb-root"></div> <script>(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_ES/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>



4.- Ahora buscamos en nuestro código la linea en la que aparezca <div class='post-footer'> Puede que esta linea nos salga dos veces, si es así nos iremos a la segunda aparición y justo después introducimos el código:



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='currentUrll' style='display:none'><data:post.url/></div>
<br/><br/>
<script>
var urll=document.getElementById(&quot;currentUrll&quot;).innerHTML;
document.write(&quot;<div class='fb-comments' data-href='&quot;+urll+&quot;' data-num-posts='8' data-width='500'/>&quot;);
</script>
</b:if>

5.- Guardamos nuestra plantilla y ya tendremos nuestra caja de comentarios Facebook para Blogger





Con el editor antiguo:

Para insertar la caja de comentarios en blogger:

 1.- Entramos en blogger.com y seleccionamos el blog sobre el que queremos insertar la caja de comentarios
2.- Nos vamos a Plantilla > Editar HTML > Expandir plantillas de artilugios
3.- Buscamos la etiqueta <body> y justo después pegamos el siguiente código:


<div id="fb-root"></div> <script>(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_ES/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>


4.- Ahora buscamos en nuestro código la primera linea en la que aparezca <div class='post-footer'> y justo después pegamos lo siguiente:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='currentUrll' style='display:none'><data:post.url/></div>
<br/><br/>
<script>
var urll=document.getElementById(&quot;currentUrll&quot;).innerHTML;
document.write(&quot;<div class='fb-comments' data-href='&quot;+urll+&quot;' data-num-posts='8' data-width='500'/>&quot;);
</script>
</b:if>

5.- Guardamos nuestra plantilla y ya tendremos nuestra caja de comentarios Facebook para Blogger

9 comentarios:

  1. Hola! Es posible que ya no exista la opción Expandir plantilla de artilugios?? Un saludo

    ResponderEliminar
    Respuestas
    1. es verdad, acabo de darme cuenta, veré que cambios son necesarios para poder incluir la caja de comentarios.

      Saludos!

      Eliminar
  2. Muchas gracias! Estaré pendiente porque me corre mucha prisa

    ResponderEliminar
  3. Hola, no puedo ingresarlo ... ahora existe una nueva plantilla de html ... yo tenia mi caja de comentarios ahora ya no aparece la primera parte perfecto copio igual pero lo segundo no :(
    Ademas me sale este mensaje:
    No se ha podido cargar la vista preliminar de la plantilla: Error al analizar XML, línea 1358, columna 35: The element type "b:includable" must be terminated by the matching end-tag "".

    Gracias.
    Mily

    ResponderEliminar
    Respuestas
    1. Hola Mily, ya actualicé esta entrada y lo acabo de probar poniendolo en este mismo blog y no me dio problema. Lo que hice fue entrar a Editar HTML de la plantilla y marcar Plantilla de formato. Una vez marcada introduje los códigos normalmente. ¿Podrías decir cual es tu plantilla para ver si tiene algo distinto?

      En cuanto al error que comentas te esta diciendo que falta la etiqueta de cierre que es ¿Es posible que no la copiaras?

      Comentamos si puedes arreglarlo.

      Saludos!

      Eliminar
    2. Holaaa, desde hace meses intento con tutoriales y no puedo agregar el box ): mi plantilla es predeterminada (LA SIMPLE) editada en Diseño. El problema es que normal puedo agregar los primeros códigos debajo de:
      body expr:class='"loading" + data:blog.mobileClass'>
      (es que no aparece "body") y después ya no hay en mi plantilla:
      - ni: div class='post-footer'>
      - ni: b:includable id='comment-form' var='post'>
      - ni eso de buscar la etiqueta "include>"

      qué puedo hacer? ): gracias!!!

      http://tipsyvalqui.blogspot.com/

      Eliminar
  4. hola que hago si no me aparece la segunda parte para ingresar? el div post foter

    ResponderEliminar
  5. hola que hago si no me aparece la segunda parte para ingresar? el div post foter

    ResponderEliminar