Tutorial: Cómo agregar comentarios de Facebook en Blogger

  • Autor Autor linuxer
  • Fecha de inicio Fecha de inicio
L

linuxer

Gamma
Verificación en dos pasos activada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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:
Tutorial aprobado y agregado al listado, se agradece el aporte.
 
Hola amigo, acabo de intentar agregarlo a un sitio y no me sale, el sitio es Enlace eliminado, 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
 
Hola amigo, acabo de intentar agregarlo a un sitio y no me sale, el sitio es Enlace eliminado, 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 😕, 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:
Buen aporte! :encouragement:
 
Buen aporte
 
Muy bueno, ya los he agregado pero siempre se me olvida al rato.
 
Listo, funciona, gracias.
 
Gracias, me funciono a la perfección 🙂
 
gracias por el aporte, probaré en mi sitio.
 
Muchas gracias por el aporte.
 
wow muy bueno gracias por el aporte hermano 😛8:
 
Muchas gracias, lo andaba buscando desde hace rato, vamos a ver si funciona :welcoming:
 
Gracias por el aporte. Es realmente importante y buscado esto.
 
buen aporte, gracias!
 
gracias amigo, ahora que estoy aprendiendo a usar blogger con esto dejare bien chvr mi sitio 😉
 
[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:
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?
 

Muchas gracias por tu pronta respuesta! 😀

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!
 
Gracias, muy buen tutorial!