How to change facebook login button with my custom image

Question

My script has code like this

echo '<p class="wdfb_login_button"><fb:login-button scope="' . Wdfb_Permissions::get_permissions() . '" redirect-url="' . wdfb_get_login_redirect() . '">' . __("Login with Facebook", 'wdfb') . '</fb:login-button></p>'; 

Its use is the default login plugin . But I would like to use my custom image to connect facebook. Can anybody help me?

Answer 1

The method you use is the login button from the Facebook Javascript code. However, you can write your own JavaScript code function to mimic the functionality. Here's how to do it -

1) Create a simple anchor tag link with the image you want to display. Have an onclick method for the anchor tag that actually does the real job.

 <a href="#" onclick="fb_login();"><img src="images/fb_login_awesome.jpg" border="0" alt=""></a> 

2) Then we create a Javascript function that displays the actual popup and will receive full information about the user if the user permits. We also process the script if the user disables our facebook application.

 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) We are done.

Please note that the above function is fully tested and working. You just need to put your APP id on facebook and it will work.

Answer 2

I got it, working with a call for something simple, like

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

I don’t know if facebook will ever be able to block this bypass, but at the moment I can use any HTML or image that I want to call fb_login and it works fine.

Help: Facebook API Docs

Answer 3

In fact, this is only possible using CSS, but the image you use to replace it must be the same size as the original facebook login button. Fortunately, Facebook provides a button of various sizes.

From facebook:

size - Buttons of different sizes: small, medium, large, xlarge - The default value is medium. https://developers.facebook.com/docs/reference/plugins/login/

Set the idram opacity to login 0 and show the background image in the parent div

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

If you use a larger image than the original facebook button, a part of the image that is outside the width and height of the original button will not be available.

Answer 4

I found a site on Google that explains some of the changes. According to the author of the fb page, it’s not possible to configure buttons. Heres the website.

Unfortunately, his Facebooks Developer Policy states:

You should not get around our alleged limitations on the basic functions of Facebook.

The Facebook Connect button is designed to be visualized in FBML, which means that it is intended only to see how Facebook allows it.

Answer 5

If you do not want to use encoding, then this is an extension for Google Chrome called FB Refresh, which can add any custom image to your entrance to the Facebook homepage. You can use pre-created themes or you can upload your own background. You can read about it here.

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