Personalizar botón compartir en app de facebook

Buenas! Hoy os traemos un pequeño truco para poder personalizar los botones compartir de facebook de nuestras aplicaciones de facebook o pestañas.

En primer lugar decir que si quereis utilizar el clásico botón estandar de facebook o el logo, podeis seguir usando el que facebookte proporciona en la siguiente página:

https://developers.facebook.com/docs/plugins/share-button

Pero si queremos compartir a traves de una imagen, o de un enlace distinto al que facebook nos ofrece, podemos utilizar este sencillo truco que os voy a dar a continuación.

Pongamos que quereis usar una imagen, tendríamos el enlace con la imagen contenida de la siguiente forma:

<a id="boton-share"><img src="imagen.jpg"></a>

De este modo tenemos nuestro enlace con id=”boton-share” y la imagen que sea contenida.

Ahora debemos Incluir el código JQuery que hará funcionar el botón:

$(".boton_share").click(function(e){
  e.preventDefault(),
  FB.ui({
   method:"feed",
   name:SHARE_NAME,
   link:SHARE_LINK,
   picture:SHARE_PICTURE,
   caption:SHARE_CAPTION,
   description:SHARE_DESCRIPTION
  }
  )}
 )

Teniendo que sustituir (entre comillas ya que es una cadena o le pasamos la variable si antes la habeis definido):

SHARE_NAME : por el nombre de la aplicación a compartir

SHARE_LINK: enlace de la página a compartir

SHARE_PICTURE: enlace donde tenemos alojada una imagen para mostrar al compartir

CAPTION: título

DESCRIPTION: descripción

 

Por supuesto antes tendremos que haber definido el objeto FB, que nos proporciona Facebook para que añadamos al inicio de cada una de nuestras páginas de nuestra app.

Y esto es todo por hoy, espero que os sea de ayuda y si teneis cualquier duda ya sabeis 🙂

 

Deja un comentario