it-swarm.dev

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

Мой скрипт имеет такой код

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 плагин кнопки входа в систему . Но я хотел бы использовать мое собственное изображение на Facebook. Может кто-нибудь мне помочь?

50
user1091558

Метод, который вы используете, это рендеринг кнопки входа в систему из кода 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) Мы сделали.

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

127
Sachin Khosla

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

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

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

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

12
Christian Dechery

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

С Facebook:

размер - кнопки разного размера: маленький, средний, большой, большой - по умолчанию средний . 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, часть изображения, которая находится за пределами ширины и высоты исходной кнопки, будет недоступна для нажатия.

6
CFE

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

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

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

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

4
justanotherhobbyist

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

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

0
Rahul Gupta