jueves, 16 de enero de 2014

Como agregar Comentarios de Google+, Blogger y Facebook en Blogger

Hola esta vez les traego  un nuevo tutorial de como agregar a tu blog los sistemas de comentarios de Google+, Facebook y Blogger dándole así al usuario muchas mas posibilidades para comentar.



Para agregar este truco a tu pagina 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 colocas 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='http://3.bp.blogspot.com/-0ydXXdbASA4/UlbMP6XctDI/AAAAAAAANBE/w9z9FF3y5ps/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='http://2.bp.blogspot.com/-tFYhYwlbXUA/UlbMNa9qTjI/AAAAAAAANA4/D-SOu2qRGiU/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='http://4.bp.blogspot.com/-y9s-D8JTI3Q/UlbMPgX-o2I/AAAAAAAANBA/yZEUpHOR9KU/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>
Ahora Cerca del anterior código se vera otro código similar al siguiente codigo:


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

 Ahora coloca 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 coloca 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>



Comparte este post con tus amigos!

...o tambien puedes seguir el blog en:

6 comentarios:

Comparte tu opinion con los demas, deja un comentario. ↓

Los comentarios no son moderados, sin embargo si contienen insultos o son ofensivos, pueden ser borrados.

 

©2011 Trucos Gadgets Para Blogger | FuuTheme diseñado por Fuutec | Ir arriba ↑