• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Botones para Compartir de Facebook

1.- Utilizar un botón/script de Facebook

Facebook tiene una cosa que le llaman el "Share Button", que crea este botón por su propia cuenta al insertar un enlace y un script en tu página web. Esta manera de actuar es interesante, pues estos botones son bastante "inteligentes" y proveen de un contador de personas que enviaron tu enlace a la red social, aparte de la propia funcionalidad de compartir. Además, el servicio se puede configurar para que muestre distintos tipos de botones, que podemos elegir en función del aspecto que tenga nuestra página.

Es quizás la manera más adecuada de colocar el botón, pero tiene el inconveniente de no permitir personalizar la imagen o botón que se va a utilizar (o por lo menos en el momento de escribir este artículo no existe esta opción). Por ello, si queremos utilizar un botón con aspecto personalizado, tendremos que buscar otra solución.

Todas las instrucciones para conseguir implementar este botón en tu web están en la Wiki de desarrolladores de Facebook, en la página que trata sobre Facebook Share.

El código HTML para insertar un botón de los que provee Facebook tendrá esta forma:

Además, podemos seleccionar el tipo de botón a utilizar entre varias posibilidades, con el atributo "type" en el enlace.

Share

El atributo del enlace "share_url" es opcional y sirve para indicar la URL que queremos que se comparta. Pero si no indicamos nada en ese atributo se enviará a Facebook la URL de la página donde se ha colocado el botón.

Además, si queremos que dentro del botón esté escrito un mensaje personalizado, podemos poner texto en el enlace, algo así como:

Compartir en FB

2.- Enlace simple de enviar a Facebook

Otra variante que podemos implementar, si es que deseamos personalizar el botón de enviar a Facebook es crear un enlace normal, dirigido a la URL para compartir en Facebook.

Compartir FB

En este caso se crearía un enlace y en el texto aparecería "Compartir FB", y claro, si queremos utilizar nuestro propio icono en vez de ese texto, dentro pondríamos la imagen que deseamos.

3.- Enlace que se abra en un popop

Este código se podría alterar un poco para que este enlace se abra en una ventana secundaria o popup. Para ello tenemos que utilizar un poco de Javascript por nuestra cuenta.

Compartir con popup

Botón Me Gusta de Facebook

Al igual que el botón permite al usuario compartir su contenido con tus amigos en Facebook. Cuando el usuario hace clic en el botón igual que en su sitio, una historia aparece en el News Feed los amigos del usuario "con un enlace a su sitio web.

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


<div class="fb-like" data-href="facebook.com/Nombre_de_la_Organizacion" data-send="true" data-width="450" data-show-faces="true"></div>

COMPARTIR EN FACEBOOK
Compartir en FB

Comentarios de Facebook

Caja de comentarios es un plugin social que permite al usuario comentar en su sitio. Las características incluyen herramientas de moderación y de distribución.

Relevancia social: apartado de comentarios utiliza señales sociales a la superficie de los comentarios más alta calidad para cada usuario. Los comentarios están ordenados para mostrar a los usuarios los comentarios más relevantes de los amigos, amigos de amigos, y los temas de discusión que más le gustaba o activo, mientras que los comentarios marcados como spam se oculta a la vista.

Distribución: Los comentarios se pueden compartir fácilmente con amigos o con gente que le gusta de su página en Facebook. Si un usuario deja la "Publicar en Facebook" casilla marcada cuando se envía un comentario, una historia aparece en News Feed de sus amigos lo que indica que ella ha hecho un comentario en su sitio web, que habrá también un enlace a su sitio.

Amigos y personas que les gusta la página se puede responder a la discusión por la simpatía o de responder a los comentarios directamente en el News Feed de Facebook o en el apartado de comentarios en su sitio. Temas permanecer sincronizados a través de Facebook y en el apartado de comentarios en su sitio, independientemente de dónde se hizo el comentario.

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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="facebook.com/Nombre_de_usuario" data-num-posts="2" data-width="500"></div>

COMPARTIR FACEBOOK
Compartir en FB

Transmisión en vivo de Facebook

El plug-in Live Stream permite a los usuarios que visitan su sitio o aplicación comparten la actividad y los comentarios en tiempo real. Transmisión en vivo funciona mejor cuando está ejecutando un evento en tiempo real, como video streaming en vivo de conciertos, discursos o transmisiones por Internet, chats en vivo Web, seminarios, juegos multijugador masivos.

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/all.js#appId=ID_de_la_Aplicacion&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-live-stream" data-event-app-id="ID_de_la_Aplicacion" data-width="400" data-height="500" data-always-post-to-friends="false"></div>

COMPARTIR EN FACEBOOK
Compartir en FB

Imágenes de Perfil de Facebook

El plug-in Facepile muestra las imágenes de perfil de Facebook de los usuarios que han gustado de la página o se han inscrito en su sitio. Si desea que el plugin para ver los usuarios que han gustado de la página, especifique la dirección URL de la página como el href parámetro. Si desea que el plugin para ver los usuarios que se han inscrito en su sitio, especifique su ID de aplicación como el app_id parámetro.

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/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-facepile" data-href="facebook.com/Nombre_de_Usuario" data-width="200" data-max-rows="1"></div>

COMPARTIR EN FACEBOOK
Compartir en FB

Actualizaciones de Facebook

Al igual que la caja es un plugin que permite a los sociales Facebook Page propietarios para atraer y ganar le gusta de su propio sitio web. Al igual que la caja permite a los usuarios:

Ver cómo muchos de los usuarios ya como esta página, y que de sus amigos también me gusta

Lea los mensajes recientes de la página

Al igual que la página con un solo clic, sin necesidad de visitar la página

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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like-box" data-header="true" data-href="http://www.facebook.com/Nombre_de_Uusuario" data-show-faces="true" data-stream="true" data-width="292">
</div>


COMPARTIR EN FACEBOOK
Compartir en FB