How to add facebook share button to website

                        How to add FaceBook share button to website

                                                                  

Add Facebook Button

In this tutorial we will explain the steps to follow to add to a web page a button for 'Share on Facebook'.
To add a button we easily access this Facebook page where we will get the code we need to include on our site to get the share button. The link above leads to a form like this that will guide us in creating the button.

On this page you have to fill two fields to indicate:
'URL to share': URL of the content you want to share on Facebook
'Width': width 'px' that will have the widget to be included in the page
Once these fields are filled we can view a preview of how it will be created that button.
The last field that can be modified is called 'Layout', and that will be with you indicate the style that will compatir button being created. The choices are:
'Box_count': the share button, icon facebook and text 'share', and on it a little box in which the number of times you have shared the link will display appears.
'Button_count': acts as before, but the box with the number of times you have shared on the right button
'Button': only the button appears without the counter of times shared.
'Icon_link': Displays a button with only the Facebook icon, and followed this button, but already out of it, a link with the text 'Share'
'Icon': only a button with the Facebook icon shown without any text or additional bond.
'Link': in this case it is not contain any icons, which show would be a link with the text 'Share on Facebook'.
Once the fields and style of the new facebook share button must click on the 'Get Code' button indicated. Doing this brings up a new window that should distinguish several parts:
On top of indicating how it will generate code button: html5, xhtml, iframe or url.
Select the ID of the application created in Facebook and it will be used by the new button. In our example we have previously created a Facebook application called 

'Golf'

Then the javascript code to be added on the page to generate the button appears.
One
<Div id = "fb-root"> </ div>
2
<Script> (function (d, s, id) {
Three
  var js, fjs = d.getElementsByTagName (s) [0];
4
  if (d.getElementById (id)) return;
5
  js = d.createElement (s); js.id = id;
6
  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1&appId=xxxxxxxxxxxxxxxxx";
7
  fjs.parentNode.insertBefore (js, fjs);
8
} (Document, 'script', 'facebook-jssdk')); </ script>
Code that we include in the site page where you want the button to share on Facebook appears:
One
<Div class = "fb-share-button" data-href = "http://developando.com/blog/" data-type = "button_count"> </ div>
In this fragment of code you can see three attributes used to configure the Facebook button:

Class 'fb-share-button' button to be a button to share on Facebook.
Field 'data-href' indicating the URL to be shared.
Field 'data-type indicating the style that you will have the button
Second these simple steps can add Close buttons to share content on Facebook from your website.