Comentarios de Google+, Blogger y Facebook en Blogger

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

32 thoughts on “Comentarios de Google+, Blogger y Facebook en Blogger

  • octubre 21, 2013 en 6:34 pm
    Permalink

    Gabriella muchas gracias por comentar.

    Responder
  • octubre 21, 2013 en 6:47 pm
    Permalink

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

    Responder
  • octubre 21, 2013 en 6:52 pm
    Permalink

    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 !

    Responder
  • octubre 22, 2013 en 7:52 pm
    Permalink

    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 :

    Responder
  • octubre 24, 2013 en 9:58 pm
    Permalink

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

    Responder
  • octubre 26, 2013 en 12:13 am
    Permalink

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

    Responder
  • octubre 27, 2013 en 3:51 pm
    Permalink

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

    Responder
  • octubre 27, 2013 en 3:51 pm
    Permalink

    Segundo usuario que reporta lo mismo, voy a investigar.

    Responder
  • octubre 28, 2013 en 1:16 pm
    Permalink

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

    Ver en web original

    Responder
  • octubre 28, 2013 en 2:07 pm
    Permalink

    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

    Responder
  • octubre 29, 2013 en 5:06 pm
    Permalink

    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

    Responder
  • octubre 29, 2013 en 5:07 pm
    Permalink

    Diego, la entrada ha sido actualizada.

    Responder
  • noviembre 3, 2013 en 9:46 pm
    Permalink

    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

    Responder
  • noviembre 6, 2013 en 4:41 pm
    Permalink

    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

    Responder
  • febrero 21, 2014 en 11:52 am
    Permalink

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

    Responder
  • mayo 28, 2014 en 7:22 pm
    Permalink

    Gran aporte…

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

    Responder
  • junio 13, 2014 en 6:05 pm
    Permalink

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

    Responder
  • octubre 8, 2014 en 10:42 am
    Permalink

    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

    Responder
  • enero 15, 2015 en 3:19 am
    Permalink

    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

    Responder
    • enero 21, 2015 en 4:13 pm
      Permalink

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

      Saludos

      Responder

Deja un comentario

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