07 septiembre 2011

Cómo usar la caja de comentarios de Facebook y Blogger al mismo tiempo de manera dinámica

caja de comentarios de facebook y Blogger

Estaba leyendo una entrada de JMiur, donde explicaba como agregar una caja de comentarios de Facebook,  y me pareció útil e interesante,  muchos usan y les encanta Facebook, así que permitir en el blog esa posibilidad, no esta nada mal, claro, pensando en dejar la caja de comentarios de Blogger, para que se pueda comentar de las dos maneras.

Pensando en eso, lo que haremos, es agregar la caja de comentarios de Facebook sin quitar la de Blogger, y se mostrará de forma alterna y dinámica a elección del usuario.

Es mas fácil de lo que parece, sólo vamos a usar tabs o pestañas con Jquery,  para mostrar y ocultar las cajas. Puedes ver esto funcionando en el DEMO.

Si esto te convence y ya usas jQuery o quieres probarlo, entonces veamos como hacerlo paso a paso, pero antes de empezar te recomiendo guardar una copia de seguridad de tu actual plantilla.

Como hacerlo paso a paso

Paso 1: Ve a la Edición de HTML de la plantilla, marca la casilla de expandir plantillas de artilugios,  y con la ayuda de ctrl F, busca ]]></b:skin>.

Inmediantamente después, pega esto:
<style type='text/css'>
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border: none;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0 0 0 10px;
padding: 0;
height: 32px;
line-height: 18px;
border: none;
overflow: hidden;
position: relative;
background: #5882FA; /*el color de los botones*/
}
ul.tabs li a {
margin: 0;
padding: 7px;
font-size: 14px;
display: block;
font-size: 1.2em;
border: none;
outline: none;
color: #0c0c0c;
text-decoration: none;
}
ul.tabs li a:hover {
background: #F2AE04; /*el color del fondo del hover*/
}
html ul.tabs li.active, html ul.tabs li.active a:hover  {
background: #F2AE04; /*el color del botón activo*/
border: none;
}
.tab_container {
border: none;
overflow: hidden;
clear: both;
float: left;
width: 100%;
background: none;
}
.tab_content {
padding: 20px 10px;
margin: 0;
}
</style>

Paso 2: Luego, agrega JQuery y el script, antes de </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
 //When page loads...
 $(".tab_content").hide(); //Hide all content
 $("ul.tabs li:first").addClass("active").show(); //Activate first tab
 $(".tab_content:first").show(); //Show first tab content
 //On Click Event
 $("ul.tabs li").click(function() {
  $("ul.tabs li").removeClass("active"); //Remove any "active" class
  $(this).addClass("active"); //Add "active" class to selected tab
  $(".tab_content").hide(); //Hide all tab content
  var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
  $(activeTab).fadeIn(); //Fade in the active ID content
  return false;
 });
});
//]]>
</script>
Nota: Si ya usas jQuery, (que esta de azul en el código anterior) entonces no lo agregues.

Paso 3: Luego,  pega lo siguiente después de <body>, en las nuevas plantillas viene algo como esto: <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>.
<div id='fb-root'/>
<script src='http://connect.facebook.net/es_ES/all.js#xfbml=1'/>
Paso 4:  Después, identifica este código (con la ayuda de ctrl F, escribiendo la primera linea de código que esta de azul):
<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>

</b:includable>
Paso 5: Cambia todo lo anterior por esto:
<b:includable id='comment-form' var='post'>
<ul class='tabs'>
    <li><a href='#tab1'>Comentar con Blogger</a></li>
    <li><a href='#tab2'>Comentar con Facebook</a></li>
</ul>
<div class='tab_container'>
    <div class='tab_content' id='tab1'>
 <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='310' id='comment-editor' name='comment-editor' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='310' id='comment-editor' name='comment-editor' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
    </div><div style='clear: both;'/>
    <div class='tab_content' id='tab2'>
          <fb:comments colorscheme='light' expr:href='data:post.url' num_posts='5' width='500'/>
       </div>
</div>
 <div style='clear: both;'/>
</b:includable>
Si te fijas en los dos códigos verás que lo que estamos cambiando es la parte de rojo, es fácil identificarla está entre un DIV, y todo ese código dentro de: <b:includable...>...</bincludable>. También, puedes cambiar a tu gusto el texto para cada botón marcado con verde y el ancho de la caja de Facebook que actualmente se muestra como 500.

Paso 6: Checa en vista previa, aunque no verás las cajas de los comentarios, te asegurarás que todo este en orden, y si todo luce bien Guarda los cambios.

Cambiar el mensaje de comentarios al estar dentro de las entradas (opcional)
Como ahora tendremos dos cajas para los comentarios, entonces el mensaje que aparece arriba del formulario de los comentarios,  puede ser que no se adapte muy bien a esta nueva presentación, sin embargo, podemos condicionar ese mensaje, para que siempre muestre el mismo texto, independientemente del número de comentarios, y lo haremos así:

Paso 1: Vamos a la edición de HTML de la plantilla, y marcamos la casilla de expandir plantillas de artilugios.

Paso 2: Con la ayuda de Ctrl F, buscamos:
<a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4>
        <b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>
...y lo cambiamos por:
<a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4>
       <b:if cond='data:post.numComments == 0'>
   Dime lo que piensas...</b:if>
<b:if cond='data:post.numComments == 1'>
   Dime lo que piensas...      </b:if>
    <b:if cond='data:post.numComments > 1'>
  Dime lo que piensas...     </b:if>
</h4>
Nota: Cambia lo que esta de rojo, por el texto que quieres que aparezca.


Paso 3:  Checas en vista previa y si todo luce bien, guarda los cambios.

Si quieres aplicar esto o algo parecido al enlace de los comentarios de la página principal, entonces lee esta entrada de Francisco de Blog an Web, en donde explica muy claramente como hacerlo.

Notas:
  • Puedes personalizar a tu gusto los botones, incluso poniendo una imagen.
  • Si utilizas los tabs de la entrada que menciono, habrá que hacer cambios en los ID's para evitar problemas.
  • En las plantillas nuevas de Blogger, puede ser necesario hacer cambios en los estilos o CSS.
  • Si quieres usar más opciones (otros atributos) para la caja de comentarios de Facebook te recomiendo echar un vistazo a la entrada de JMiur que menciono arriba.

Otras Referencias:
Improving Comments Across The Web
Comments Box Facebook

Actualizado: He actualizado la versión de jQuery de la 1.6.2 a 1.6.4


Oct/26/2012. Este tutorial no ha sido probado usando los comentarios anidados de Blogger, y por lo tanto no puedes seguir los pasos citados aquí.  Luego publicaré un tutorial usando el nuevo sistema de comentarios anidados de Blogger.