too long

I am using Facebook share button in my website. But it's a default share button from facebook developer site. I don't know how can i use my own custom png image in place of default share button. I studied the facebook developer tutorials too but couldn't get any help from there. I also googled and searched in various websites, but no help is there regarding my existing code. I guess, its not included there. Here is my code:

In header.php:

<div id="fb-root"></div>
<script>
// facebook like
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

In one of my dynamic page, i have facebook share button:

<div id="deal_shares"><div id="facebook_share" class="fb-share-button" data-href="' . BASE . 'deals/' . $this->bus_url . '/' . $this->deal_url . '" data-layout="button"></div>

So how can I use my own custom png image by modifying this existing code?

right click on the button that you want to change "Inspect element" and find out if it really is an image or a CSS if it's an image find where the image is and upload your file with the same name ontop of the old one or if it's a CSS look for a button generator in google and just paste the code from there.

You can use your own image for the Share Button by opening a popup for sharer.php with Javascript or by using the FB.ui Share Dialog: https://developers.facebook.com/docs/sharing/reference/share-dialog

sharer.php does not even need an App: https://www.facebook.com/sharer/sharer.php?u=[urlencoded-url]

1) Create a simple anchor tag link with the image you want to show. Have a onclick method on anchor tag which would actually do the real job.

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

2) Next, we create the Javascript function which will show the actual popup and will fetch the complete user information, if user allows. We also handle the scenario if user disallows our facebook app.

 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);
}());