El widget de facebook no carga en mi web

ichiparanoid · #1 (**permalink**) 12/07/2015, 23:48

Cordial saludo a todo el mundo.

Acabo de llegar a este foro porque estoy super verde en desarrollo web y estoy diseñando una web para una organización sin ánimo de lucro que ayuda a niños de escasos recursos (Alguien tenía que hacerlo a costo cero). Como estudio análisis y desarrollo de sistemas de información, soy un bloguero viejo, etc me pidieron a mí que la hiciera.
Para aligerar trabajo y teniendo en cuenta que sólo sé hacer webs en html pelado usando editores wysiwyg utilicé el constructor zyro builder de mi hosting y realicé una primera página, sencilla y relativamente estética. Como quieren que la gente llegue a la nueva página de facebook que vamos a hacer, añadí un widget de la página developers.facebook.com y funcionó perfecto.

Ahora quiero hacer yo mismo una web desde cero sin verme atado a las plantillas. Como no requiere bases de datos empecé algo pequeño con html y css (Que tampoco sé usar mucho pero aprendo sobre la marcha).
En esta nueva página el código de javascript del facebook no me funciona.

Al darle a "Get code" me entrega dos códigos. Uno que va según las instrucciones en el body aunque tengo entendido que lo correcto es ponerlo en el head y otro que va donde quiero que se vea el widget.

En Zyro builder puse los dos juntos en un "cajón" para meter html y así funciona.

Pero en mi página ni poniendo el primero en head, ni poniéndolo después de body, ni poniendo todo junto.
De ninguna manera funciona y sólo me muestra un link a la página.

¿Alguien podría ayudarme con esto? No tengo ni idea de javascript y no sé qué hago mal.

El código es algo como esto:

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/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Código:

<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>

Gracias de antemano.

PD: Que difíciles son sus captcha. Comienzo a creer que soy un bot :)

diegoguerrero · #2 (**permalink**) 15/07/2015, 10:41

Estoy seguro de que existe la opción de ahorrarse todos los SCRIPT. Ve a la página, que te den permisos si no los tienes y busca alguna opción de insertar.

Coméntame cuando lo intentes.

banatube · #3 (**permalink**) 27/10/2015, 12:16

Pega este código ante de la etiqueta </head> en tu código HTML donde quieres poner el widget de facebook.

Código HTML:

<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/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Luego dentro de la etiqueta <body> en la parte donde quiere que aparezca el widget de facebook. Coloca este ultimo código.

Código HTML:

<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>

Pero recuerda debes cambiar la url de la pagina del código por la de tu pagina de facebook

Remplaza lo que está en color rojo

<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">NOMBRE DE MI PAGINA</a></blockquote></div></div>