title: Creating Facebook Sharing Buttons
body: <p>I am creating a share button on my website so that a user will be able to share the page to facebook but am having some difficulty understanding how to do this correctly.</p>
  
  <p>On this page <a href="https://developers.facebook.com/docs/plugins/share-button" rel="nofollow noreferrer">https://developers.facebook.com/docs/plugins/share-button</a> the code for a button gets automatically generated however you are only allowed three or four different looks for the button and none of these fits what I am going for.</p>
  
  <p>I also found this post <a href="http://logicum.co/creating-custom-share-buttons-facebook-twitter-google/" rel="nofollow noreferrer">http://logicum.co/creating-custom-share-buttons-facebook-twitter-google/</a></p>
  
  <p>On this page there is some code that you would add to where you want the share button to be. I followed the instructions on this page but when I try to share to facebook I do not get the normal share pop up like this:</p>
  
  <p><img src="https://i.stack.imgur.com/cHfiq.png" alt="enter image description here"></p>
  
  <p>Instead my browser opens up a new page that looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/1PyAE.png" alt="enter image description here"></p>
  
  <p>Here is my code for the button</p>
  
  <pre><code>&lt;a href="http://www.facebook.com/sharer/sharer.php?s=100" target="_blank" id="u_0_1"&gt;&lt;img src="Images/facebook_logo.png" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>I added the meta tags as described in this post: <a href="http://www.phpscholar.com/tutorials/custom-thumbnail-title-and-description-for-facebook-share-using-open-graph" rel="nofollow noreferrer">http://www.phpscholar.com/tutorials/custom-thumbnail-title-and-description-for-facebook-share-using-open-graph</a></p>
  
  <p>like this :</p>
  
  <pre><code>&lt;meta property="og:url" content="http://localhost:81/Index.php" /&gt;
  &lt;meta property="og:title" content="Clothing" /&gt;
  &lt;meta property="og:description" content="South African streetwear by South African streetwear lovers" /&gt;
  &lt;meta property="og:image" content="Images/logo_thumbnail.png" /&gt;
  </code></pre>
  
  <p>This is the original code I got from the facebook developers site, it provides a working share button that opens the popup but does not allow me to specify the image used as the icon:</p>
  
  <pre><code>&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.0";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));&lt;/script&gt;
  
  &lt;div class="share-box"&gt;&lt;div class="fb-share-button" data-type="icon" data-href="http://localhost:81/DopeClothing/Index.php" data-width="30"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>All I want to do is have a share button on my page where I can specify the image to use so that it fits with my look and feel</p>