it-swarm-es.com

¿Cómo activar el botón Me gusta de Facebook desde el botón personalizado?

He creado un botón personalizado como Facebook.

Custom Like Button

¿Cómo puedo hacer que cuando haga clic en el botón, se active el botón "me gusta" proporcionado por Facebook como el de abajo?

Facebook Like Button

50
Eralph

De acuerdo con política de facebook en Social Plugins, el punto 4 dice:

"No oculte ni cubra los elementos de los complementos sociales".

No puedes cambiar la imagen directamente porque es proporcionada por Facebook.

30
Alexander Nenkov

El botón de Facebook está en un iFrame con una fuente que está en un dominio diferente, el dominio de Facebook, por lo que no puede cambiar el botón ya que está protegido por la política mismo origen.

Además, la política de Facebook prohíbe cambiar sus botones y logotipos al usar contenido incrustado de Facebook, como los botones sociales.

Por lo tanto, se supone que no debe poder cambiar los botones FB, e incluso si pudiera, estaría en contra de los Términos de servicio de Facebook.

Pero ... si aún desea hacerlo, puede usar el botón nativo de Facebook y colocar su propia imagen encima o debajo del botón de Facebook para falsificar un botón personalizado.

Colocar su imagen en la parte superior solo es posible si utiliza eventos de puntero CSS3, que harán que su imagen haga clic y el evento haga clic "a través" de su imagen y haga clic en el botón Facebook. Esto solo funciona en los navegadores más nuevos que admiten eventos de puntero.

Otra opción es colocar la imagen detrás del botón FB y establecer la opacidad del botón FB en cero.

Yo mismo lo he usado varias veces, y con un poco de investigación en el código de Facebook puede adjuntar eventos de desplazamiento y todo lo demás para que se vea como un botón personalizado. Tendrías que encontrar los elementos para configurar opacity : 0.

Nunca he pasado tiempo tratando de averiguar cómo hacer que la función diferente del botón original funcione en un botón personalizado, pero probablemente sea posible.

Todos mis intentos de activar realmente el botón FB con javascript o jQuery trigger () han fallado, pero tal vez alguien más haya descubierto cómo hacerlo.

21
adeneo

Cuando creas un elemento html con una clase similar a fb, el javascript SDK de Facebook lo convierte con un botón similar cuando se carga el documento. Puede hacer un elemento personalizado y activar el evento de clic del botón "me gusta" cuando el usuario haga clic en el botón personalizado.

Por ejemplo :

<input type="button" id="mycustombutton" value="Like">
<div style="display:none" class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

código jQuery:

$("#mycustombutton").click(function(){
      $(".fb-like").find("a.connect_widget_like_button").click();
      // You can look elements in facebook like button with firebug or developer tools.
});

Actualización

El SDK de Facebook ha estado creando un botón similar en un iframe y los navegadores no permiten la intervención en el iframe en la página. Creo que agregar el detector de eventos al elemento en iframe ya no es posible.

9
Mesut Tasci

Esto no está permitido por la razón obvia de que conduciría a fraude. Imagínese si cada vez que hace clic en una imagen en la web, no sabe si es una imagen real o si resultará en algo similar y aparecerá en su feed de FB. Sería desastroso.

Si desea hacer esto legítimamente, deberá crear una aplicación y hacer que el usuario autorice la aplicación cuando visite su sitio. Esto abrirá una ventana emergente en la que el usuario accedió a permitir que la aplicación acceda a su cuenta de FB. Una vez hecho esto, puede enviar la solicitud similar en nombre del usuario a través de un script del lado del servidor. En otras palabras, no vale la pena el esfuerzo.

Si, por otra parte, solo desea obtener el recuento de me gusta de una página y mostrarla como desee, puede hacerlo mediante una solicitud a "http://graph.facebook.com/#{url}", que devolverá una carga útil de JSON con el número de me gusta. En jQuery sería:

$.getJSON("http://graph.facebook.com/#{url}", function(data) { alert(data.shares); });

4
aleemb

Creo que Facebook hace un gran esfuerzo para asegurarse de que la gente no pueda activar el botón "Me gusta". Esto es para evitar que los scripts hagan clic automáticamente en el botón "Me gusta" cuando alguien visita el sitio.

Es posible que pueda anular su estilo usando CSS y que su imagen se muestre en su lugar.

3
Developer

Puede superponer su botón en la parte superior del botón Me gusta de Facebook y usar css para ocultar el botón de Facebook. Sin embargo, no estoy seguro sobre la legalidad de esto.

2
waggydogtail

Podrías intentar activar una solicitud de Ajax como esta

FB.api(
  'me/og.likes',
  'post',
  {
    object: "http://samples.ogp.me/226075010839791"
  },
  function(response) {
    // handle the response
  }
);

https://developers.facebook.com/docs/reference/opengraph/action-type/og.likes

2
sparkle

http://sharingbuttons.io/ permite hacer botones de compartir en redes sociales sin javascript en absoluto (No es un botón similar como en la pregunta ...) Para Facebook, solo usa un enlace como este:

    <a href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
       target="_blank" aria-label="Share on Facebook">Share on Facebook </a><br>Here on Stackoverflow, you have to cmd + click to open the link in a new window. 

Personalícelo con su propio CSS y, para imitar el botón de compartir, simplemente abra la URL en una ventana emergente en lugar de un objetivo = "_ en blanco".

0
François Romain