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='http://3.bp.blogspot.com/-0ydXXdbASA4/UlbMP6XctDI/AAAAAAAANBE/w9z9FF3y5ps/s1600/comentarios-google.gif'/></a></div>
<div id='blog'>
<a class='blogg' href='javascript:show('comments')'><img alt='comentarios blogger' border='0' src='http://2.bp.blogspot.com/-tFYhYwlbXUA/UlbMNa9qTjI/AAAAAAAANA4/D-SOu2qRGiU/s1600/comentarios-blogger.gif'/></a></div>
<div id='face'>
<a class='faceb' href='javascript:show('comentariosFacebook')'><img alt='comentarios facebook' border='0' src='http://4.bp.blogspot.com/-y9s-D8JTI3Q/UlbMPgX-o2I/AAAAAAAANBA/yZEUpHOR9KU/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.
Vía: Amorsevillista
32 comentarios
Juvinao · octubre 21, 2013 a las 6:34 pm
Gabriella muchas gracias por comentar.
Juvinao · octubre 21, 2013 a las 6:47 pm
Amigo tienes que esperar un rato para que las metas que agregaste te validen como Admin
Andrés · octubre 21, 2013 a las 6:52 pm
Si pues opté por crear una aplicación de FB para moderar los comentarios de mi blog y me funciona de maravilla igual gracias SALUDOS !
Sonia Araujo · octubre 22, 2013 a las 10:14 am
en mi blog no aparece lo de
Jonathan LR · octubre 22, 2013 a las 1:35 pm
Penélope, cuál es tu blog?
Juvinao · octubre 22, 2013 a las 7:52 pm
Amiga tal vez se deba a que tu plantilla es hecha con el diseñador de plantillas de Blogger, si es así busca el siguiente código :
Andrés · octubre 24, 2013 a las 9:58 pm
Los de facebook no funcionan ya no se que sea pero ya no se ven ni en el demo pensé que era mi blog pero veo el demo y tampoco funcionan los de Facebook a que se debe ? !!!
diego · octubre 26, 2013 a las 12:13 am
hace unos dias los comentarios de facebook me funcionaban y ahora no a que se debe?
Juvinao · octubre 27, 2013 a las 3:51 pm
Andres pues la verdad no se a que se deba, supongo que el problema radica en el script de facebook, voy a investigar.
Juvinao · octubre 27, 2013 a las 3:51 pm
Segundo usuario que reporta lo mismo, voy a investigar.
Amor Sevillista · octubre 28, 2013 a las 1:16 pm
Lo he solucionado de momento con una chapucilla pero funciona bien, aunque la caja de facebook siempre está visible.
Ver en web original
Adriana Maria Cardona Verano · octubre 28, 2013 a las 2:07 pm
Muy bueno el truco, tengo unas preguntas, se puede dejar alguna de las opciones expandidas por defecto??, otro es que si se puede cambiar el orden de los botones
No se si soy solo yo pero el de Facebook no funciona, no me aparece nada
Amor Sevillista · octubre 28, 2013 a las 2:26 pm
Solucionado modificando el código de facebook.
Ver en blog del autor
Juvinao · octubre 29, 2013 a las 5:06 pm
Adriana la entrada ha sido actualizada y ya funciona la caja de comentarios de facebook, gracias a la ayuda de Amor Sevillista, su creador.
Saludos
Juvinao · octubre 29, 2013 a las 5:07 pm
Diego, la entrada ha sido actualizada.
diego · noviembre 3, 2013 a las 6:12 pm
lo probare gracias 😀
diego · noviembre 3, 2013 a las 9:46 pm
tratando y tratando de buscar «comment_picker» y lo unico que encuentro es este codigo
en el que no me deja pegar los comentarios de facebook debajo de él ayuda por fa
Andres Felipe · noviembre 6, 2013 a las 4:41 pm
y no puedes hacer uno que sea usando los comentarios en vez de plus los de Disqu es es una plataforma buena de comentarios al igual que blogger 🙁 Por favor
CerritoRock · febrero 19, 2014 a las 10:56 pm
Me quedó bastante bien capo… gracias por el aporte negro (Y)
Nika · febrero 21, 2014 a las 11:52 am
Lo acabo de hace y ha quedado genial!
Gracias por tu tutorial!
Un saludo,
Nika
Camilo Fernando Escobar · febrero 22, 2014 a las 2:45 pm
😎
Dylan Pabon · mayo 28, 2014 a las 7:22 pm
Gran aporte…
Alguien me podría decir como agrego la caja de seguidores de google plus, facebook y twitter?
Magical Candy Bunny.♥:!! · junio 2, 2014 a las 7:43 pm
Hola !!! Que tal, de caualidad se podria colocar este gadget en una plantilla clasica de blogger ??
Hayder Juvinao · junio 8, 2014 a las 9:53 pm
Magical podrías indicar en que blog quieres agregar este truco?
Este es el blog de las frases románticas · junio 13, 2014 a las 6:05 pm
Hola, conoces alguna forma de mostrar de primera los comentarios de facebook, osea que aparezca de primero la caja de facebook, no lo he podido encontrar, agradezco si sabes como, teniendo en cuenta que uso el mismo sistema de comentarios que posees tu en las entradas, con facebook y blogger solamente… dejo la dirección para que lo veas… Gracias!!
Nemuri Kuma · julio 4, 2014 a las 5:14 am
Este comentario ha sido eliminado por el autor.
Nemuri Kuma · julio 4, 2014 a las 5:49 am
Hola me ha funcionado, pero a la vez no. No puedo modificar el ancho, por más que le cambie siempre queda a descuadre con mi blog. El ancho es fatal y ni hablar de los botones que están todos hacia la derecha. Te dejo una captura de lo que ocurrió, porque ya lo he quitado↓↓↓
https://lh5.googleusercontent.com/-WX59cbaoqBc/U7ZAHrLI-SI/AAAAAAAAEts/hVcIBKxos3k/w1043-h504-no/anchofatal.png
Mar Goizueta · octubre 8, 2014 a las 10:42 am
Hola, esto es justo lo que andaba buscando para mi blog, pero tengo una duda, yo tengo ya activados los comentarios de Google+ ¿Si hiciera esto perdería los comentarios anteriores de cuando los tenía de blogger y los de Google+ que ya tengo o se conservarían?
Por si sirve de algo para aclararlo, mi blog es http://viviendoalotroladodelespejo.blogspot.com.es/
Gracias
Edwin Moya Feliciano · enero 15, 2015 a las 3:19 am
Solo los administradores de la aplicación pueden editar su configuración. fb:admins solo puede moderar las publicaciones localmente….. No puedo Administrar en Facebook, Como lo soluciono 🙂 gracias
Hayder Juvinao · enero 21, 2015 a las 4:13 pm
Compañero para administrar la aplicación de comentarios de Facebook lo puedes hacer directamente desde Facebook 😉
Saludos
Edwin Moya Feliciano · enero 20, 2015 a las 2:44 am
Cuando piensan Contestarme si No es Mucho Pedir 🙂
Hayder Juvinao · enero 21, 2015 a las 4:15 pm
Ya te respondí amigo 🙂
Saludos