10 octubre 2013

Comentar con Google+, Blogger o Facebook en Blogger.

comentar con blogger, google o facebook

Este verano vimos como usar juntos comentarios Blogger y Google plus sin ser necesario conectar el blog a Google plus y ahora aparte le he sumado también el de Facebook.

Ver tambien esta nueva entrada:  Comentar con Blogger, Disquus, Google+ y Facebook

COMO HACERLO

Paso # 1: Copia de seguridad de la plantilla!
Paso # 2: Plantilla >> Editar HTML (* Pulse Dentro Editor * Presione CTRL + F para activar el cuadro de búsqueda) y buscar el siguiente código:

<b:include data='post' name='post'/>

Paso # 3:y debajo de ello agrega el siguiente código:

<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;block&quot;;
}
</script>
<style type='text/css'>#gpluscomments{margin-left:10px}
#com-header {width: 550px;margin-left:10px;padding: 2px;float:left;margin-bottom: 10px;text-align: center; }
.commentacon {background:#edeaea;width: 550px;margin-left:10px; margin-top: 5px; } #comments, #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>
<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>
</b:if>


Paso # 4: Acontinuación veremos estas líneas:
<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>
Trás ellas, colocamos la caja de facebook:
<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>

Paso # 5: Ahora para que funcione la caja comentarios de facebook hay que localizar  la etiqueta <body   y justo debajo insertar el siguiente código:

<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 este código ya lo tenías añadido con anterioridad, no es necesario que vuelvas a colocarlo.***

**Importante** Si deseas administrar los comentarios de Facebook, edita la plantilla HTML y escribe bajo el <head> las siguientes metas:

<meta content='id perfil facebook' property='fb:admins'/>
<meta content='id pagina facebook' property='fb:page_id'/>

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.

Configurar ancho de la caja:
En el código podéis observar en rojo el ancho de la caja  (por defecto va a 550px), si no se adapta a vuestras necesidades, con aumentar o disminuir lo solucionáis.
El ancho de la caja de Facebook lo marca: data-width='540' , procuradad colocar siempre 10px menos que en el resto.

Paso # 6: Ahora presione el botón "GUARDAR PLANTILLA" y ya está todo hecho. Enhorabuena

**Si esto no funciona ...

Puede que no tenga las bibliotecas jQuery instalados en su plantilla. Para agregarlos Copia / pega el siguiente código y agregarlo a la plantilla justo antes de </head>

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

***Si este código ya lo tenías añadido con anterioridad, no es necesario que vuelvas a colocarlo.***


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

51 comentarios

Nada, me respondo a mí mismo, no hay manera de que deje un comentario con el sistema clásico sin que automáticamente se duplique en los comentarios de G+. No sé a qué puede deberse...

Una sugerencia. Creo que quedaría mejor si logras que cuando se pincha en un tipo de comentarios, se escondan los otros que pudieran estar abiertos. Probando pinché en G+ y cuando le di a los de Facebook, pensaba que no habían salido... hasta que evidentemente hice scroll y allí estaban ;)

Solucionado, gracias Oloman por tu apunte.
La verdad es que a veces no nos fijamos en pequeños detalles, vamos tan acelerados que no nos damos cuenta.

Mucho mejor ahora. Sí señor ;)

facebook is not showing.Is there any problem?

If Poyraz Sahin, there were problems but I've solved

Me funcionó en el primer intento pero tengo unas dudas haber si me las puedes resolver, cuando carga la pagina queda expandido por defecto los comentarios de Facebook, es posible que mejor queden los de Blogger?

Yurika ese es el problema, al ocultar los de Facebook, luego no se visualizan así que los he dejado visible porque son los que más problemas dan al ocultarlos.
Saludos.

No me sale, tengo Scriptaculous en la plantilla, como puedo resolver el conflicto con Jquery?

La consfiguracion de Comentarios la tengo como "Insertados" alguna otra observacion, ya que me aparece el sistema de comentarios pero no hace el cambio, aparece pro default los de facebook pero no cambia a Google+ ni a los clasicos, los comentarios clasicos se añaden ademas abajo.

Lo estoy probando en http://blog.soluciones-libres.com

Ya sabemos que jquery y Scriptaculous no se llevan muy bien, pero mira este tutorial delPotro haber si te puede ayudar.

En cuanto a los comentarios debes colocarlo:
Ubicación de los comentarios ----Debajo de la Entrada

Gracias, en el tutorial del Potro ya había visto como hacerlo, lo he hecho con otros turoriales, pero en este caso no encuentro donde sustituir los "$" que menciona el Potro, no hay "$" para sustituir en este tuturial... Quizás algún otro plan? Gracias.

Ya he retirado Scriptaculous solo tengo JQuery y me sigue fallando el sistema:

1.- solo funciona entradas que ya tiene comentarios (a veces)
2.- No oculta los otros comentarios, se visualizan los De Blogger y Facebook
3.- No cambia entre comentarios se queda atorado.... :S

Disculpa tanta molestia quedo resuelto, algo en mi vieja plantilla hacia que no funcionara.

Este comentario ha sido eliminado por el autor.

¡Hola Amor Sevillista!
Una pregunta; ¿Se puede incluir los comentarios de disqus en este truco?
De antemano muchas gracias :D

Disculpa que te moleste de nuevo amigo :/
¿Pero se podrían usar los cuatros sistemas de comentarios de una sola vez?
De antemano muchas gracias :D

Comentame que clase de problemas te han surgido...No soy adivino..jaja.

Muchas gracias funciona!! una pregunta como hago para que los comentarios me lleguen notificaciones a mi cuenta de facebook oh correo electrónico amigo un saludo desde honduras

Lo que pasa que no me sale la opcion esa de moderar oh de la configuración la caja me aparece. en las entradas pero no me da opción de configurarla otra cosa no me llegan las notificaciones cuando se comenta

Luis, si ves el comentario anterior y lees esa entrada saldrás de dudas, te explica como moderar los comentarios.

Amor Sevillista talves moleste mucho mil disculpas y gracias por tu tiempo pero me sale la caja para comentar pero no puedo hacer que me aparezca esa opción que aparece de moderar ya tengo la aplicación creada dentro a la dirección esta que esta en tu tutorial página de moderación de comentarios de facebook pero no me sale ningún comentario ayúdame por favor gracias por tu tiempo...

Luis, no veo en tu blog de pruebas instalado los comentarios, así que poco puedo hacer y aparte creo que tienes instalado un script que no me permite ver el código fuente.

Hola, mira quiero instalar este código en mi sitio web todouc.cl, pero yo quisiera que aparecieran solo los comentarios de facebook y blogger. Existe una forma de eliminar del código los comentarios de Google+? De antemano muchas gracias

Le contestó por aquí .. echo todo y bien y por el camino encontré algo que llebva tiempo. Buscándolo y bien. Me han dejado un mesaie con un Link. Como convertir eso para que pinchen diretamente aaceda a a su página ???????.. en tan poco tiempo aprendido mucho y lo que queda por saber jajajaja pero tengo la cabeza ......

Muchas Gracias, me sirvio para mi blog

Una duda mas, (perdón por el doble post), puedo diseñar mis propios botones de comentarios para colocarlos? con el mismo código?

Diego, correcto puedes diseñarlos y adaptarlos como quieras.

Este comentario ha sido eliminado por el autor.

hola amigo como estas , que raro presiono cualquier boton en mi blog y no se abre ninguna caja de comentario, tendra algo q ver que debajo de cada post tengo un gadget de entradas populares? gracias http://thdjsclub.blogspot.com

quedo una barra con las opciones arriba de el bloque de comentario ademas facebook cambio el como agregar el cuadro de comentarios https://developers.facebook.com/docs/plugins/comments

este es el resultado que me dio http://prntscr.com/46r5nu

Hola amigo, quiero saber como puedo meter solo los comentarios de Google+ en mi blog.. y si se puede, saber como se meten los comentarios de Blogger, no me gusta diqus o FB

RcZero en el panel de administración de blogger en el apartado Google+ puedes colocarlo marcando la casilla "Usar Comentarios de Google+ en este blog"

Amigo, creeme qe he intentado de todo, pero no ha funcionado. gracias a ti decifraste el codigo de embeber los comentarios de Google+ a un blog por medio de un gadget... te lo agradezco.. hice una entrada y te mencione amigo.

mi blog es: circuloblogger. tambien me gusta ayudar a crear cosas para blogger, ahh y tu web es chevere.

Gracias Andres para eso estamos, intentar ayudar y aprender todo sobre Blogger.

tengo una duda, como hago para eliminar la caja de (google) y solo quedar con blogger y FB, y si no es mucha molestia, me gustaría saber si hay una manera de que los comentarios que salgan visibles en primera instancia fueran los de blogger, gracias y gran post.

Hola que tal me encontre con su blog y me parece interesante instale los comentario pero no me funcionan al darle click no pasa nada.
Algun comentario al respecto saludos , por cierto segui todo al pie de la letra.

saludos Mario Martinez

Hola, como hago para ponerle color fondo blanco a los cometrios de facebook?

ya hize todo, y salio bien pero no aparecen los comentarios para moderarlos que puede ser?


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"