• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2026 Replies
  • 331 Replies
    1928 Replies

Add Facebook Like button to your site

User avatar
RunarM
Hardcore Programmer
Posts: 508

Add Facebook Like button to your site

Wed Mar 06, 2013 1: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
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
Just another day in my life.
http://www.codexvideos.com

Post Reply

Return to “Tutorials”