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:
- 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.
Muy bueno, este lo utilizaremos en nuestra web :)
ResponderSuprimirTrataré de aplicarlo en "La utopía del día a día" buen trabajo y gracias por compartirlo.
ResponderSuprimirUn abrazo utópico, Irma.-
ia no sirve para blog Dx
ResponderSuprimirSí, si sirve http://ciudadblogger.com/2011/12/agregar-la-caja-de-comentarios-de.html
ResponderSuprimirUn código perfecto.
ResponderSuprimirEn 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.
Ostras, es cierto jaja Gracias Forosm :)
ResponderSuprimir