23 noviembre 2013

Comentar con Blogger-Discus-Facebook y Google+

comentar con blogger-discus-facebook y google+

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.

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://2cd2e6bd6df053a80ac331ad9c3223fc430652d4.googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/jcomentarios.js'/>
<script src='https://2cd2e6bd6df053a80ac331ad9c3223fc430652d4.googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/amorcoment2.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 == &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'>

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 = &#39;nombre-usuario-discus&#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>

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.

66 comentarios

¿Se pueden igual numerar (contar) los comentarios?
¿Se puede cambiar el orden de los comentarios?

Me gustaría que primero aparecerían los de Discus, luego los de Blogger, luego los de Google 'y finalmente los de facebook.

Por supuesto si se puede.

Guillermo, en cuanto a numerar si, puedes usar el anterior post de numerar los comentarios aunque no saldría el de Discus (lo miraré y trataré de exponerlo en otra entrada) y en cuanto a cambiar el orden, ¿que más da?....lo que se trata es que comenten con uno u otro.

Saludos.

buen tutorial... ahora existe la posibilidad de cambiar los estilos de los botonoes sin tener que tocar el css que esta dentro de "amorcomentarios2.js" seria como una imagen y al lado un texto que diga comentar con... y al presionar el texto aparesca la caja

¿es posible?

Diego, todo es posible, pero habría que volver a modificar varias partes del código.
De todas formas la más fácil sería eliminar en el paso 7, los nombres de cada red (blogger,discus,facebook y google) y sustituir por:

Comenta con <img src='url icono blogger'/> y en el CSS colocar: .comments-tab img { height: 20px;width: auto; margin: 0px 4px;}

gracias por tu pronta respuesta lo intentare :D

Otra pregunta, si ya tengo el otro sistema implementado el anterio que publicaste que tiene blogger, google+, facebook. em el sistema de contador de comentarios

¿Tengo que retirarlo y agregar desde cero este? Porque revise el codigo para ver si solo tenia que agregar el de disqus y vi que no se era el mismo. Entonces era mi dau. ¿Si ya tengo el otro sistema implementado, como agrego solo el disqus? ¿Retiro lo que agregue y implemento este? o solo hay que hacer algunas modificaiones? Gracias.

Guillermo, debes empezar de cero este es totalmente diferente al otro.

Fíjate en los pasos de instalación del otro, lo desinstalas y colocas este si es tu deseo.

Saludos.

¡Gracias! Muy buen tutorial y bien explicado.

Gracias eres un crack. Lo probaré en cuanto pueda.

Lo he estado probando y tiene un fallo, el cual es el siguiente:
- Si primero comentas con Disqus y luego en Blogger, el comentario de Disqus se borra.
- Si tienes los comentarios sincronizados, el comentarios se borra igual pero sale en los de blogger.
Supongo que borrando el de blogger se soluciona, pero si hay alguna otra mejor ¿no?
Lo dicho eres un crack y gracias.

Xisco llevas razón, no me había percatado de este error, lo único que comprobé fue su funcionamiento, intentaré ver donde se produce dicho error.
Saludos.

Este comentario ha sido eliminado por el autor.

INCREÍBLE! Ya lo instalé en mi blog, me encantó el resultado! GRACIAS y feliz año :D

Me acabo de dar cuenta que me da problemas con el carrusel y el slider de la pagina principal de mi blog www.locomosxca-world.blogspot.com , agradeceria una solución ya que llevo tiempo mirandolo y no se como arreglarlo, gracias de antemano.

Xisco tu plantilla usa prototype y con jquery se lleva fatál, pero haz una prueba y elimina este script de la plantilla: <script src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/jquery-comentarios.js'/> ahora el slider debe funcionar pero no estoy seguro de los comentarios, míralos y me comentas.

Quitando dicha linea el carrusel de arriba funciona, pero el slider que tengo en la pagina principal debajo de dicho carrusel solo salen los nombres de las entradas pero no la imagen.
Los comentarios he probado y funcionan igual, no he visto que de problemas.
Gracias por la ayuda, desconocia lo de que usara prototype.

Bueno al final la pagina principal va de lujo, los comentarios no se ha visto afectados de momento, lo dicho gracias ;)

Hola Buenas Antonio!! Estoy colocandolo pero tengo un problemilla. Una vez colocados todo funciona pero me aparecen mis posts en linea cuando de normal aparece una parrilla de 9 entradas en lineas de 3, es alguna parte del segundo codigo la que me crea el problemilla. Crees que podrias echarme un cable a solucionarlo?

Victor nesecito la Url de tu blog para poder ver que ocurre porque la url que lleva a tu perfíl da error.

Gracias por contestar tan rapido Antonio, ya lo tengo solucionado.perdon por la molestia.

Me alegro Victor, poco a poco y sin prisas todo se aprende.
Gracias por tu visita.

De todas formas Victor, revisa la url de tu perfíl, da error.

Hola ¿como estas? me gusta mucho este truco y la verdad que lo eh intentado 2 o 3 veces en plantillas diferentes pero me pasa lo mismo que dice victor fernandez! me salen las entradas en columnas mientras que ellas estan en filas bueno yo tengo una plantilla de prueba http://jijiih77.blogspot.com/ hay es donde tengo el truco , espero que sepas que cosa le pasa porque de verdad me gustaria colocarlo en mi blog =)

Ghaaby, si no te sale bien con ese, prueba este OTRO

Amor Sevillista..Gracias pero me podrias Ayudar con discus me dice este mensaje mira............We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.(((((No se pudo cargar Disqus. Si usted es un moderador por favor, consulte nuestra guía de solución de problemas.)......gracias por tu ayudar puedes entrar a mi pagina que mires mi problema http://peliculasmkvjuegospcseriestv.blogspot.com/

Luis debes colocar el nombre del sitio no de tu perfil de Disqus, imagínate que tienes tres blog pero solo un perfil, ¿entiendes?, debes colocar el nombre de tu sitio no de perfil.

Este comentario ha sido eliminado por el autor.

Gracias Probare y mil Gracias por tu Tiempo y pasiencia

Amor Sevillista..Gracias logre hacer que me trabajara la caja de comentarios .disqus.com cada dia mi blog esta mejorando gracias a tu ayudad gracias muchas gracias

Buen aporte, no lo he encontrado en castellano más que aquí.

Me alegro que encontrarás lo que buscabas.
Saludos.

amigo como hago para colocar contador de comentarios ya qye este codigo no me sirve http://www.amorsevillista.com/2013/11/contador-comentarios-blogger-google-facebook.html paz

Guarida, cual es el motivo por el que no te sirve?
Yo lo veo bien en tu blog.

Gracias Antonio!
Ho installato questo widget sul mio blog di prova ma ho un problema. Nella pagina principale dovrebbero vedersi i post su due colonne, ma adesso nella prima colonna ne appare solo uno. Sai come posso risolvere?
I installed the widget on my test blog but I have a problem. On the main page I should have two columns showing the posts but after installing the first row is only showing one. Any idea what I can do? Thanks!
twiceasgood.blogspot.com

Simona non hanno idea di quello che ti succede, forse uno dei script interferire portando il codice.

Hola amigo Antonio,

Esté método para comentar es el mejor, muchas gracias, el unico problema es que no sé cómo crear la aplicación de facebook, para así tener un buen manejo de lo que se publica, sí me pudieras ayudar sería genial amigo,

Muchísimos saludos, muchas gracias, hasta pronto amigo, mientras veré que más implementar en mis sitios. Ahora que lo recuerdo, también quisiera implementar un blackoute con scroll :D

Problema solucionado, ya aprendí a crear la aplicación :D

Gracias, me ha servido bastante, y me ha dado grandes ideas.

Hola Sevillista, al parecer los Archivos ".js" que estaban alojados en google drive fueron eliminados y los botones para comentar no funcionan correctamente. podrias resubir los archivos eliminados? espero no incomodarte. saludos.

Bryan dejame url de tu blog para comprobar el fallo, de todas formas creo que fallaba el primer script, cambia la url del primer script por esta: https://2cd2e6bd6df053a80ac331ad9c3223fc430652d4.googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/jcomentarios.js

Hola una pregunta amigo si solo quiero el de Disqus y el de facebook pero un poco parecido como al de Zkreations.com que se pongo hasta el ancho de la entrada como seria y sin que los botones fueran circular sino rectangulos.

Hola Sevillista bueno este es mi blog: http://entretenimiento-x.blogspot.com/2014/11/tutorial-como-publicar-en-muchos-grupos.html

y me estubo funcionando perfectamente este tutorial pero ahora ya no aparecen los botones para elegir con que red social comentar. ahora se ve uno debajo del otro.

Ok Bryan, cambia esta url: https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/amorcomentarios2.js por esta otra : https://2cd2e6bd6df053a80ac331ad9c3223fc430652d4.googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/amorcoment2.js y ya debe de funcionar.

Jose te lo dejo preparado para tu blog, sigue los pasos tal cual estan descritos.
Descarga el enlace desde AQUÍ ENLACE

Hola Amigo vi tus codigos y lo intente instalarlo en mi web pero hay dos problemas primero: en este codigo no me acepta en la plantilla y segundo lo otro funciona bien pero cuando le doy a ver el blog me desconfigura la plantilla te dejare mi plantilla para que se lo pongas.
http://www5.zippyshare.com/v/47223744/file.html

Otra pregunta como pongo lo que tiene tu comentario lo siguiente:

Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"

Lee bien el documento de texto, el <b:include data='post' name='post'/> no debes incluirlo en la plantilla, debes colocar el código bajo eso.

En cuanto al mensaje en los comentarios está adaptado solo para blogger.
Si solo vas a colocar Disqus y Facebook no te va a valer.

Te dejo la plantilla haber si el resultado es el esperado pero antes de nada copia todos los gadget que tengas en un bloc de notas porque la plantilla va con una instalación limpia.

Copia toda la plantilla y la pegas en el Html de tu blog. Ver Plantilla

Solo se puede ver en algunas entradas no en todas. pero gracias pana de todas maneras

Este comentario ha sido eliminado por el autor.

Buenas, Antonio. Este sistema de comentarios está muy bueno pero, no he podido implementarlo, me bota error al guardar la plantilla. Este es mi blog http://anonopsibero.blogspot.com. Todo lo pongo bien para el paso 7 y saca este error http://i.imgur.com/Qsw7K6E.jpg http://i.imgur.com/5HUUOUx.jpg http://i.imgur.com/LIV4xev.jpg

Te agradecería si me puedes indicar que hay malo en el código.

Iberoamérica, con la captura de plantilla no puedo ver de donde viene el problema, copia y envíame la plantilla por email.
Ya te miro de donde puede venir el problema.

Ibero he estado mirando la plantilla y he podido colocar los botones menos el de google, últimamente tiene problemas para expandir, pero de todas formas si quieres usar los otros 3 te dejo el archivo de texto preparado para realizarlo.
Elimina en la plantilla desde <div class='blog-posts hfeed'> hasta </div> (son 28 o 29 líneas) y en su lugar coloca todo lo que hay AQUÍ


Hola, acá dejo mi problema. Resulta que cuando clickeo en un método desaparece toda la barra de opciones para comentar y no aparecen los comentarios ni de Blogger ni de Google +. ¿Qué puede ser?

Acá dejo el blog: http://www.lateleseguncaamano.com

Roberto no lo veo instalado en la plantilla asi que no puedo ver donde se produce el error.
Mandame la plantilla por email y veo donde se puede producir.

Una pregunta, se puede personalizar los botones, pues a mi parecer se ven muy poco esteticos y si es posible agregar un efecto hover?.... Saludos y excelente blog amigo!! :D

Joaquín, si tienes un poco de conocimiento en CSS puedes modificarlo entrando en el script: https://2cd2e6bd6df053a80ac331ad9c3223fc430652d4.googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/amorcoment2.js y abajo del todo encontrarás el CSS.

Exactamente es este: https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/comentarios.css

Haz las pertinentes pruebas y sube luego a tu hosting los 2 archivos.

Gracias!! me llevo tiempo pero por fin lo termine a como yo queria, bueno casi :)... saludos..

Hola ay un error en este truco para las cajas de comentarios cuando puse los códigos en sus respectivos lugares con sus configuraciones y todo y después le doy vista previa para corroborar que no tenga ningún problema sale lo siguiente en color rojo arriba de la ventana del editor HTML de la plantilla

No se ha podido cargar la vista preliminar de la plantilla: Error al analizar XML, línea 1250, columna 7: The element type "div" must be terminated by the matching end-tag "div".

me puedes ayudar? te lo agradecería porque es un excelente truco gracias un saludo...
quite el cierre del div porque no me deja publicar el comentario pero el div es un cierre.

amigo gracias estaba buscando esto hace arto tiempo pero no lo esplicaban ademas decian codigos que no existian muchas gracias amigo

Hola puse tal cual los códigos en la plantilla y facebook junto a google se muestran normal pero la caja de comentarios de Blogger no sale y en la de Disqus me sale el siguiente mensaje: ''We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.'' cómo pongo los nombres de usuario en la de disqus? he intentado mil maneras y no aparece otra cosa que no sea ese mensaje raro.. si me dejas una descripción bien clara sobre esa parte te lo agradecería ya que vi en tu demo y sí sale bien. ah, y la caja de blogger por qué no me sale? si en la configuración de diseño está habilitada o_O

c/jcomentarios.js' Off este .js teria como me mandar outro link?


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"