Comment changer le bouton de connexion facebook avec mon image personnalisée

Mon script a un code comme celui-ci

echo ''; 

C’est en utilisant le plugin de bouton de connexion par défaut de facebook. Mais je voudrais utiliser mon image de connexion facebook personnalisée. Quelqu’un peut-il m’aider?

La méthode que vous utilisez rend le bouton de connexion du code Javascript de Facebook. Cependant, vous pouvez écrire votre propre fonction de code Javascript pour reproduire les fonctionnalités. Voici comment faire –

1) Créez un lien de balise d’ancrage simple avec l’image que vous souhaitez afficher. Avoir une méthode onclick sur la balise d’ancrage qui ferait réellement le travail réel.

  

2) Ensuite, nous créons la fonction Javascript qui affichera la fenêtre contextuelle réelle et récupérera l’information utilisateur complète, si l’utilisateur le permet. Nous gérons également le scénario si l’utilisateur refuse notre application facebook.

 window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', oauth : true, status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); }; function fb_login(){ FB.login(function(response) { if (response.authResponse) { console.log('Welcome! Fetching your information.... '); //console.log(response); // dump complete info access_token = response.authResponse.accessToken; //get access token user_id = response.authResponse.userID; //get FB UID FB.api('/me', function(response) { user_email = response.email; //get user email // you can store this data into your database }); } else { //user hit cancel button console.log('User cancelled login or did not fully authorize.'); } }, { scope: 'publish_stream,email' }); } (function() { var e = document.createElement('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); 

3) Nous avons terminé.

Veuillez noter que la fonction ci-dessus est entièrement testée et fonctionne. Il vous suffit de mettre votre identifiant Facebook APP et il fonctionnera.

Je l’ai fait travailler avec un appel à quelque chose d’aussi simple que

 function fb_login() { FB.login( function() {}, { scope: 'email,public_profile' } ); } 

Je ne sais pas si Facebook sera capable de bloquer ce contournement, mais pour le moment je peux utiliser le HTML ou l’image que je veux appeler fb_login et ça marche bien.

Référence: Google API Docs

Il est en fait possible d’utiliser uniquement CSS, cependant, l’image que vous utilisez pour remplacer doit avoir la même taille que le bouton de connexion Facebook d’origine. Heureusement, Facebook délivre le bouton en différentes tailles.

De Facebook:

taille – Différents boutons de taille: petit, moyen, grand, xlarge – la valeur par défaut est moyenne. https://developers.facebook.com/docs/reference/plugins/login/

Définissez l’opacité de l’iframe de connexion sur 0 et affichez une image d’arrière-plan dans le div parent

 .fb_iframe_widget iframe { opacity: 0; } .fb_iframe_widget { background-image: url(another-button.png); background-repeat: no-repeat; } 

Si vous utilisez une image plus grande que le bouton Facebook d’origine, la partie de l’image située en dehors de la largeur et de la hauteur du bouton d’origine ne sera pas cliquable.

Trouvé un site sur google expliquant quelques changements, selon l’auteur de la page fb n’autorise pas les boutons personnalisés. Voici le site.

Malheureusement, cela va à l’encontre des règles de développement de Facebook, qui stipulent:

Vous ne devez pas contourner nos limites prévues sur les fonctionnalités principales de Facebook.

Le bouton Facebook Connect est destiné à être rendu en FBML, ce qui signifie qu’il est uniquement destiné à regarder la façon dont Facebook le permet.

Si vous ne souhaitez pas utiliser le codage, voici une extension pour Google Chrome appelée FB Refresh qui peut append une image personnalisée à votre connexion à la page d’accueil Facebook. Vous pouvez utiliser des thèmes pré-créés ou télécharger votre propre arrière-plan. Vous pouvez en savoir plus à ce sujet ici.

http://www.crunchysortingcks.com/2015/02/how-to-change-refresh-facebook-homepage-login-screen.html