How to Create custom Facebook Share Button

In this video I have shown how to create a custom designed facebook share button.
As shown in the video we need to create an app in the facebook developer site and get the facebook APP ID. You can create any number of share buttons just with one APP ID. No need to create APP for each share button.
Please update red highlighted part to your APP ID and Link for the sharer.

1. First Create an APP id from Facebook developer site,
   https://developers.facebook.com/
   Go to MyApps > Add a New App to create the facebook APP.

2. Simple Text Share Button.
   SHARE PAGE

   <a href="https://www.facebook.com/sharer/sharer.php?app_id=1460941267346567&sdk=joey&u=https://chillyfacts.com/create-facebook-share-button-for-website-webpages/&display=popup&ref=plugin&src=share_button" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=580')">SHARE PAGE</a>

3. Image share button
   

   <a href="https://www.facebook.com/sharer/sharer.php?app_id=1460941267346567&sdk=joey&u=https://chillyfacts.com/create-facebook-share-button-for-website-webpages/&display=popup&ref=plugin&src=share_button" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=580')"><img src="facebook-icon.png"></img></a>
   

4. Custom CSS Button
   

   facebook share

   <style>
   .button {
   background-color: #4CAF50; /* Green */
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   cursor: pointer;
   }
   </style>
   
   <a class="button" href="https://www.facebook.com/sharer/sharer.php?app_id=1460941267346567&sdk=joey&u=https://chillyfacts.com/create-facebook-share-button-for-website-webpages/&display=popup&ref=plugin&src=share_button" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=580')">facebook share</a>
   

5. Button Count Type

   <iframe src="https://www.facebook.com/plugins/share_button.php?href=https://chillyfacts.com/create-facebook-share-button-for-website-webpages/&layout=button_count&size=large&mobile_iframe=true&width=83&height=28&appId" width="83" height="28" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
   

6. Box Count Type
   

   <iframe src="https://www.facebook.com/plugins/share_button.php?href=https://chillyfacts.com/create-facebook-share-button-for-website-webpages/&layout=box_count&size=small&mobile_iframe=true&width=60&height=40&appId" width="60" height="40" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

7. Bottun Type

   <iframe src="https://www.facebook.com/plugins/share_button.php?href=https://chillyfacts.com/create-facebook-share-button-for-website-webpages/&layout=button&size=small&mobile_iframe=true&width=60&height=20&appId" width="60" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

8. Download the project shown in youtube video here

   share.html