NorfiPC
NorfiPC » Códigos » Botones de Facebook

Como usar los botones de Facebook en los sitios web


Compartir en Google Compartir en Facebook Compartir en Twitter Pinear imágenes en Pinterest
Códigos para mostrar el botón Me Gusta, Compartir, Enviar, Comentar, Seguir y el widget o cuadro de Page Plugin en las páginas de un blog o sitio de internet y personalizarlos, para obtener más tráfico y visitantes. Ejemplos de los que usamos en nuestro sitio.
Como usar los botones de Facebook en los sitios web
Todos los botones y widgets (cuadros) disponibles en Facebook para mostrarlos en las páginas de un blog o sitio web.
La red social Facebook debido a su popularidad es una inmensa fuente de tráfico y visitantes para los sitios de internet.
Para darle más visibilidad a lo que compartimos en nuestro blog o sitio, debemos crear los botones que faciliten a los lectores compartir las publicaciones en su perfil y que así llegue a otras personas y que de esa forma muchas de ellas entren a nuestro sitio.
También podemos usar un widget o cuadro para promocionar nuestra página en esta red y facilitar que los lectores se conviertan en nuestros fans, sin tener que salir de nuestro sitio.
El propósito de este artículo es explicar a los lectores que nos preguntado, como crear los botones y widgets que usamos en este sitio y de paso comentar otros existentes.



Botones de Facebook para un blog o sitio web


Los botones y widgets de Facebook forman parte de los Social Plugins, utilidades creadas para la interacción de los sitios web con la red social.
Para usarlos no se necesita poseer una cuenta para desarrolladores, ni crear una aplicación (app), solo es necesario insertar el código necesario en las páginas donde se desean mostrar.
Otra opción es usar servicios auxiliares, pero en este caso no tendrán las mismas funcionalidades.
Para usar cualquiera de los botones o cuadros se necesita insertar en la página solo una vez el siguiente script que cargara el archivo JS con las funciones para inicializar cualquiera de los botones que especifiquemos.




Botón Me Gusta (Like)


Es el botón más famoso y popular de Facebook, es un pequeño rectángulo que al dar clic encima abre un cuadro para indicar que nos gusta la página que estamos leyendo.
Es opcional agregar un comentario.
Como resultado se mostrara en nuestra biografía o página de perfil una publicación con el título del artículo que posee un enlace a la página. También una corta descripción.
Los amigos que reciban la publicación podrán al dar clic en el enlace entrar directamente a la página original.
El botón Me Gusta de forma predeterminada, muestra al lado un contador con el número de veces que la página ha captado un Me Gusta y miniatura de nuestros amigos en la red social que lo han usado.

El ancho predeterminado del botón es de 450 pixeles, por lo que debemos especificar un tamaño menor para que se adapte al ancho de la pantalla de los móviles.
Para eso le agregamos al código el parámetro "data-width" con el valor 292.
Puedes usar el siguiente código para insertarlo:




Como usar el botón Me Gusta en imágenes


En el código usado para renderizar el botón Me Gusta podemos usar el parámetro "href" para especificar la dirección exacta de la página que se desea sugerir. Si no se emplea el botón usa la dirección predeterminada de la página donde se encuentra.
Otra opción es indicar la dirección exacta de una imagen, para en este caso permitir a los lectores indicar que les gusta la imagen y compartirla con los amigos.
En ese caso se debe insertar el código justo después de una imagen.
Nosotros empleamos el siguiente código, solo reemplaza la dirección url de la imagen a usar:

De esa forma lo usamos nosotros en muchas páginas y nos trae como beneficio más visibilidad de lo que publicamos.
Un ejemplo se puede ver en la siguiente imagen:
Compartir una publicación de un sitio web en Facebook para obtener más alcance y popularidad


Más información en Facebook



Botón Compartir (Share)


Funciona de forma algo similar al botón Me Gusta.
La diferencia es que el cuadro de Facebook que se abre ofrece más opciones para compartir y personalizar la publicación, podemos compartirla en nuestra página de perfil o en una página que administramos.
Podemos usar el botón Compartir de forma independiente o al lado del botón Me Gusta, este último es el método que empleamos en nuestro sitio.

Para eso solo es necesario agregar el parámetro "data-send"

Más información en Facebook.



Widget o cuadro de Page Plugin


Antiguamente llamado Like Box, Page Plugin es un cuadro usado para promocionar una página de Facebook.
La principal de las funcionalidades es que permite a los lectores indicar que les gusta nuestra página usando un botón, sin tener que entrar a Facebook, ni abandonar la página que están leyendo.
El cuadro muestra la imagen y el icono de la página, el número de me gusta y varias miniaturas de nuestros amigos que les gusta esta página.
Esto puede ser decisivo para que los lectores se interesen por esta página.
Además muestra dos botones, uno para indicar que nos gusta la página y otro para compartirla.
El Widget se puede personalizar para modificar el tamaño del cuadro y decidir qué elementos se mostraran.
Nosotros especificamos el tamaño máximo que es 500 pixeles, pero es completamente adaptable o sea que se adapta al tamaño de la pantalla del dispositivo.

Se debe especificar un tamaño menor solo si pretendemos mostrarlo en la barra lateral u otra zona de tamaño reducido.
Por supuesto, para usar este widget necesitamos crear una página en Facebook para nuestro sitio y mantenerla actualizada compartiendo en ella todo lo que publicamos.
Nosotros usamos el siguiente código:

Más información en Facebook.



Botón de seguir (Follow)


Permite que otras personas se conviertan en seguidores o fans de nuestro perfil o de otro.
Solo funciona especificando la dirección de una página de perfil o biografía, no de una página de Facebook.
Yo no lo puedo emplear ya que utilizo Facebook como NorfiPC (página de Facebook) y no como Norfi Carrodeguas (página personal).

Usa el siguiente código para mostrarlo:

En el parámetro "data-href" es necesario especificar la dirección en Facebook de la persona a seguir.
Más información en Facebook.

Cuadro de Comentarios


Plugin que permite a las personas dejar comentarios en cualquier página web, usando su cuenta de Facebook.
Los comentarios se pueden moderar y también vanear personas por el administrador de la página.
Para eso es necesario incluir una etiqueta de Open Graph con el user de Facebook o con el número de identidad de la App.

Hemos usado el siguiente código:

Más información en Facebook.

Botón Enviar (Send)


Es un botón que permite enviar publicaciones de forma privada y directamente con una persona en Facebook.
Para eso en el cuadro que se abre debemos seleccionar o escribir el nombre de usuario de un amigo.

Usa el siguiente código:

Nosotros no lo utilizamos en nuestro sitio, pero puede ser una opción válida y útil para algunos.
Más información en Facebook.

Como dar más espacio a los botones de Facebook


Generalmente cuando usamos los botones de Facebook junto a otros de diferentes redes sociales, queda muy poco espacio lo que dificulta a los que acceden usando un dispositivo portable usarlos con el dedo.
Podemos espaciarlos aumentando el valor del margen usando CSS.
Para eso solo agrega la siguiente línea al archivo de estilo CSS de tu blog o sitio web:
.fb_iframe_widget{margin:8px 0 8px 0;}

Etiquetas de Open Graph


Al compartir cualquier dirección de una página en Facebook, automáticamente el buscador (crawler) escanea la información sobre los elementos de la página.
Para que Facebook detecte correctamente el título de una página, la descripción y las imágenes que contiene, necesitamos usar las etiquetas de Open Graph.
Es un protocolo de Facebook que también facilita que nuestro contenido pueda aparecer en las búsquedas de esta red social.
Si planeamos apoyarnos en nuestro sitio con las acciones de los me gusta y compartir de Facebook, debemos de usar Open Graph que convierte un simple archivo HTML en un Objeto Open Graph.
Lee información detallada sobre el uso de estos metatags: Como usar las etiquetas de Open Graph de Facebook en los sitios web

El archivo JS de Facebook y todos los botones se inicializan solo después de terminar la carga de todos los elementos de la página, por lo que no perjudica en lo absoluto la velocidad del sitio, ni afecta la visibilidad de la página en conexiones de internet lentas.

Otras páginas relacionadas



Síguenos en las redes sociales


Norfi Carrodeguas en Google+ Trucos de NorfiPC en Facebook @NorfiPC en Twitter NorfiPC en Pinterest

Buscar en este sitio

 
Inicio | Mapa del sitio | Sobre mí | RSS