Add Facebook Like button to your site
Posted: Wed Mar 06, 2013 12:04 pm
In this tutorial i'll be teaching you how to add a like button to your website like this:
![Image]()
1. Go to the Facebook developers page then (Core Concepts › Social Plugins › Like Button)
https://developers.facebook.com/docs/re ... gins/like/
![Image]()
2. Scroll down until you see "Step 1 - Get Like Button Code".
![Image]()
3. You will see a long list of settings you can customize:
![Image]()
-URL to Like (The url the person who clicks the like button will like)
![Image]()
Send Button (People can send a message to friends about the link)
![Image]()
It looks like this, i am not going to have it on my code:
![Image]()
Layout Style of the like, there are 3 different styles. I like the standard.
![Image]()
Width, is obviously the width of the link button (including names)
![Image]()
Show faces (Displays friends faces below their names and the amount of people who liked)
![Image]()
Verb to Display, You can choose between like and recommend.
![Image]()
Color scheme, select either light or dark color scheme.
![Image]()
Font, select one of the 6 fonts.
![Image]()
When you are done customizing click "get code":
![Image]()
4. A window will popup with code for HTML 5, XFBML, IFRAME and URL
I am going to select IFRAME (It's simple)
![Image]()
5. Take the code inside the textbox and paste it somewhere in your HTML <body>:
![Image]()
![Image]()
6. We are not done yet! Click "Okay" and continue scrolling down until you see "Step 2 - Get Open Graph Tags"
![Image]()
![Image]()
7. You will see another list like the previous one, only a little different:
I'll just fill it in:
![Image]()
When you are done filling in the information just click "Get Tags"
![Image]()
8. A new window will popup with all of your tags
![Image]()
Just copy paste them in the <head> of your HTML page
![Image]()
>
![Image]()
Just click Okay and we're done!
![Image]()
Now you'll have a facebook like button on your page similar to this:
![Image]()
-RunarM
1. Go to the Facebook developers page then (Core Concepts › Social Plugins › Like Button)
https://developers.facebook.com/docs/re ... gins/like/
2. Scroll down until you see "Step 1 - Get Like Button Code".
3. You will see a long list of settings you can customize:
-URL to Like (The url the person who clicks the like button will like)
Send Button (People can send a message to friends about the link)
It looks like this, i am not going to have it on my code:
Layout Style of the like, there are 3 different styles. I like the standard.
Width, is obviously the width of the link button (including names)
Show faces (Displays friends faces below their names and the amount of people who liked)
Verb to Display, You can choose between like and recommend.
Color scheme, select either light or dark color scheme.
Font, select one of the 6 fonts.
When you are done customizing click "get code":
4. A window will popup with code for HTML 5, XFBML, IFRAME and URL
I am going to select IFRAME (It's simple)
5. Take the code inside the textbox and paste it somewhere in your HTML <body>:
6. We are not done yet! Click "Okay" and continue scrolling down until you see "Step 2 - Get Open Graph Tags"
7. You will see another list like the previous one, only a little different:
I'll just fill it in:
When you are done filling in the information just click "Get Tags"
8. A new window will popup with all of your tags
Just copy paste them in the <head> of your HTML page
>
Just click Okay and we're done!
Now you'll have a facebook like button on your page similar to this:
-RunarM