Comentarios de Google+, Blogger y Facebook en Blogger

Con anterioridad habíamos visto como Agregar comentarios de Google Plus conservando los clásicos, pero ahora vamos a ver un truco mucho mejor y el cual consta de agregar a tu blog los sistemas de comentarios de Google+, Facebook y Blogger dándole al usuario muchas mas posibilidades para comentar.


Para agregar este genial truco a tu blog ve a Plantilla, Editar HTML  (* Presionar CTRL + F dentro del editor para activar el cuadro de búsqueda) y busca el siguiente código:
<b:include data='post' name='post'/>

Debajo del anterior código pega lo siguiente:
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='com-header'>
<div align='center' style='padding-top: 5px;font-size: 16px;'><b>Para Comentar Elige el Sistema de Comentario de tu Agrado:</b></div>
</div>
<div class='commentacon'>
<script language='javascript' type='text/javascript'>
function show(id) {
var oc = document.getElementById(id).style;
hide();
oc.display = &quot;block&quot;;
}
function hide() {
document.getElementById(&#39;gpluscomments&#39;).style.display = &quot;none&quot;;
document.getElementById(&#39;comments&#39;).style.display = &quot;none&quot;;
document.getElementById(&#39;comentariosFacebook&#39;).style.display = &quot;none&quot;;
}
</script>
<style type='text/css'>
#com-header {width: 550px;margin-left:10px;padding: 2px;float:left;margin-bottom: 10px;text-align: center; }
.commentacon {width: 550px;margin-left:10px; background:#edeaea ;margin-top: 5px; border: 1px solid rgb(229, 229, 229);
border-radius: 3px; }#comments, #comentariosFacebook, #gpluscomments {display:none;}#goog{margin-left:65px;display:block;}#blog{margin-left:210px;margin-top:-45px;} #face{margin-left:355px;margin-top:-45px;}#comentariosFacebook{margin-left:15px;margin-top:10px;}</style>
<div id='goog'>
<a class='googl' href='javascript:show(&apos;gpluscomments&apos;)'><img alt='comentarios google' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsu-0_CxD9mN-n6HmYH-9eyYZ-ErZRCQIc4xgd4Dng-yGLj6Kxdtc1coNCBNEIXOcOqS36STYv7du9CTC1innxq1UfJjiHXnCO01KJVgNnWb4P8ExnbLut7mkEvfpOknP3pQes7reljP0/s1600/comentarios-google.gif'/></a></div>
<div id='blog'>
<a class='blogg' href='javascript:show(&apos;comments&apos;)'><img alt='comentarios blogger' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZlApuqQG0JUFA5DiMdvEEiTgbu4tDJIdjeNV35WlOP9tuFikwiXXevE0OBPLCn4Pq4EiOseLmSbjdClloEXDJWH1n_CGKIxhfhUdkeJaht99u-CqVx1Jow2sYvPndXU7ccR-m3VPEBMQ/s1600/comentarios-blogger.gif'/></a></div>
<div id='face'>
<a class='faceb' href='javascript:show(&apos;comentariosFacebook&apos;)'><img alt='comentarios facebook' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNE82yqh_sd69Yh1YJ4oM7YX8ptNtWKtNUiX9zol_pMxh7MbDRXTGzyKZQplQWgRvv4gar87Qpdf51suU4c__IM_-boLxg6NOMoakWJFwULhXUuVu9nteI73mIjpoqPFR7Z2J5K05OKmg/s1600/comentarios-facebook.gif'/></a></div>
<div class='comentarios' id='gpluscomments'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='550' expr:data-href='data:post.url'/>
</div>
<div class='comentarios' id='comentariosFacebook'>
<div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='520'expr:href='data:post.canonicalUrl'/></div>
</div>
</b:if>

Cerca del anterior código se vera otro código similar al siguiente:
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>

Justo debajo del anterior código pega lo siguiente:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='comentarios' id='comentariosFacebook'>
<div class='fb-comments' data-colorscheme='light' data-num-posts='1' data-width='540' expr:href='data:post.url'/></div> </b:if> 

Ahora debajo de  <body> agrega lo siguiente:
<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_ES/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

Si quieres administrar los comentarios de Facebook agrega lo siguiente justo antes de <head>   
<meta content='id perfil facebook' property='fb:admins'/>
<meta content='id pagina facebook' property='fb:page_id'/>


En id perfil facebook e id pagina debes poner la id de tus respectivas cuentas, a continuación te ponemos un generador de id de facebook donde solo tendrás que poner el nombre de usuario o nombre de la pagina.



Ahora solo falta que antes de  </head> pega lo siguiente:
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

Para finalizar guarda los cambios, y si quieres modificar el tamaño de las cajas de comentarios edita los valores resaltados en color azul  width='550' por el valor que quieras.

Esperamos que les haya gustado y sido de utilidad esta genial entrada, y si tienes alguna inquietud o duda comentala que la resolveremos lo mas pronto posible.

Entrada Actualizada el 29 de octubre de 2013, con esta actualización ha vuelto a funcionar la caja de comentarios de Facebook.

Comparte este artículo:
+
Pagina Anterior
« Entradas mas Recientes
Pagina Siguiente
Siguiente Publicación »
0 Komentar untuk "Comentarios de Google+, Blogger y Facebook en Blogger"

Terima Kasih Sudah Berkomentar
 
Back To Top