Utilizar Los Tres Sistemas De Comentarios En Blogger

Bueno amigos se me ha hecho imposible estar con ustedes por el trabajo pero ya estamos aquí de vuelta, aportando algo al cyber espacio. Comencemos con un aporte que ya existía, pero en esta ocasión le agrego un detalle para que sea más provechoso. Al post que hago referencia es aquel donde le enseñe a utilizar los comentarios de Blogger y Google+ al mismo tiempo en Blogger, ahora lo que voy hacer es agregarle un complemento extra que sería Los Comentarios de Facebook y si quieren ver cómo trabaja, puedes verlo aquí en la pagina que ya lo tengo implementado.
Iniciemos con el tutorial. A continuación, siga los pasos que se indica con cuidado y no se olvide de hacer copia de seguridad de la plantilla.
Ir a Plantilla >> >> Crear/Restablecer copia de seguridad.

Primero agrega la librería jQuery antes de </head>:

(si ya la tienes agregado haz caso omiso de este paso)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Ahora Haga clic en Editar HTML y busque el Código de abajo.

<b:includable id='comment_picker' var='post'>
.
.
</b:includable>

Reemplace el código anterior por este código.

<b:includable id='comment_picker' var='post'>
 <b:if cond='data:post.forceIframeComments'>
 <b:include data='post' name='iframe_comments'/>
 <b:if cond='data:post.showThreadedComments'>
 <b:include data='post' name='threaded_comments'/>
 <b:else/>
 <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>
</b:includable>

Después de reemplazar el código, buscar este código de abajo.

<b:includable id='threaded_comments' var='post'>
.
.
</b:includable>

Y reemplázalo con este código.

<b:includable id='threaded_comments' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.allowNewComments'>
<div id='com-header'>
<div class='comments-count-blo-goo'>
<div align='center'>
<div class='comment-facebook'><fb:comments-count expr:href='data:post.url'/> Comentarios</div>
<div class='comment-google'><div class='g-commentcount' data-color='#666666' data-font-family='arial' data-font-size='13px' data-preexisting_count='0' expr:data-href='data:post.url'/></div>
<div class='comment-blogger'><data:post.numComments/> comentarios</div>
 </div>
<div align='center' style='padding-top: 5px;'>Para Comentar Elige el Sistema de Comentario de tu Agrado:</div>
</div>
 <a id='com-norm' title='Mostrar Comentarios de Bloggers' class="comenf">Comentarios</a>
 <a id='com-gplus' title='Mostrar Comentarios de Google+' class="comeng">Comentarios</a>
 <a id='com-face' title='Mostrar Comentarios de FaceBook' class="comenb">Comentarios</a>

 <div id='copyrigtsbgcomment'><a target="_blank" href='http://www.blognivel.com/2013/08/comentario-de-blogger-y-google-plus-juntos.html' title='Obtener Esto Para Tu Web'>+</a></div>

</div>
<div id='comment-zone'>
 <div class='comments' id='fcontainer'>
 <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>
 <div id='comments'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='540' expr:href='data:post.canonicalUrl'/></div>
 <script src='http://apis.google.com/js/plusone.js'>{lang: 'es'}</script>
 <script src='https://googledrive.com/host/0B0LTexRNPYFjQTRiV290Umo4bm8/ComentariosBGF.js' />
 <link href='https://googledrive.com/host/0B0LTexRNPYFjQTRiV290Umo4bm8/ComentariosBGF.css' rel='stylesheet' type='text/css' />
 </div>
</b:if>
</b:if>
</b:if>
</b:includable>

Luego buscamos la etiqueta <body> y debajo de el insertar el siguiente código:

(Si has agregado un botón Me gusta o algo de Facebook, no es necesario que lo vuelvas a ingresar)

<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Eso fue todo y esperamos que todos hayan disfrutado de este post. Si usted está frente a cualquier problema, no dude en preguntar en el área de comentarios. También compartir sus puntos de vista sobre esto.

Imprimir artículo