title: Customize Facebook share button
body: <p>I was trying to make a facebook share button that pops up a small window when I click it just like the attached image.<br/><br/>
  <a href="https://i.stack.imgur.com/Ddx68.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ddx68.png" alt="the pop-up showed when clicking the share button"></a>
  <br/><br/>
  I found the way to do that on developers.facebook.com, but the problem is <b>I am not able to customize that button at all</b>, I want to make my own button with a specific width, height, background image, text, etc. but it looks like this can not be done, any change to the class of the div containing the share button disables its functionality or at least makes no pop up. I googled for this problem but couldn't find any clear solution, even similar questions here at StackOverflow are not stating the problem clearly and no answers to them.</p>
  
  <p>Is there anyway using Javascript, Jquery, or even bootstrap to do that?
  Here is my code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
  
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src='http://connect.facebook.net/en_US/all.js'&gt;&lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="fb-root"&gt;&lt;/div&gt;
          &lt;script&gt;
  
             (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_US/sdk.js#xfbml=1&amp;version=v2.9";
  
             fjs.parentNode.insertBefore(js, fjs);
  
             }(document, 'script', 'facebook-jssdk'));
  
          &lt;/script&gt;
  
          &lt;div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="large" data-mobile-iframe="true"&gt;
              &lt;a class="fb-xfbml-parse-ignore" title="Facebook share" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;amp;src=sdkpreparse"&gt;Share&lt;/a&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>