domingo, 2 de octubre de 2011

Comentarios de facebook en blogger, wordpress u otra web

Comentarios de facebook en blogger, wordpress u otra web

En el apartado para desarrolladores de facebook nos dan los códigos para poder realizar diferentes acciones en nuestros blogs o páginas (el botón de "me gusta", la actividad, etc).

Hoy voy a explicar como añadir la opción de que los visitantes a nuestro sitio puedan dejar un comentario utilizando su cuenta de facebook.

El código que facebook nos facilita es muy standar y sirve para que nosotros le indiquemos la URL "a mano", en el caso de un blog, lo interesante es que cada artículo tenga sus propios comentarios, eso no está en la documentación de facebook, por eso traigo aquí estos códigos.

He colgado un vídeo en youtube explicando para que es este código y donde modificarlo en wordpress.

Por defecto obtenemos esté código:

Captura

  • El color rojo indica la URL desde donde se comenta y a donde enlazará facebook al publicar el comentario.
  • El color verde indica el número de comentarios que queremos mostrar (Los siguientes saldrán con números).
  • El color azul indica el ancho de la capa en píxeles.

Para wordpress es muy simple, de nuestro theme bajamos el archivo comments.php y con un editor de texto añadimos el siguiente código (Antes, después o en lugar de los comentarios de wordpress:

<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/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="<?php the_permalink() ?>" data-num-posts="5" data-width="500"></div>

Para blogger, en editar plantilla, en html (expandir artilugios) y justo después de <body> pegamos estás dos líneas de código:

<div id='fb-root' />
<script src='http://connect.facebook.net/es_ES/all.js#xfbml=1'/>

Y en el apartado de comentarios, debajo de <b:include data='post' name='comment-form'/> y antes de  <b:else/> la siguiente parte:

<div id='capaminifacebook'>
<fb:comments colorscheme='light' expr:href='data:post.url' num_posts='5' width='500'/>
</div>

Para cualquier otra web o foro, siempre que el hosting admita PHP este otro código:

<?php
function curPageURL() {
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}
?>
<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/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="<?php echo curPageURL(); ?>" data-num-posts="5" data-width="500"></div>

Recordad siempre poner el número de comentarios y el ancho deseado.

Espero que a alguien le haya resultado útil, puede comentarlo y compartirlo con su facebook.

8 comentarios :

  1. Muy bueno, este lo utilizaremos en nuestra web :)

    ResponderEliminar
  2. Trataré de aplicarlo en "La utopía del día a día" buen trabajo y gracias por compartirlo.

    Un abrazo utópico, Irma.-

    ResponderEliminar
  3. Sí, si sirve http://ciudadblogger.com/2011/12/agregar-la-caja-de-comentarios-de.html

    ResponderEliminar
  4. Un código perfecto.

    En esta linea js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; cambio el en_US por es_ES y aparece en Español.

    ResponderEliminar
  5. Ostras, es cierto jaja Gracias Forosm :)

    ResponderEliminar
  6. Hola Minipunk! He puesto la caja de comentarios de facebook tal y como indicas y se instaló perfectamente. El tema es que cuando alguien hace un comentario del propio blog, la caja desaparece, y solo se ven los coments que se han ingresado por google. ¿Sabes si tiene que ver con algo de los comentarios anidados? Si es así, me gustaría saber qué debo hacer o añadir para que no me ocurra ese problema, puesto que muchos de los comentarios que me dejan en el blog son los de facebook. Veo que tú tienes los comentarios anidados además de los de face, igual puedes ayudarme. Muchas gracias de antemano y saludos! Mi blog es infectadosblog.blogspot.com

    ResponderEliminar

Deja tu comentario.
Si sólo quieres mostrar tu nombre elige (Nombre/url) y deja en blanco el campo de url.