Buscar este blog

14/11/16

Poner la caja de comentarios de Facebook en el blog

Hola a todos
El problema que tenemos mucha gente que tenemos blog es que casi nadie suele comentar usando sus cuentas de e-mail y usa más facebook, asi que lo que te vamos a enseñar es cómo poner la caja de comentarios de Facebook en el blog, ya que resulta más fácil hacerlo desde este medio, y así aumentar la participación de la gente en tu blog.

Esto lo hemos visto instalado en muchos blogs y es la mar de práctico, asi que vamos allá.



Como primer paso entra en la Edición HTML del blog y busca la etiqueta:
<body>
Si usas una plantilla del Diseñador entonces la encontrarás como:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Debajo de cualquiera de ellas agrega esto:

<div id='fb-root'/>
<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 = &quot;//connect.facebook.net/es_LA/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
Después busca esta línea:

<b:includable id='post' var='post'>
Si vieras una flechita ▶ al lado de ella da click para que se expanda ese artilugio. Y justo antes del siguiente </b:includable> agrega esto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='comentariosFacebook'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>
</b:if>
Así se ve el área donde se agrega el código (la parte que está arriba del área marcada en rojo puede variar de plantilla en plantilla)



Con eso ya tendrás la caja de comentarios de Facebook en tus entradas, aparecerán a partir de las próximas entradas que hagas en tu blog y que apareceran los comentarios de Facebook por encima de las de que te dejen en tu blog directamente.
Si quieres que esté debajo del formulario de comentarios entonces el código del plugin ponlo justo arriba de este código:
</div>
<b:if cond='data:post.includeAd'>

Dentro del último código que añadimos veremos estos parámetros:


data-num-posts='5'
data-width='
500'
data-colorscheme='
light'
El primero es el número de comentarios que se mostrarán; el segundo el ancho del formulario; y el tercero el color del formulario, puedes cambiar light por dark

Hasta ahí ya tenemos el
CommentBox de Facebook; si deseas personalizarlo un poco puedes colocar antes de ]]></b:skin> algunos estilos, por ejemplo:

#comentariosFacebook {
background:#F2F2F2;
/* Color de fondo */
width:520px; /* Ancho del contenedor */
padding:10px;
margin-top:0px;
/* Cámbialo por -180px si lo has puesto debajo de los comentarios de Blogger */
}

9 comentarios:

  1. Mmm interesante intentare hacerlo y si no me sale te consulto besos

    ResponderEliminar
  2. ¡Hola guapa!
    Pues si que es verdad que es fácil pero he intentado ponerlo en el blog de pruebas y no me sale /_. Seguiré probando a ver en que fallo :')
    Gracias por el tutorial!

    Besos!
    María |  Cazadores de Libros

    ResponderEliminar
  3. Hola! Me gustaría ver como queda en algún blog y si me gusta lo mismo me paso una tarde intentándolo. Un besazo.

    ResponderEliminar
  4. Hola! Me gustaría ver como queda en algún blog y si me gusta lo mismo me paso una tarde intentándolo. Un besazo.

    ResponderEliminar
    Respuestas
    1. queda como en este blog http://learning-true.blogspot.com.es/, cuando vas a comentar una entrada verás que primero sale lo de facebook y debajo lo de comentarios de blogger

      Eliminar
  5. Hola!! Ostras qué bien!!! Tomo nota y probaré de ponerlo a ver si no la lío jajajaja
    Muchas gracias por el tutorial!
    Un beso!
    Isa
    El Desván de las delicias

    ResponderEliminar
  6. Holitasss..
    Guau!!
    Esto me interesa ya que mi blog es muy nuevo y le faltan detalles.
    Gracias por compartir con los demás.
    Bexuxus

    ResponderEliminar
  7. Ya hablare con ki diseñadora jaja
    Un. Besote

    ResponderEliminar
  8. Madre yo tocar él Htm paso capaz que me cargo él Blog jajaja. Genial entrada y por ayudar a los demás, besos y nos leemos ☺

    Delia---------La guarida de los amantes.

    ResponderEliminar

Gracias por pasarte por Dreaming Graphics y contratar nuestros servicios.
Mail de contacto: susanaescmag@gmail.com