Hace unos días vimos la forma de comentar con Blogger, Google+ y Facebook todo junto y al siguiente día la forma de colocar el contador de comentarios para Blogger, Facebook y Google+. Pués bien, hoy le vamos añadir también la caja de comentarios de Discus, con ello conseguiremos ganar ventaja en cada sistema de comentarios.
Como se diría en términos automovilísticos, este tutorial trae de serie, los comentarios de Blogger, Discus, Facebook y Google+, pero siempre tendremos la opción de eliminar cualquiera de ellos como veremos más abajo.
VER DEMO
Integrar en el Blog todos los comentarios
Tengo asumido antes de empezar que ya tenéis vuestro propio nombre de usuario y cuenta en Disqus y Aplicación de Facebook, así que comencemos:
Paso 1: Inicia sesión en la cuenta de Blogger. Y seleccione su blog.
Paso 2: Copia de seguridad de tu blog de Blogger.
Paso 3: Blogger > Plantilla > Edición de HTML.
Paso 4: Encuentre el siguiente código presionando CTRL + F.
</head>
Paso 5: Justamente antes del código pegue lo siguiente:
<meta content='id perfil facebook' property='fb:admins'/>
<meta content=' id aplicación facebook' 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'/>
En id perfil facebook e id pagina facebook debes meter tu número identificativo de Perfíl y Página.
Para encontrarlo es tan sencillo como entrar en ¿Cual es mi ID? e introducir tu nombre de perfíl y página.
Paso 6: Ahora buscamos el código de abajo.
<b:include data='post' name='post'/>
Paso 7: A continuación pegamos lo siguiente:
<b:if cond='data:blog.pageType == "item"'>
<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'>
</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 == "item"'>
<div id='disqus_thread'/>
<div id='disqus_loader' style='text-align: center'>
<script>
function load_disqus() {var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = "http://nombre-usuario.disqus.com/embed.js";(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); var ldr = document.getElementById('disqus_loader'); ldr.parentNode.removeChild(ldr); } </script>
</div>
</b:if>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<fb:comments expr:href='data:post.url' num_posts='10' width='520'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Paso 8: Sustituye nombre-usuario de Discus por el tuyo.
Paso 9: Integrar la secuencia de comandos de Discus y para ello colocamos antes de </body> el siguiente script:
<script type='text/javascript'>
var disqus_shortname = 'nombre-usuario-discus';
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
Paso 10: Sustituye nombre-usuario de Discus por el tuyo.
Con esto ya tendremos instalado todas las cajas de comentarios en nuestro blog.
Eliminación de las cajas de comentarios:
Si deseais eliminar cualquiera de las cajas de comentarios de este sistema, seguir atentamente los pasos indicados.
Eliminar Blogger
Elimina todo lo marcado en color naranja del paso 7 y a continuación pega en el CSS del blog el siguiente código:
#comments{ display: none !important;}
Eliminar Discus
Elimina todo lo marcado en color celeste.
Eliminar Facebook
Elimina todo lo marcado en color azul.
Eliminar Google+
Elimina todo lo marcado en color rojo.
Centrar los botones en caso de eliminación o no dar el ancho.
Al final de la cuarta fila del paso 7 veremos margin-left:50px; aumentar o disminuir según las necesidades.
Con esto termina este tutorial y espero que vuestros visitantes tengan más opciones para comentar en vuestros blogs con los diferentes sistemas de comentarios.