Tutorial: Comentar con Google+, Blogger o Facebook en Blogger + contador de comentarios.

Nelo

Beta
Verificación en dos pasos desactivada
Desde
10 Jun 2014
Mensajes
133
Crédito(s)
4
Puntos
16
Este Tutorial no lo encontré aquí en el foro, si alguien más lo publico pido disculpas y que lo borren.

Sin títuloddd.png

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:post.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:

spermatodj

VIP
Zeta
SEO
Verificación en dos pasos desactivada
Desde
4 Abr 2012
Mensajes
1.541
Edad
31
Crédito(s)
4
Puntos
787
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?.
 

andresl

VIP
Zeta
SEO
Verificación en dos pasos desactivada
Desde
3 Feb 2013
Mensajes
1.733
Crédito(s)
9
Puntos
74
bueno materiar duplicado pero igual para los que no lo sabian buen aporte
 

Naster

Iota
Videoblogger
Verificación en dos pasos desactivada
Desde
7 Ene 2012
Mensajes
2.089
Crédito(s)
1
Puntos
40
No lo habia visto en el foro. De cualquier forma graias por el tuto.
 

kibrot

Dseda
Verificación en dos pasos desactivada
Desde
10 Dic 2012
Mensajes
1.096
Crédito(s)
0
Puntos
290
Muy buen tuto gracias tenía el de facebook pero lo cambiaré por éste
 

webbber

Préstamo
Xi
Redactor
Verificación en dos pasos desactivada
Desde
5 Jul 2010
Mensajes
4.485
Edad
34
Crédito(s)
0
Puntos
207
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+.
 

FranCabrera

Delta
Redactor
Verificación en dos pasos desactivada
Desde
22 Jun 2015
Mensajes
550
Crédito(s)
0
Puntos
301
¿Esto sigue funcionando? ¿Alguien lo tiene en su blogger?
 

Arriba