Con anterioridad habíamos visto como
Agregar comentarios de Google Plus conservando los clásicos, pero ahora vamos a ver un truco mucho mejor y el cual consta de
agregar a tu blog los sistemas de comentarios de Google+, Facebook y Blogger dándole al usuario muchas mas posibilidades para comentar.
Para agregar este genial truco a tu blog ve a Plantilla, Editar HTML (* Presionar CTRL + F dentro del editor para activar el cuadro de búsqueda) y busca el siguiente código:
<b:include data='post' name='post'/>
Debajo del anterior código pega lo siguiente:
<b:if cond='data:blog.pageType == "item"'>
<div id='com-header'>
<div align='center' style='padding-top: 5px;font-size: 16px;'><b>Para Comentar Elige el Sistema de Comentario de tu Agrado:</b></div>
</div>
<div class='commentacon'>
<script language='javascript' type='text/javascript'>
function show(id) {
var oc = document.getElementById(id).style;
hide();
oc.display = "block";
}
function hide() {
document.getElementById('gpluscomments').style.display = "none";
document.getElementById('comments').style.display = "none";
document.getElementById('comentariosFacebook').style.display = "none";
}
</script>
<style type='text/css'>
#com-header {width: 550px;margin-left:10px;padding: 2px;float:left;margin-bottom: 10px;text-align: center; }
.commentacon {width: 550px;margin-left:10px; background:#edeaea ;margin-top: 5px; border: 1px solid rgb(229, 229, 229);
border-radius: 3px; }#comments, #comentariosFacebook, #gpluscomments {display:none;}#goog{margin-left:65px;display:block;}#blog{margin-left:210px;margin-top:-45px;} #face{margin-left:355px;margin-top:-45px;}#comentariosFacebook{margin-left:15px;margin-top:10px;}</style>
<div id='goog'>
<a class='googl' href='javascript:show('gpluscomments')'><img alt='comentarios google' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbSdY_3wtJehKQ6DapsfqBitiTn0VO0IEQ9_v8tT-Cx6zZrOB2ByCmW48Wn2D0n890f3Z0MW8mOFWpmJWcJyJOSbrNsD8Re5EbmmENnsa8zqDKPq6xntVNjuS5za3j5nU-uNvtL4jna6k/s1600/comentarios-google.gif'/></a></div>
<div id='blog'>
<a class='blogg' href='javascript:show('comments')'><img alt='comentarios blogger' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl6QbQSx7wfPVab6D31KFsK-kQ4EiGeYOSeaNeTJnpBBA0L9yvVrimtTHwnxd86ita8_egDRrC6x2HrJ770X_7NE7vUBYUwGUw2Ew8eAfUyXNw2WHcZtE_Qq3YXcI6bzOBzhX7ef_713o/s1600/comentarios-blogger.gif'/></a></div>
<div id='face'>
<a class='faceb' href='javascript:show('comentariosFacebook')'><img alt='comentarios facebook' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNVYEZY5m_9HOeP7koAWYk15e4SP1ntpf4cmQ95230CotpSFv2UMpQgVYd8X5lUdq98KqupblY4o_63XV90xmAFFO-1STzwTGDFVpc0ZgW4Qgd-nLeD0d325qj88GtBNPiJecFOcSbrOg/s1600/comentarios-facebook.gif'/></a></div>
<div class='comentarios' id='gpluscomments'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='550' expr:data-href='data:post.url'/>
</div>
<div class='comentarios' id='comentariosFacebook'>
<div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='520' expr:href='data:post.canonicalUrl'/></div>
</div>
</b:if>
Cerca del anterior código se vera otro código similar al siguiente:
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
Justo debajo del anterior código pega lo siguiente:
<b:if cond='data:blog.pageType == "item"'>
<div class='comentarios' id='comentariosFacebook'>
<div class='fb-comments' data-colorscheme='light' data-num-posts='1' data-width='540' expr:href='data:post.url'/></div> </b:if>
Ahora debajo de
<body> agrega lo siguiente:
<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>
Si quieres administrar los comentarios de Facebook agrega lo siguiente justo antes de
<head> <meta content='id perfil facebook' property='fb:admins'/>
<meta content='id pagina facebook' property='fb:page_id'/>
En id perfil facebook e id pagina debes poner la id de tus respectivas cuentas, a continuación te ponemos un generador de id de facebook donde solo tendrás que poner el nombre de usuario o nombre de la pagina.
Ahora solo falta que antes de
</head> pega lo siguiente:
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
Para finalizar guarda los cambios, y si quieres modificar el tamaño de las cajas de comentarios edita los valores resaltados en color azul
width='550' por el valor que quieras.
Esperamos que les haya gustado y sido de utilidad esta genial entrada, y si tienes alguna inquietud o duda comentala que la resolveremos lo mas pronto posible.
Entrada Actualizada el 29 de octubre de 2013, con esta actualización ha vuelto a funcionar la caja de comentarios de Facebook.
Vía: Amorsevillista