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

Question

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

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?

Answer 1

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.

Answer 2

Ainsi, le Développeur est en droit, vous n'êtes pas supposé être en mesure de changer le FB boutons.

Mais... vous pouvez utiliser le bouton FB et mettre votre propre image sur le dessus ou le dessous de la FB bouton.

La pose de votre image sur le dessus n'est possible que si vous utilisez CSS3 pointeur-événements, qui feront de votre image de clic, et l'événement click de travail "par" votre image et cliquer sur le bouton FB. Cela ne fonctionne que dans les nouvelles versions des navigateurs (Chrome et Firefox).

Une autre option est de mettre l'image derrière le FB bouton et réglez la FB bouton de l'opacité à zéro. Je l'ai utilisé plusieurs fois moi-même, et en creusant un peu partout dans le FB de code que vous pouvez joindre passez événements et tout le reste pour la faire ressembler à un bouton personnalisé.

N'ont jamais passé du temps à essayer de comprendre comment faire de l'contrairement à la fonction du bouton d'origine à travailler sur un bouton personnalisé, mais il est probablement possible.

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

Answer 3

Lorsque vous créez un élément html avec fb-comme la classe, facebook SDK javascript convertir avec un bouton j'aime quand le document est chargé. Vous pouvez faire un élément personnalisé et déclencheur d'événement click du bouton lorsque l'utilisateur cliquez 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>

jQuery code:

$("#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.
});

Mise à jour

Facebook SDK a été la création de bouton comme dans un iframe et aux navigateurs de ne pas permettre à l'intervention de l'iframe dans la page. Je pense ajouter un écouteur d'événement à l'élément iframe n'est plus possible.

Answer 4

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.

Answer 5

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