Colocar Comentarios de Facebook en Blogger: Entrada por Entrada
Los comentarios de Facebook es modo de que tus visitantes comenten de una manera muy facil, con la cuenta de Facebook.
PASO 1:
Primero que todo tenemos que ir a la siguiente pagina Facebook Developers.
Y llenar los datos.
Url to comment on: Deberas poner tu direcion web "www.tuweb.com"
Width: El ancho de los comentarios: "Deberas ajustarlo a tu gusto"
Number of Posts: El numero de comentarios que se mostrara.
Color Scheme: Aqui el color ya se Blanco o Negro.
Una vez terminado de realizar lo anterior, presionar "Get Code"
PASO 2:
Nos dara dos codigos, el primero ira en un Gadget "HTML". Para ello en blogger nos dirigimos a
Diseño > Agregar un Gadget > "HTML/JavaScrip" > y pegamos el primer codigo.
PASO 3:
(GUARDA LA PLANTILLA DE TU BLOG ANTES DE REALIZAR ESTE PASO PARA RESPALDAR)
En Blogger, en el menú de la izquierda, dirígete a la opción "Plantilla" y pulsa "Editar HTML". Localiza la etiqueta "<body" (no pongas la etiqueta de cierre de body) y justo debajo inserta el código que extraiste de Facebook correspondiente al apartado del "<body>". Buscalo con la tecl CONTROL+F
<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>
NOTA: Debido a la última actualización que Facebook ha introducido en sus scripts, si te da errores en la plantilla al tratar de salvar el código anterior, utiliza este que a continuación te muestro.
<div id='fb-root'/><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/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
Si este código ya lo tenías añadido con anterioridad por tener alguna funcionalidad de Facebook incorporada ya al Blog, no es necesario que vuelvas a meterlo y puedes pasar al siguiente paso.
PASO 4:
Ahora, pulsando CONTROL+F busca la siguiente línea de código:
shareButtonsEncontraras la palabra entre las siguientes lineas
<b:include data='post' name='postQuickEdit'/>Justo debajo del doble cierre de div: </div> </div> introduce el segundo código de la página de Facebook Developers para añadir los comentarios de Facebook junto con una línea condicional que hará que sólo salgan cuando el usuario acceda al detalle de una entrada:
</span> <div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>
</div>
<b:if cond='data:blog.url != data:blog.homepageUrl'><b:if cond='data:blog.url != data:blog.homepageUrl'></b:if> : El "if cond" y su cierre al final en rojo expresan que sólo se mostrará lo que entre sus etiquetas se encuentre, cuando el usuario acceda al detalle de una entrada (cuando pulse "Más información").
<div id='comentariosFacebook'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>
</b:if>
<div id='comentariosFacebook'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>: Es el código que extraiste de Facebook Developers para colocar la edición de comentarios de la citada red social. Podrás modificar el "widht" (ancho) con respecto al ancho en píxeles de tus entradas.data-num-posts='10' :indica el número máximo de comentarios por página. Presta especial atención al uso de data:post.canonicalUrl que permitirá que el comentario quede exclusivamente vinculado a la entrada donde se ha realizado.
Pulsa "Guardar Plantilla" y ¡eso es todo!, ya tienes por fin comunicados ambos mundos: la parte Blogger con la parte Facebook.
