Magazine

Comentar con Blogger, Disqus, Facebook y Google+

Publicado el 21 diciembre 2013 por Jonathan Lr @NovedadBlogger

 

La opinión de los lectores siempre es importante, si quieren expresar alguna duda o sugerencia que tengan, ese es la meta de la caja de comentarios de Blogger, pero para que el comentario del lector pueda ser publicado es necesario tener una cuenta de Google que muchos usuarios no poseen.
Por esa misma razón es conveniente agregar varios sistemas de comentarios para que el usuario pueda comentar con el sistema de comentarios que sea de su agrado.
Comentarios de Blogger, Disqus, Facebook y Google+
Los sistemas de comentarios que hoy compartiré con ustedes son:
  • Blogger
  • Disqus
  • Facebook
  • Google+

Demostración

INCORPORÁNDOLO EN MI BLOG

Estando en el Escritorio del blog, nos vamos a Plantilla, Editar HTML, y adentro presionamos CTRL+F y buscamos:
 </head>

Antes del código mencionado anteriormente pegamos:
 <meta content='Id de tu perfil facebook' property='fb:admins'/>
<meta content=' Id de tu fanpage' property='fb:app_id'/>
<script src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/jquery-comentarios.js'/>
<script src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/amorcomentarios2.js'/>
<script src='http://connect.facebook.net/es_ES/all.js#xfbml=1'/>

Para que sepas el Id de tu perfil facebook entra a Facebook Móvil y sigue estas dos imágenes:
Paso #01Saber ID de facebook paso 1
Paso #02Saber ID de facebook paso 2El link que está resaltado será el Id de tu perfil facebook
Ahora para que sepas el Id de tu fanpage sigue cualquiera de estas dos imágenes:
Si no posees un nombre de usuario el Id de tu fanpage te aparecerá en el inicio.Saber ID de fanpage paso 1
 Si tienes un nombre de usuario la ID no aparecerá por eso es conveniente ir a Editar la página, Actualizar la información de la página, y en la URL podremos encontrar la Id de nuestra fanpage.Saber ID de fanpage paso 2
Ahora seguimos colocando los códigos HTML.
Buscamos el siguiente código:
 <b:include data='post' name='post'/>

Y justo abajo del código anterior pega lo siguiente:
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='center' style='padding-top: 5px;font-size: 16px; color: #666666;'><b>Para Comentar Elige el Sistema de Comentario de tu Agrado:</b></div>
<br/> <div class='coment'><style>.coment{margin-left:50px;}</style>
<div class='js-default-tab comments-tab' id='blogger-comments' title='Comenta con Blogger'> 
Blogger
</div>

<div class='comments-tab disqusbutton' id='disqus-comments' onclick='load_disqus()' title='Comenta con Disqus'>
Disqus
</div>

<div class='comments-tab' id='fb-comments' title='Comenta con Facebook'>
Facebook
</div>

<div class='comments-tab' id='plus-comments' title='Comenta con gplus'>
Google+
</div>
 </div>
</b:if>
<div class='clear'/>
</div>
<div class='comments-page' id='plus-comments-page'>
<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='comments-page' id='disqus-comments-page'>
<div id='disqus_thread'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='disqus_thread'/>
<div id='disqus_loader' style='text-align: center'>
<script>
function load_disqus() {var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true; dsq.src = &quot;http://nombre-usuario.disqus.com/embed.js&quot;;(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq); var ldr = document.getElementById(&#39;disqus_loader&#39;); ldr.parentNode.removeChild(ldr); } </script>
</div>
</b:if>
</div>

<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fb:comments expr:href='data:post.url' num_posts='10' width='520'/>
</b:if>
</div>

<div class='comments comments-page' id='blogger-comments-page'> 

Reemplaza nombre-usuario por el nombre de usuario de tu disqus
Ahora integramos los comandos de Disqus para ello buscamos el siguiente código:
 </body>

Y antes pegamos:
 <script type='text/javascript'>
var disqus_shortname = &#39;nombre-usuario-disqus&#39;; 
(function () {
var s = document.createElement(&#39;script&#39;); s.async = true;
s.type = &#39;text/javascript&#39;;
s.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/count.js&#39;;
(document.getElementsByTagName(&#39;HEAD&#39;)[0] || document.getElementsByTagName(&#39;BODY&#39;)[0]).appendChild(s);
}());
</script>

Reemplaza nombre-usuario-disqus por tu nombre de usuario Disqus.
Si aún no eres parte de Disqusregistrate.

En caso de querer eliminar una de los sistemas para comentar, tener en cuenta lo siguiente:

 

ELIMINAR EL SISTEMA DE COMENTARIOS DE BLOGGER 
Para eliminar los comentarios de Blogger, borra todo lo que está coloreado en naranja y añade antes del ]]></b:skin> el siguiente código:
 #comments{ display: none !important;}

ELIMINAR EL SISTEMA DE COMENTARIOS DE DISQUSSolo elimina todo lo coloreado en celeste.
ELIMINAR EL SISTEMA DE COMENTARIOS DE FACEBOOK
Elimina lo coloreado en azul

ELIMINAR EL SISTEMA DE COMENTARIOS DE GOOGLE+Elimina lo resaltado en color rojo.
Para centrar los botones en caso de eliminación buscar margin-left:50px; y ajustar segun las necesidades 

Volver a la Portada de Logo Paperblog