Tutorial: Agrega opciones de comentarios y contador en tu blog de Blogger

  • Autor Autor Nelo
  • Fecha de inicio Fecha de inicio
Nelo

Nelo

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Este Tutorial no lo encontré aquí en el foro, si alguien más lo publico pido disculpas y que lo borren.

Sin títuloddd.webp

COMO HACERLO

Paso # 1: Has copia de seguridad de tu plantilla! (en caso de que algo salga mal)
Paso # 2: Ve a Plantilla >> Editar HTML (* Click dentro del Editor después Presione CTRL + F para activar el cuadro de búsqueda) y buscar el siguiente código:

HTML:
<b:include data='post' name='post'/>

Paso # 3: debajo del codigo anterior agrega el siguiente código:

HTML:
<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('gpluscomments').style.display = &quot;none&quot;;
document.getElementById('comments').style.display = &quot;none&quot;;
document.getElementById('comentariosFacebook').style.display = &quot;block&quot;;
}
</script>
<style type='text/css'>#gpluscomments{margin-left:10px}
#com-header {width: 550px;margin-left:10px;padding: 2px;float:left;margin-bottom: 10px;text-align: center; }
.commentacon {background:#edeaea;width: 550px;margin-left:10px; margin-top: 5px; } #comments, #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>
<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>
</b:if>

Paso # 4: Acontinuación veremos estas líneas:

HTML:
<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>

Depues de ellas, colocamos la caja de facebook:

<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😛ost.url'/></div> </b:if>

Configurar ancho de la caja:

En el código puedes observar en rojo el ancho de la caja, si no se adapta a sus necesidades, con aumentar o disminuir lo solucionan.
El ancho de la caja de Facebook lo marca: data-width='540'.

Paso # 5: Ahora para que funcione la caja de comentarios de facebook hay que localizar la etiqueta <body> y justo debajo insertar el siguiente código:

HTML:
<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>


Con esto Terminamos de Colocar las Cajas de Comentarios de Google+, Blogger y Facebook

Paso # 6: Instalar el Contador de Comentarios

buscar el siguiente código:

HTML:
<div id='com-header'>

Paso # 7: debajo de esa linea agrega el siguiente código:

HTML:
<div class='comments-count-blo-goo'>
<div align='center'>
<div class='comment-google'><div class='g-commentcount' data-color='#666666' data-font-family='arial' data-font-size='13px' data-preexisting_count='0' expr:data-href='data:post.url'/></div>
<div class='comment-blogger'><data:post.numComments/> comentarios</div>
<div class='comment-facebook'><fb:comments-count expr:href='data:post.url'/> Comentarios</div>
</div>
</div>
<style>.comments-count-blo-goo {padding: 5px;margin-left:10px;background: rgb(248, 248, 248); margin-top: 5px; border: 1px solid rgb(229, 229, 229);border-radius: 3px; line-height: normal; vertical-align: top; font-size: 13px; font-family: arial; margin: 0 2px 15px 10px; }
.comment-blogger, .comment-google, .comment-facebook { padding-left: 18px; height: 16px; display: inline-block; width: 110px; }
.comment-blogger { background: url(&quot;//www.blogger.com/img/logo-16.png&quot;) no-repeat; background-size: 14px;}
.comment-google {background: url(&quot;//www.google.com/images/icons/ui/gprofile_button-16.png&quot;) no-repeat;background-size: 14px; vertical-align: top; line-height: normal;}
.comment-facebook { background: url(&quot;http://2.bp.blogspot.com/-rae4j6NaLkY/T1JrjUEIkkI/AAAAAAAAGBc/PzwMIo1g1Is/s400/fbcomment.png&quot;) no-repeat; background-size: 14px; vertical-align: top; line-height: normal;}
.comment-total { font-size: 13px; vertical-align: top; display: inline-block; }
.comment-total div, .comment-google div, .comment-facebook div { vertical-align: top !important; } </style>

Paso # 8: Ahora presione el botón "GUARDAR PLANTILLA" y ya está todo hecho. Enhorabuena

**Si esto no funciona ...

Puede que no tenga las bibliotecas jQuery instaladas en su plantilla. Para agregarlas Copia / pega el siguiente código y agregarlo a la plantilla justo antes de </head>

HTML:
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

Con esto ya tendremos funcionando el número de comentarios de cada Red Social en nuestros blogs y las caja de comentarios.

Lo pueden ver funcionando en mi blog: Aquí

Credito al creador: Comentar con Google+, Blogger o Facebook en Blogger. - Amor Sevillista <---- aquí el original.
 
Última edición:
Gracias por el tuto, aprovecho para consultar si alguien sabe como implementar los comentarios de gogole + en wordpress sin plugin, alguien tiene el código?.
 
Normal amigo, solo te lo digo porque te pueden eliminar el tuto 😎
Se me paso amigo pido disculpas y ya he agregado los créditos correspondientes..
 
Guardado en favoritos 😉
 
bueno materiar duplicado pero igual para los que no lo sabian buen aporte
 
No lo habia visto en el foro. De cualquier forma graias por el tuto.
 
Muy buen tuto gracias tenía el de facebook pero lo cambiaré por éste
 
interesante, no sabia que para blogger se podia, pero igual es mejor ofrecer unicamente una opcion de comentarios dependiendo de tu publico o el sitio web. En muchos casos es mejor usar los comentarios de FB (deportes, humor, graficos, videos, etc) y en otros, si los lectores tienen conocimiento de internet y blogs, es mejor G+.
 
¿Esto sigue funcionando? ¿Alguien lo tiene en su blogger?
 
Gracias por la explicación!
 
Atrás
Arriba