web-dev-qa-db-fra.com

Comment déclencher Facebook comme bouton de bouton personnalisé?

J'ai créé un bouton Facebook personnalisé.

Custom Like Button

Comment faire en sorte que lorsque je clique sur le bouton, il déclenche le bouton de type J'aime fourni par Facebook, comme celui ci-dessous?

Facebook Like Button

facebookfacebook-like
50
Eralph

Selon la politique de facebook sur les plugins sociaux, le point 4 indique: 

"Ne masquez pas et ne couvrez pas les éléments des plugins sociaux."

Vous ne pouvez pas modifier l'image directement car elle est fournie par Facebook.

30
Alexander Nenkov

Le bouton Facebook se trouve dans un iFrame avec une source située sur un domaine différent, le domaine de Facebook. Vous ne pouvez donc pas modifier le bouton car il est protégé par la règle same-Origin.

En outre, la politique de Facebook interdit de modifier les boutons et les logos lorsqu’ils utilisent le contenu intégré de Facebook, comme les boutons sociaux.

Donc, vous n'êtes pas censé pouvoir changer les boutons du bloc fonctionnel, et même si vous le pouviez, cela irait à l'encontre des conditions d'utilisation de Facebook.

Mais ... si vous voulez toujours le faire, vous pouvez utiliser le bouton Facebook natif et déposer votre propre image au-dessus ou au-dessous du bouton Facebook pour créer un bouton personnalisé.

Poser votre image sur le dessus n'est possible que si vous utilisez des événements de pointeur CSS3, ce qui rendra votre image cliquable. les navigateurs qui prennent en charge les événements de pointeur.

Une autre option consiste à placer l'image derrière le bouton FB et à définir l'opacité du bouton FB sur zéro.

Je l'ai déjà utilisé plusieurs fois moi-même, et avec un peu de fouille dans le code Facebook, vous pouvez attacher des événements de survol et tout le reste pour le faire ressembler à un bouton personnalisé. Vous devez rechercher les éléments sur lesquels définir opacity : 0.

N'avez jamais passé du temps à essayer de comprendre comment faire fonctionner la fonction différente du bouton d'origine sur un bouton personnalisé, mais c'est probablement possible.

Toutes mes tentatives pour déclencher le bouton FB avec javascript ou jQuery trigger () ont échoué, mais peut-être que quelqu'un d'autre a découvert comment le faire?

21
adeneo

Lorsque vous créez un élément html avec une classe semblable à fb, le kit de développement logiciel (SDK) javascript de facebook le convertit avec un bouton de même type lorsque le document est chargé. Vous pouvez créer un élément personnalisé et déclencher un événement de clic du même bouton lorsque l'utilisateur clique sur votre bouton personnalisé.

Par exemple :

<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>

code 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.
});

Mettre à jour

Le Kit de développement logiciel (SDK) Facebook a été créé comme un bouton dans une iframe et les navigateurs ne permettent pas d’intervenir sur l’iframe de la page. Je pense que l'ajout d'écouteur d'événement à l'élément dans iframe n'est plus possible.

9
Mesut Tasci

Cela n'est pas autorisé pour la raison évidente que cela conduirait à une fraude. Imaginez que chaque fois que vous avez cliqué sur une image sur le Web, vous ne sachiez pas si c'est une image réelle ou si le résultat sera similaire et s'affichera dans votre flux FB. Ce serait désastreux.

Si vous voulez le faire légitimement, vous devrez créer une application et demander à l'utilisateur de l'autoriser lorsqu'il visitera votre site. Cela ouvrira une fenêtre contextuelle dans laquelle l'utilisateur a accepté de laisser l'application accéder à son compte FB. Une fois que cela est fait, vous pouvez alors envoyer la demande similaire au nom de l'utilisateur via un script côté serveur. En d'autres termes, cela ne vaut pas la peine.

Si, par contre, vous souhaitez simplement obtenir le nombre de pages similaires pour une page et l'afficher comme bon vous semble, vous pouvez le faire via une requête à "http://graph.facebook.com/#{url}" qui renverra une charge JSON avec le nombre de mentions. Dans jQuery ce serait:

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

4
aleemb

Je pense que Facebook fait beaucoup d'efforts pour s'assurer que les gens ne peuvent pas déclencher le bouton "J'aime". Cela empêche les scripts de cliquer automatiquement sur le bouton "J'aime" lorsqu'une personne visite le site.

Vous pourrez peut-être en remplacer le style à l'aide de CSS et faire afficher votre image à la place.

3
Developer

Vous pouvez superposer votre bouton au-dessus du bouton Facebook et utiliser CSS pour masquer le bouton Facebook . Pas sûr de la légalité de cela cependant.

2
waggydogtail

Vous pouvez essayer de déclencher une requête Ajax comme celle-ci

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/ permet de faire boutons de partage de médias sociaux sans javascript} _ (pas un bouton semblable à celui de la question…). Pour Facebook, il utilise simplement un lien comme celui-ci: 

    <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.

Personnalisez-le avec votre propre CSS et, pour imiter le bouton de partage, ouvrez simplement l’URL dans un popup au lieu d’un target = "_ blank". 

0
François Romain