Revista Comunicación

Usar juntos comentarios de blogger y google+

Publicado el 02 junio 2013 por Amorsevillista @amorsevillista

comentarios blogger y google+
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 + &quot;_backlinks-container&quot;'>
<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: &#39;es&#39;}</script>
<script>
gapi.comments.render(&#39;gcomments&#39;, {
href: window.location,
width: &#39;620&#39;,
first_party_property: &#39;BLOGGER&#39;,
view_type: &#39;FILTERED_POSTMOD&#39;
});
$(&#39;#comments-norm&#39;).click(function(){
$(&#39;#gcontainer&#39;).css(&#39;display&#39;,&#39;none&#39;);
$(&#39;#comments&#39;).css(&#39;display&#39;,&#39;block&#39;);
$(&#39;#comments-norm&#39;).addClass(&#39;comment-on&#39;);
$(&#39;#comments-gplus&#39;).removeClass(&#39;comment-on&#39;);
$(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png&#39;);
$(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png&#39;);
});
$(&#39;#comments-gplus&#39;).click(function(){
$(&#39;#comments&#39;).css(&#39;display&#39;,&#39;none&#39;);
$(&#39;#gcontainer&#39;).css(&#39;display&#39;,&#39;block&#39;);
$(&#39;#comments-norm&#39;).removeClass(&#39;comment-on&#39;);
$(&#39;#comments-gplus&#39;).addClass(&#39;comment-on&#39;);
$(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png&#39;);
$(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png&#39;);
});
$(&#39;#comments-norm&#39;).hover(
function(){
if (!$(&#39;#comments-norm&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png&#39;);}
}, function(){
if (!$(&#39;#comments-norm&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png&#39;);}
}
);
$(&#39;#comments-gplus&#39;).hover(
function(){
if (!$(&#39;#comments-gplus&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png&#39;);}
}, function(){
if (!$(&#39;#comments-gplus&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png&#39;);}
}
);
</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.


Volver a la Portada de Logo Paperblog