Hace poco Google+ integró sus comentarios en Blogger, pero no a muchos les agrada la idea que para comentar nos obliguen a registrarnos en Google plus, por ello, con este sistema que propongo mantenemos los comentarios de Blogger tal como los tenemos, pero añadiremos los de Google+abriéndolos en la misma página de la entrada. Además, no es necesario conectar el blog con Google+.
COMO HACERLO
Paso # 1: Copia de seguridad de la plantilla!
Paso # 2: Plantilla >> Editar HTML (* Pulse Dentro Editor * Presione CTRL + F para activar el cuadro de búsqueda)
buscar el siguiente código:
<b:includable id='threaded_comments' var='post'>
.
.
.
.
.
</b:includable>
Paso # 3:Reemplace por el siguiente código:
<b:includable id='threaded_comments' var='post'>
<center><div id='comment-header'>
<img id='comments-norm' class='comment-on' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8cbnn53CDSE_egQBzLHPOmyzkEbNsy1ok03qezrOCR0k0vuCP296s5-5HKu3v41v6eJ73Q1W0wErFx8H6RfGdQepizfFgf2xLDv1OsNtGSDGj4njjvW_-zjyQ-xJe2z5WsthHJfVxNrMs/s50/blogger_on.png' title='Ver Comentarios Blogger' /> <img src='https://lh6.googleusercontent.com/-qw3D17W21rM/UauDftq1BUI/AAAAAAAAL5Q/hE1kz4Wh1to/w400-h53-no/COMENTA.gif'/><image id='comments-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifO8rfRnhJTgR8i-IrHr3l4ts686rXf_Dlws4491No9cGBDCwHxaUPIBj_bMdouqjPRZKmn_FtALAtHy_jKghJa3utjzPTI1z9PH9MBOjs1CEhqaX_3k7U6Kst6X6O4TeUfDwZ93Jjv2r8/s50/plus_off.png' title='Ver Comentarios Google+' />
</div></center>
<div id='comment-zone'>
<div class='comments' id='comments'>
<a name='comments'/>
<h4><data:post.commentLabelFull/>:</h4>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
<div id='gcontainer'><div id='gcomments'/></div>
<script src='https://apis.google.com/js/plusone.js'>{lang: 'es'}</script>
<script>
gapi.comments.render('gcomments', {
href: window.location,
width: '620',
first_party_property: 'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
$('#comments-norm').click(function(){
$('#gcontainer').css('display','none');
$('#comments').css('display','block');
$('#comments-norm').addClass('comment-on');
$('#comments-gplus').removeClass('comment-on');
$('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8cbnn53CDSE_egQBzLHPOmyzkEbNsy1ok03qezrOCR0k0vuCP296s5-5HKu3v41v6eJ73Q1W0wErFx8H6RfGdQepizfFgf2xLDv1OsNtGSDGj4njjvW_-zjyQ-xJe2z5WsthHJfVxNrMs/s50/blogger_on.png');
$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifO8rfRnhJTgR8i-IrHr3l4ts686rXf_Dlws4491No9cGBDCwHxaUPIBj_bMdouqjPRZKmn_FtALAtHy_jKghJa3utjzPTI1z9PH9MBOjs1CEhqaX_3k7U6Kst6X6O4TeUfDwZ93Jjv2r8/s50/plus_off.png');
});
$('#comments-gplus').click(function(){
$('#comments').css('display','none');
$('#gcontainer').css('display','block');
$('#comments-norm').removeClass('comment-on');
$('#comments-gplus').addClass('comment-on');
$('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihTCn_8phwe8RunM_NtabkuPI4dzMAA8ZytEHt84o6eC8t7waVgQFsjdUKktvh0XOLl1ukWEn2Lo5fl-Y0eypRMeJzIDBaUZdSBe7Qnm5GzkyoyomuJ73oqViMCcFP2nm0mDt75aBu4YR4/s50/blogger_off.png');
$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfb2P6lOrcTzV1gfVV99VVEv6aC05NSzMBiVO4rYuVJo4vybFhBSHSOKmijz4t_W8cxkfFdA6O-jVsPlPzirvrY5D5UrUO1AG7AWoDobyoSoSjG9uuDZR02Yvew3xEa05Bg1vwvcubfWNq/s50/plus_on.png');
});
$('#comments-norm').hover(
function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8cbnn53CDSE_egQBzLHPOmyzkEbNsy1ok03qezrOCR0k0vuCP296s5-5HKu3v41v6eJ73Q1W0wErFx8H6RfGdQepizfFgf2xLDv1OsNtGSDGj4njjvW_-zjyQ-xJe2z5WsthHJfVxNrMs/s50/blogger_on.png');}
}, function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihTCn_8phwe8RunM_NtabkuPI4dzMAA8ZytEHt84o6eC8t7waVgQFsjdUKktvh0XOLl1ukWEn2Lo5fl-Y0eypRMeJzIDBaUZdSBe7Qnm5GzkyoyomuJ73oqViMCcFP2nm0mDt75aBu4YR4/s50/blogger_off.png');}
}
);
$('#comments-gplus').hover(
function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfb2P6lOrcTzV1gfVV99VVEv6aC05NSzMBiVO4rYuVJo4vybFhBSHSOKmijz4t_W8cxkfFdA6O-jVsPlPzirvrY5D5UrUO1AG7AWoDobyoSoSjG9uuDZR02Yvew3xEa05Bg1vwvcubfWNq/s50/plus_on.png');}
}, function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifO8rfRnhJTgR8i-IrHr3l4ts686rXf_Dlws4491No9cGBDCwHxaUPIBj_bMdouqjPRZKmn_FtALAtHy_jKghJa3utjzPTI1z9PH9MBOjs1CEhqaX_3k7U6Kst6X6O4TeUfDwZ93Jjv2r8/s50/plus_off.png');}
}
);
</script>
<style>
#comment-zone {
position: relative;
}
#gcontainer {
display: none;
}
#comments-norm, #comments-gplus {
cursor: pointer;
padding: 0px 5px;
}
</style>
</div>
</b:includable>
Paso # 4:Ahora buscamos de nuevo el siguiente código:
<b:include data='post' name='comments'/>
.
.
.
.
.
</b:includable>
Paso # 5:Reemplace por el siguiente código:
<b:include data='post' name='comments'/>
</b:if>
<b:else/>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='threaded_comments'/>
</b:if>
</b:if>
</b:if>
<div style='clear:both;'/>
</b:includable>
Paso # 6:Ahora presione el botón "GUARDAR PLANTILLA" y ya está todo hecho. Enhorabuena
Si esto no funciona ...
Puede que no tenga las bibliotecas jQuery instalados en su plantilla. Para agregarlos Copia / pega el siguiente código y agregarlo a la plantilla justo antes de </ head>:
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
Configurar ancho de la caja de google+:
En el primer código podéis observar en rojo el ancho de la caja de comentarios de Google+ (por defecto va a 620px), si no se adapta a vuestras necesidades, con aumentar o disminuir lo solucionáis. Imprimir artículo
No hay comentarios:
Publicar un comentario