:::: MENU ::::
  • Desarrollo Web - Responsive Design

  • Easy to Customize

  • Customizable fonts.

domingo, 28 de abril de 2013

Ahora aprenderemos  a  agregar el Plugin de comentarios de Facebook de manera que cada entrada tenga su propia caja de comentarios y sea independiente a las demás.


Antes de empezar asegúrate de tener los comentarios debajo de las entradas, pues el plugin lo pondremos en esa área así que es necesario tener los comentarios incrustados debajo de los posts.

Ahora sí, como primer paso entra en la Edición HTML del blog y marca la casilla Expandir plantillas de artilugios, luego 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 parte:

</b:includable>
<b:includable id='status-message'>

Y justo arriba de ella pega esto:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<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>

Con eso ya tendrás la caja de comentarios de Facebook en tus entradas (recuerda que debes ingresar a un post para poder verla).
La caja estará arriba de los comentarios de Blogger. 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 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 del contenedor */
width:520px; /* Ancho del contenedor */
padding:10px;
margin-top:0px; /* Cámbialo por -180px si lo has puesto debajo de los comentarios de Blogger */
}


Si quieres que cada vez que alguien haga un comentario te llegue una notificación de Facebook, y puedas moderar los comentarios, será necesario que crees una aplicación. Pero para ello es necesario tener verificada la cuenta de Facebook.

Si es así, entra a Facebook Developers y haz clic en el botón Crear nueva aplicación.


Ahí escribe el nombre de la aplicación, acepta los términos y clic en Continuar.



En la siguiente pantalla haz click en Sitio web, ahí escribe la URL de tu blog donde lo pondrás; también copia el número que está en App ID.

Ahora entra de nuevo en la Edición HTML de tu blog y pega antes de </head> esto:

<meta content='ID de USUARIO' property='fb:admins'/>
<meta content='ID de APLICACIÓN' property='fb:app_id'/>

En la ID de aplicación agrega la serie de números que copiaste. Y en ID de usuario agrega tu ID de Facebook, sino lo conoces ingresa a este enlace:

http://graph.facebook.com/usuario

Cambia donde se indica tu nombre de usuario y da click, ahí verás cuál es la ID de tu usuario de Facebook.

Una vez hecho eso ingresa a una entrada para ver tu caja de comentarios y dale clic en Configuración. Ahí verás varias opciones del plugin; en donde dice Moderadores, agrega tu nombre y guarda los cambios.

Una vez habiendo hecho todo lo anterior podrás moderar los comentarios y recibirás las notificaciones en tu cuenta de Facebook cada vez que alguien haga un comentario. Sino lo haces podrás seguir teniendo tu caja de comentarios de Facebook pero sin estas opciones.


8 comentarios:

  1. hola, hice bien la primera parte, pero la segunda no me salió :(
    no encontré este código en mi plantilla:


    ayuda please. Uso la plantilla de blogger, no tengo body, sino body expr:class='"loading" + data:blog.mobileClass'

    gracias.

    ResponderBorrar
    Respuestas
    1. No importa si tienes: " body expr:class='"loading" + data:blog.mobileClass' " ... eso se debe a que usas una plantilla de diseñador "blogger" solo pega el código que te indica despues del cierre de la etiqueta como se muestra en el post.

      P.D.: Veo que no salio el código que trataste de poner en el comentario, te recomiendo que lo conviertas a texto y trates de ponerlo ahora asi en el comentario para poder observarlo.

      Saludos!

      Borrar
  2. hola todo esta bien, pero queremos que solo salga esa caja de facebook en las entradas nada mas que no salgan en las paginas etc.

    ResponderBorrar
    Respuestas
    1. http://tutoriales2010.blogspot.mx/2013/09/caja-de-comentarios-de-facebook-en-las.html

      :d

      Borrar
  3. hola tambien me esta pasando lo siguiente:

    cuando entro a una etiqueta / categoria, la caja de comentarios de facebook me sale por fuera de los post. que hago ayuda que hago????

    "search/label/Audios" cuando este en alguna categoria.

    ResponderBorrar
    Respuestas
    1. Espero que esta sea tu respuesta amigo... me cuentas como te fue :>)

      http://tutoriales2010.blogspot.mx/2013/09/caja-de-comentarios-de-facebook-en-las.html

      Saludos, gracias por tus comentarios.

      Borrar
  4. La explicación de la caja de comentarios esta completisima y se los agradezco, pero la de recibir notificaciones cada que alguien deje un comentario en el blog no está nada claro y la verdad no le entiendo.

    Creo que les está haciendo falta la inserción de algún código o algo así en el cuerpo de Html, por que la verdad cuando comentan en mi blog no recibo notificaciones e hice justo lo que dice en su tutorial.

    Saludos.

    ResponderBorrar
    Respuestas
    1. Amigo a mi me funciona a la perfección, que paso no te quedo claro? para poderte ayudar. :P Gracias por tus comentarios.

      Borrar

¿Necesitas una pagina web? Contáctanos