Page 1 of 1

Add Facebook Like button to your site

Posted: Wed Mar 06, 2013 12:04 pm
by RunarM
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
Image
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:
Image
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