Mil Trucos Blogger

Comentarios de Google+, Blogger y Facebook en Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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 == &quot;item&quot;'>
<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 = &quot;block&quot;;
}
function hide() {
document.getElementById(&#39;gpluscomments&#39;).style.display = &quot;none&quot;;
document.getElementById(&#39;comments&#39;).style.display = &quot;none&quot;;
document.getElementById(&#39;comentariosFacebook&#39;).style.display = &quot;none&quot;;
}
</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(&apos;gpluscomments&apos;)'><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(&apos;comments&apos;)'><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(&apos;comentariosFacebook&apos;)'><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 == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>

Justo debajo del anterior código pega lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 

0
Shares
Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

32 Comentarios

  1. Juvinao Juvinao
    Octubre 21, 2013    

    Gabriella muchas gracias por comentar.

  2. Juvinao Juvinao
    Octubre 21, 2013    

    Amigo tienes que esperar un rato para que las metas que agregaste te validen como Admin

  3. Andrés Andrés
    Octubre 21, 2013    

    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 !

  4. Sonia Araujo Sonia Araujo
    Octubre 22, 2013    

    en mi blog no aparece lo de

  5. Octubre 22, 2013    

    Penélope, cuál es tu blog?

  6. Juvinao Juvinao
    Octubre 22, 2013    

    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 :

  7. Andrés Andrés
    Octubre 24, 2013    

    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 ? !!!

  8. diego diego
    Octubre 26, 2013    

    hace unos dias los comentarios de facebook me funcionaban y ahora no a que se debe?

  9. Juvinao Juvinao
    Octubre 27, 2013    

    Andres pues la verdad no se a que se deba, supongo que el problema radica en el script de facebook, voy a investigar.

  10. Juvinao Juvinao
    Octubre 27, 2013    

    Segundo usuario que reporta lo mismo, voy a investigar.

  11. Amor Sevillista Amor Sevillista
    Octubre 28, 2013    

    Lo he solucionado de momento con una chapucilla pero funciona bien, aunque la caja de facebook siempre está visible.

    Ver en web original

  12. Octubre 28, 2013    

    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

  13. Amor Sevillista Amor Sevillista
    Octubre 28, 2013    

    Solucionado modificando el código de facebook.
    Ver en blog del autor

  14. Juvinao Juvinao
    Octubre 29, 2013    

    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

  15. Juvinao Juvinao
    Octubre 29, 2013    

    Diego, la entrada ha sido actualizada.

  16. diego diego
    Noviembre 3, 2013    

    lo probare gracias 😀

  17. diego diego
    Noviembre 3, 2013    

    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

  18. Andres Felipe Andres Felipe
    Noviembre 6, 2013    

    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

  19. Febrero 19, 2014    

    Me quedó bastante bien capo… gracias por el aporte negro (Y)

  20. Febrero 21, 2014    

    Lo acabo de hace y ha quedado genial!
    Gracias por tu tutorial!
    Un saludo,
    Nika

  21. Febrero 22, 2014    

    😎

  22. Mayo 28, 2014    

    Gran aporte…

    Alguien me podría decir como agrego la caja de seguidores de google plus, facebook y twitter?

  23. Junio 2, 2014    

    Hola !!! Que tal, de caualidad se podria colocar este gadget en una plantilla clasica de blogger ??

    • Junio 8, 2014    

      Magical podrías indicar en que blog quieres agregar este truco?

  24. 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!!

  25. Julio 4, 2014    

    Este comentario ha sido eliminado por el autor.

  26. Julio 4, 2014    

    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

  27. Octubre 8, 2014    

    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

  28. Enero 15, 2015    

    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

    • Enero 21, 2015    

      Compañero para administrar la aplicación de comentarios de Facebook lo puedes hacer directamente desde Facebook 😉

      Saludos

  29. Enero 20, 2015    

    Cuando piensan Contestarme si No es Mucho Pedir 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo