significa - Cómo cambiar el botón de inicio de sesión de Facebook con mi imagen personalizada

que significa vista previa en facebook

Question

Mi script tiene un código como este

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

Está utilizando el complemento de botón de inicio de sesión predeterminado de Facebook. Pero me gustaría usar mi imagen personalizada de Facebook Connect. ¿Alguien puede ayudarme?

Answer 1

El método que está utilizando es el botón de inicio de sesión del código JavaScript de Facebook. Sin embargo, puede escribir su propia función de código Javascript para imitar la funcionalidad. Aquí es cómo hacerlo -

1) Cree un enlace de etiqueta de anclaje simple con la imagen que desea mostrar. Tener un método onclick en la etiqueta de anclaje que realmente haría el trabajo real.

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

2) A continuación, creamos la función Javascript que mostrará la ventana emergente real y obtendrá la información completa del usuario, si el usuario lo permite. También manejamos el escenario si el usuario no permite nuestra aplicación de 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) Hemos terminado.

Tenga en cuenta que la función anterior está completamente probada y funciona. Solo necesita poner su ID de aplicación de Facebook y funcionará.

Answer 2

En realidad, solo es posible usar CSS, sin embargo, la imagen que use para reemplazar debe tener el mismo tamaño que el botón original de inicio de sesión de Facebook. Afortunadamente, Facebook entrega el botón en diferentes tamaños.

De Facebook:

tamaño - Botones de diferentes tamaños: pequeño, mediano, grande, xlarge - el valor predeterminado es medio. https://developers.facebook.com/docs/reference/plugins/login/

Establezca la opacidad del iframe de inicio de sesión en 0 y muestre una imagen de fondo en el div principal

.fb_iframe_widget iframe {
    opacity: 0;
}

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

Si usa una imagen que es más grande que el botón original de Facebook, no se podrá hacer clic en la parte de la imagen que está fuera del ancho y la altura del botón original.

Answer 3

Encontré un sitio en google explicando algunos cambios, según el autor de la página fb no permite botones personalizados. Aquí está el sitio web.

Lamentablemente, va en contra de las políticas de desarrollo de Facebook, que dicen:

No debe eludir nuestras limitaciones previstas en las funciones principales de Facebook.

El botón Facebook Connect está diseñado para ser renderizado en FBML, lo que significa que solo debe verse de la manera en que Facebook lo permite.

Answer 4

Lo tengo trabajando con una llamada a algo tan simple como

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

No sé si Facebook alguna vez podrá bloquear esta elusión, pero por ahora puedo usar cualquier HTML o imagen que quiera llamar fb_login y funciona bien.

Referencia: Facebook API Docs

Answer 5

Si no desea utilizar la codificación, esta es una extensión de Google Chrome llamada FB Refresh que puede agregar cualquier imagen personalizada al inicio de sesión de su página de Facebook. Puede usar temas creados previamente o puede cargar su propio fondo. Puedes leer más sobre esto aquí.

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