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://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/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='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/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','http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png');
$('#comments-gplus').attr('src','http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/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','http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png');
$('#comments-gplus').attr('src','http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png');
});
$('#comments-norm').hover(
function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png');}
}, function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png');}
}
);
$('#comments-gplus').hover(
function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png');}
}, function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/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.