New to the community? Start here

Is there any way to customize the Facebook Login image?

Is there any way to customize the Facebook Login image?

I need to design a custom button. Thank you

Mon, 22 Dec 2014 19:52:44
  • Ash
    • Code Norris

    Hello @taropaa

    Please try the following code:

    add_action( 'login_footer', 'my_login_script' );
    
function my_login_script() {
    
?>
    
<style>
    
.wdfb_login_button{display: none;}
    
.fb_login_btn{
    
display: inline-block;
    
padding: 5px 10px;
    
background: #000;
    
color: #fff;
    
margin: 10px 0;
    
}
    
</style>
    
<script type="text/javascript">
    
jQuery(function($){
    
$('.forgetmenot').before('<a href="#" class="fb_login_btn">Login</a>');
    
$(document).on('click', '.fb_login_btn', function(e) {
    
e.preventDefault();
    
FB.login(function(response) {
    
if (response.authResponse) {
    
$('.loadingImg').remove();
    
_wdfb_notifyAndRedirect();
    
}
    
});
    
return false;
    
});
    
});
    
</script>
    
<?php
    
}

    You need to customize the css for .fb_login_btn

    You can add those codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution. To use mu-plugins, go to /wp-content/ and find the folder with name ‘mu-plugins’. If there is no folder in that name, then create a folder, name it ‘mu-plugins’, create a file inside that, give any name you like and paste the code in there. You don’t need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always. If you use mu-plugins then add a php start tag at the beginning of the code.

    Cheers

    Ash