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

У моего script есть код вроде этого

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

Его использование по умолчанию плагина входа в систему. Но я хотел бы использовать свой пользовательский образ для подключения facebook. Кто-нибудь может мне помочь?

Ответ 1

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

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

Ответ 2

Я получил его, работая с призывом к чему-то простому, как

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

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

Справка: Документы API Facebook

Ответ 3

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

Из facebook:

size - Кнопки разного размера: маленький, средний, большой, xlarge - Значение по умолчанию - среднее. https://developers.facebook.com/docs/reference/plugins/login/

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

.fb_iframe_widget iframe {
    opacity: 0;
}

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

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

Ответ 4

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

К сожалению, его политика разработчиков Facebooks, в которой указано:

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

Кнопка Facebook Connect предназначена для визуализации в FBML, что означает, что она предназначена только для того, чтобы посмотреть, как Facebook позволяет ей.

Ответ 5

Если вы не хотите использовать кодировку, то это расширение для Google Chrome под названием FB Refresh, которое может добавить любой пользовательский образ на ваш вход в домашнюю страницу Facebook. Вы можете использовать предварительно созданные темы или можете загрузить свой собственный фон. Вы можете прочитать об этом здесь.

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