Как изменить кнопку входа в facebook с моим собственным изображением

Используемый вами метод - это отображение кнопки входа в систему из кода Facebook Javascript. Однако вы можете написать свою собственную функцию кода Javascript, чтобы имитировать функциональность. Вот как это сделать -

1. Создайте простую ссылку тега привязки с изображением, которое вы хотите показать. Имейте onclick метод для тега привязки, который действительно выполнял бы реальную работу.

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

2. Затем мы создаем функцию Javascript, которая будет показывать фактическое всплывающее окно и получать полную информацию о пользователе, если пользователь позволяет. Мы также обрабатываем сценарий, если пользователь запрещает наше приложение 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: 'public_profile,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. Мы сделали.

Обратите внимание, что указанная выше функция полностью протестирована и работает. Вам просто нужно указать свой идентификатор приложения facebook, и он будет работать.

У меня он работал с вызовом чего-то столь же простого, как

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

Я не знаю, сможет ли facebook когда-нибудь заблокировать этот обход, но сейчас я могу использовать любой HTML или изображение, которое я хочу вызвать fb_login, и он отлично работает.

Ссылка: Facebook API Docs

На самом деле это возможно только с использованием CSS, однако изображение, которое вы используете для замены, должно быть того же размера, что и исходная кнопка входа в facebook. К счастью, Facebook предлагает кнопки разных размеров.

Из фейсбука:

размер - кнопки разного размера: small, medium, large, xlarge - по умолчанию средний. https://developers.facebook.com/docs/reference/plugins/login/

Установите непрозрачность iframe для входа в систему на 0 и покажите фоновое изображение в родительском div

.fb_iframe_widget iframe {
    opacity: 0;
}

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

Если вы используете изображение, которое больше, чем исходная кнопка facebook, часть изображения, выходящая за пределы ширины и высоты исходной кнопки, не будет доступна для нажатия.

Нашел сайт в google, объясняющий некоторые изменения, по словам автора страницы fb не позволяет настраивать кнопки. Вот веб-сайт.

К сожалению, это противоречит политике Facebook для разработчиков, которая гласит:

Вы не должны обходить наши намеченные ограничения на основные функции Facebook.

Кнопка Facebook Connect предназначена для отображения в FBML, а это значит, что она предназначена только для того, чтобы выглядеть так, как это позволяет Facebook.