Si tenemos un sitio web para exponer nuestros servicios, o productos… o bien para lo que sea que uses tu propio sitio web, es probable que desees darle la posibilidad a tus lectores de que le den «me gusta» a tu página de Facebook a través de ese sitio web, de esa forma, esos lectores podrán «seguir» las publicaciones que tú hagas a través de Facebook.
Veremos cómo agregar esta ventana o cuadro de «Me Gusta» a tu sitio web, blog, o espacio en internet.
Antes de empezar de lleno con el tutorial, aclaremos conceptos clave que debes tener en cuenta para entender bien qué vamos a hacer, para qué y cómo.
Empecemos con los conceptos claves:
- Sitio web: entenderemos por sitio web, al espacio en internet que es de tu propiedad -por así decirlo. Por ejemplo, si tienes un blog en WordPress, o un blog en Blogger, o tienes un servidor propio (hosting), etc. Todos esos espacios, se denominarán como «sitio web» en este artículo.
- URL: cuando lean URL, si aún no entienden qué es, se recomienda leer: «URL, link, o dirección web«
- Código fuente: es código de programación, en algún lenguaje de programación web. Por lo general será html con css. Aunque puede haber PHP, ASP, etc.
- Cuadro «Me gusta» o Ventana «Me gusta» o como lo llames, es un plug-in que se agrega a tu sitio web. Para entenderlo mejor, es un código (script) que se agrega a tu código fuente del sitio web, para darle una funcionalidad específica. En esta oportunidad, el nombre que Facebook le da a este cuadro es: «Like Box»
- Ancho y Alto: son medidas, y serán expresadas en «px» (pixeles). Es importante saber que el ancho será «width» y alto será «height» en el código fuente que verán en este artículo, así saben cómo pueden manipular el cuadro en donde quieran colocarlo (en el sitio web).
- Etiquetas html: «head» y «body». Son partes del código fuente, en lenguaje HTML. No debes preocuparte si no entiendes para qué se usan, pero sí debes aprender a ubicarlas, y saber dónde están, cuando se abren y cuando se cierran. Así que si no estás familiarizado con estas etiquetas, ensuciate un poco las manos, y lee tu código fuente de tu sitio web. Busca <head> y </head> para cuando nosotros digamos «etiqueta head» y busca <body> y </body> para cuando digamos «etiqueta body». 😉
Si no entendiste algún concepto, no te preocupes demasiado.
Ahora empezaremos con el tutorial, y manos a la obra. Aquí sí, tendrás que entender el paso a paso. Si surge alguna duda, tendrás que ir a nuestro foro de ayuda en MasFB, exactamente aquí a nuestra sección de «Programación Web» donde con mucho gusto te ayudaremos a integrar tu Facebook con tu sitio web absolutamente gratis!
Ahora empezaremos con el tutorial, y manos a la obra. Aquí sí, tendrás que entender el paso a paso. Si surge alguna duda, tendrás que ir a nuestro foro de ayuda en MasFB, exactamente aquí a nuestra sección de «Programación Web» donde con mucho gusto te ayudaremos a integrar tu Facebook con tu sitio web absolutamente gratis!
Paso por paso
- Verificar si el código de integración de Facebook está en tu sitio web. Busca lo siguiente: «fb-root«.
- Si lo tienes, debes ignorar este paso.
Simplemente comprueba que sea el código que te recomendamos aquí. - Si no lo tienes, agrega lo siguiente inmediatamente después del <body>
<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_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> - Luego nos concentraremos en el lugar donde queremos agregar el cuadro de «Me Gusta» de nuestra web. Si ya sabemos exactamente dónde agregarlo, vamos hasta esa sección del código, que será dentro de las etiquetas BODY, y debemos agregar el siguiente código:
<div class="fb-like-box" data-href="https://www.facebook.com/PAGINA-AQUI" data-width="292" data-show-faces="true" data-header="false" data-stream="false" data-show-border="true"></div> - Prestar atención a las partes del código:
- data-href: donde dice «/PAGINA-AQUI», tendrás que colocar la URL de tu página de Facebook. En nuestro caso, pondríamos «/MasFB». Debe quedar la URL de tu página del tipo https://www.facebook.com/tupagina
- data-width: es el ancho del cuadro, lo mínimo recomendable por Facebook es de 292. Puedes modificar y colocar el ancho que desees.
- data-shoow-faces: es personalizable, puedes pasarlo a «false» si no deseas mostrar las caras de tus fans en el cuadro.
- data-header: es personalizable, puedes pasarlo a «true» si deseas que aparezca un texto que dice «Buscanos en Facebook» (ese texto no puede personalizarse).
- data-stream: es personalizable, puedes pasarlo a «true» si deseas que aparezca en el cuadro, las últimas novedades que publicó la página en Facebook.
- data-show-boder: es personalizable, puedes quitarle los bordes al cuadro, si colocas «false«.
- Personaliza lo que desees, y guarda la planilla de tu sitio web.
- Observa los cambios de tu web.
- Listo!
Las opciones del cuadro «Me Gusta» de Facebook
Cuadro sin STREAM y con bordes
Si en tu web pegaste el código que te pasamos aquí, deberías ver este cuadro tal como te mostramos en esta captura, con los bordes, y las caras de los fans que tenga tu página (si es que tiene algún fan).
Cuadro con STREAM y bordes
Cuadro sin STREAM y sin bordes
Cuadro sin STREAM y sin rostros
Y esto es todo lo que podemos hacer a través de este artículo.
Somos concientes de que el proceso puede resultar complicado para ciertas personas que no están familiarizadas con el código web, o la programación web. Por eso si es tu caso, te damos la posibilidad de que ingreses -gratis- a nuestro foro de ayuda, abras un tema y nos pidas ayuda, te estamos esperando en el foro, estamos respondiendo a aquellas personas que no pudieron integrar su sitio web.
Saludos,
MasFB
