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
134
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.573
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?.
 

Souhiro

Delta
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
12 Nov 2013
Mensajes
667
Edad
28
Normal amigo, solo te lo digo porque te pueden eliminar el tuto :cool:
Se me paso amigo pido disculpas y ya he agregado los créditos correspondientes..
 

RaikND

Zeta
Social Media
Verificación en dos pasos desactivada
Desde
10 Sep 2013
Mensajes
1.626
Guardado en favoritos ;)
 

andresl

VIP
Zeta
SEO
Verificación en dos pasos desactivada
Desde
3 Feb 2013
Mensajes
1.862
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.088
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.102
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.484
Edad
35
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
552
¿Esto sigue funcionando? ¿Alguien lo tiene en su blogger?
 

Arriba