19 octubre 2011

Integrar comentarios Facebook en Blogger

Mirando por algunos blogs, me he encontrado con este tutorial de como integrar la caja de comentarios de Facebook en nuestros blogs.

Comentando con Blogger
 comentando con Facebook

El blog en cuestión es Compartidísimo y nos muestra la forma de añadirlo a nuestra plantilla.

Yo he eliminado algunas partes del código (toda la parte del CSS)  y he añadido las imágenes de Blogger y Facebook.

Os explico brevemente como se hace, "Recuerda ¡siempre! que vallas a modificar la plantilla ¡hacer una copia de seguridad! por si borras algo que no debes...

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, o F3 busca: </head> y péga el siguiente código antes de ello.

<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 en negrita en el código anterior) entonces no lo agregues.

2.- 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'/>

3.- Ahora busca este código (con la ayuda de ctrl+ F o F3 escribiendo la primera linea de código que está en negrita):
<b:includable id='comment-form' var='post'> y elimina todo lo que está en rojo hasta el siguiente </b:includable>
 
<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>

4.- Cambia todo lo anterior por esto:
Podéis cambiar las imágenes de presentación por otras, cambiando las url de imágenes que se muestran en rojo.
<b:includable id='comment-form' var='post'>
<ul class='tabs'>
<li><a href='#tab1'><img src='http://i40.servimg.com/u/f40/13/20/23/83/blo_co10.gif'/></a></li>
<li><a href='#tab2'><img src='http://i40.servimg.com/u/f40/13/20/23/83/faceb10.gif'/></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='400'/>
</div>
</div>
<div style='clear: both;'/>
</b:includable>

El ancho de la caja de comentarios de Facebook está a 400px, si la quieres cambiar por un mayor o menor tamaño, en el código se muestra como width='400'/>

Si te ha gustado, !! Compártelo !!

Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

8 comentarios

no me funciono espero puedan ayudarme

Gracias, lo acabo de integrar en mi blog http://paragustoscoloreswebzine.blogspot.com.es/ y funciona a la perfección. Un saludo

Me surge un problema.
¿Por qué no se ven los botones cuando ya existen comentarios en una entrada?

He leído en algunas publicaciones que las ediciones que hice a mi blog con respecto a tú tutorial no corresponde a comentario anidados.
¿cuál es la solucion amigo? :/ ayudame

Leviomat, no comprendo a que te refieres, se más explícito en tu comentario.

Hice todo lo que explicas en el tutorial, tal cual. Verifiqué y todo bien. Pero surge un problema cuando publicas un comentario a traves blogger, el problema es que desaparece la opcion de comentar por facebook. Se entiende ahora?
Es por es que te decía más arriba que este tutorial no sirve para blog con comentarios anidados. Me entiendes? Por eso te pregunto si hay alguna solución?

Leviomat, este artículo es bastante antiguo y extraido de compartidísimo, posiblemente fuese como comentas, para los antiguos comentarios.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"