√ 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='"loading" + data:blog.mobileClass'>.

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'>

<b:if cond='data:mobile'>

<data:blogTeamBlogMessage/>

<b:else/>

<data:blogTeamBlogMessage/>

</b:if>

<data:post.friendConnectJs/>

<data:post.cmtfpIframe/>

BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');

</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 + "_comment-editor-toggle-link"' 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('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</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 !!