Tutorial: Añadir caja de comentarios Facebook en Blogger

linuxer

Gamma
Verificación en dos pasos desactivada
Desde
1 May 2012
Mensajes
153
He decidido poner comentarios de Facebook en mis blogger por dos motivos
1)Cuando alguien comenta aparece en su muro
2)Los visitantes suelen estar ya con el login hecho

He terminado haciéndome un pequeño código javascript para la API de Facebook para que se muestre el correspondiente a cada post, lo comparto aquí

En Plantilla -> Editar Html , y marcamos "Expandir plantilla de artilugios"

Luego dentro del <body>, justo debajo copiamos esto

Insertar CODE, HTML o PHP:
&lt;!-- FACEBOOK SDK EMPIEZA --&gt;
&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(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 = &quot;//connect.facebook.net/es_ES/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));&lt;/script&gt;
&lt;!-- FACEBOOK SDK ACABA --&gt;

Luego buscamos la línea
<div class='post-footer'>

nos deben salir dos coincidencias, solo interesa la primera y justo encima pegamos esto

Insertar CODE, HTML o PHP:
<!-- FACEBOOK COMENTARIOS EMPIEZA -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='currentUrll' style='display:none'><data:post.url/></div>
<br/><br/>
<script>
var urll=document.getElementById(&quot;currentUrll&quot;).innerHTML;
document.write(&quot;<div class='fb-comments' data-colorscheme='dark' data-href='&quot;+urll+&quot;' data-num-posts='5' data-width='640'/>&quot;);
</script>
</b:if>
<!-- FACEBOOK COMENTARIOS ACABA -->

si nuestro blog es blanco quitamos lo que dice: data-colorscheme='dark'

si queremos mostrar mas o menos de cinco cambiamos el número de: data-num-posts='5'

dependiendo del ancho del blog cambiamos: data-width='640'

yo siempre que añado código a la plantilla suelo separarlo varias líneas vacías antes y después para encontrarlo fácilmente

y hecho, si os funciona :encouragement:
 
Última edición:

Carlos Arreola

Admin
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
4.358
Tutorial aprobado y agregado al listado, se agradece el aporte.
 

JuanDRomero

Eta
SEO
Verificación en dos pasos desactivada
Desde
14 Ago 2011
Mensajes
1.461
Hola amigo, acabo de intentar agregarlo a un sitio y no me sale, el sitio es Descargar gratis, deje el script agregado para que puedas entrar al sitio y mirar si coloque todo bien, tengo los comentarios activado y agregue tal cual dices.

Saludos
 

linuxer

Gamma
Verificación en dos pasos desactivada
Desde
1 May 2012
Mensajes
153
Hola amigo, acabo de intentar agregarlo a un sitio y no me sale, el sitio es Descargar gratis, deje el script agregado para que puedas entrar al sitio y mirar si coloque todo bien, tengo los comentarios activado y agregue tal cual dices.

Saludos

con comentarios a mi no me ha dado problemas porque la api va con facebook independiente

me aparece el primero, pero no el segundo código :confused:, busca de nuevo <div class='post-footer'>, si te salen dos concidencias prueba a cortar ese código que has pegado de donde lo tienes y pegarlo encima de la otra coincidencia

es lo unico que se me ocurre

añado: en tu blog sale dos veces la api de Facebook, la que yo puse y luego abajo la misma, en princpio con una vez bastaria, pero eso no es ningun problema
 
Última edición:

SrGato

Beta
Verificación en dos pasos desactivada
Desde
26 Nov 2012
Mensajes
40
Buen aporte! :encouragement:
 

Juvinao

Xi
Programador
Verificación en dos pasos desactivada
Desde
25 Sep 2011
Mensajes
4.450
Buen aporte
 

EliJ

1
Pi
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
21 Mar 2012
Mensajes
5.940
Muy bueno, ya los he agregado pero siempre se me olvida al rato.
 

miirkoo

Beta
Verificación en dos pasos desactivada
Desde
15 Ago 2011
Mensajes
34
Gracias, me funciono a la perfección :)
 

Liliru

Beta
Verificación en dos pasos desactivada
Desde
3 Feb 2012
Mensajes
51
gracias por el aporte, probaré en mi sitio.
 

César Arévalo

1
Pi
Marketing
Verificado con videollamada
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
4 Nov 2009
Mensajes
5.680
Muchas gracias por el aporte.
 

matigonza

Beta
Verificación en dos pasos desactivada
Desde
13 Ene 2013
Mensajes
41
Muchas gracias, lo andaba buscando desde hace rato, vamos a ver si funciona :welcoming:
 

Pulsar

1
Ómicron
Verificado con videollamada
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
7 Jul 2011
Mensajes
4.535
Gracias por el aporte. Es realmente importante y buscado esto.
 

yonatan26

Iota
Videoblogger
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
25 Mar 2011
Mensajes
2.023
buen aporte, gracias!
 

frans185

Baneado
Curioso
Verificación en dos pasos desactivada
Desde
20 Dic 2012
Mensajes
8
gracias amigo, ahora que estoy aprendiendo a usar blogger con esto dejare bien chvr mi sitio ;)
 

*+LcP+*

Eta
Redactor
Verificación en dos pasos desactivada
Desde
24 Jun 2009
Mensajes
1.483
[MENTION=23826]linuxer[/MENTION] Muchas gracias por el tutorial! Por fin uno que me funcionó! :) Tengo una pregunta, dónde pongo el código si lo que quiero es que los comentarios se vean en la página principal?
 
Última edición:

linuxer

Gamma
Verificación en dos pasos desactivada
Desde
1 May 2012
Mensajes
153
si quitas estas dos lineas te aparecen en la pagina principal

<b:if cond='data:blog.pageType == &quot;item&quot;'>

</b:if>

pero si lo que quieres es comentarios de la web principal no necesitaras javascript, lo puedes hacer de aqui, copias el código que te da y lo pones como un widget si quieres

https://developers.facebook.com/docs/reference/plugins/comments/


[MENTION=23826]linuxer[/MENTION] Muchas gracias por el tutorial! Por fin uno que me funcionó! :) Tengo una pregunta, dónde pongo el código si lo que quiero es que los comentarios se vean en la página principal?
 

*+LcP+*

Eta
Redactor
Verificación en dos pasos desactivada
Desde
24 Jun 2009
Mensajes
1.483
si quitas estas dos lineas te aparecen en la pagina principal

<b:if cond='data:blog.pageType == "item"'>

</b:if>

pero si lo que quieres es comentarios de la web principal no necesitaras javascript, lo puedes hacer de aqui, copias el código que te da y lo pones como un widget si quieres

https://developers.facebook.com/docs/reference/plugins/comments/

Muchas gracias por tu pronta respuesta! :D

Tengo otra duda. Ya implementé el cambio que me indicaste, pero he notado que los mismos comentarios salen en todas las cajas de comentarios ¿Hay alguna forma de modificar eso o simplemente es así como funciona?

Saludos!
 

raveny

Dseda
Verificación en dos pasos desactivada
Desde
27 Nov 2010
Mensajes
1.169
Gracias, muy buen tutorial!
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba