Add a Facebook Like Button to Your Site

Adding a Facebook Like Button to your site is a great way to make it easy for visitors to either share your site with their friends or to follow your Facebook business / fan page.

Read on below or watch this How'd They Do That? to learn more.

 

Get started by going here:

http://developers.facebook.com/docs/reference/plugins/like

There's a form on this page that you'll use to setup your like button.

First you'll enter the address that you want people to like. If you leave this field blank, people who click your like button will end up liking nothing at all, which could either be a statement on the sometimes empty nature of our consumerist society or a mistake. Let's go with mistake. 

If you have a Facebook Fan Page and prefer visitors Like that page as opposed to just Liking your site (and as the video above notes, it's better to have people like your fan page than your site), enter the address of that page instead.  

The FB Fan Page for Benk, the Weebly customer used as an example in our video, is located at https://www.facebook.com/benkartist, by entering the address for his own Fan Page he ensures that all visitors who like his site follow this Fan Page and see all his updates. If you have a fan page, you'll likely want to take this same approach.

Set the width of the button. 200 pixels is usually a very good choice here. 

 

Choose the Layout / Look of the button. We're fans of the Button Count. 

Leave the Action Type set to Like and then turn the Share Button off by unchecking the "Include Share Button" option. 

 

Then click Get Code. Here you'll find two separate snippets of code that need to be placed in two different areas of your site. 


The first snippet needs to be placed in the Header of your site. This may sound somewhat complicated, but it's simple to do. Start by copying this first set of code from Facebook. 

Then go within the Weebly Editor to Settings > SEO and paste this code into the Header box seen there. You may have to scroll down a bit before you see this Header box. 

 

With this done, you can now add the actual Like button itself wherever you like on your site. Start by going back to Facebook and copying the second code snippet. 


Now to add the button to your site, choose a page (or pages) where you'd like to add a like button and then drag an Embed Code element to that page (or those pages). Click Edit Custom HTML and paste this code into the element. 

Once you click out of the element your FB Like Button will appear, and then once you Publish your site this Like Button will be available to all of your visitors. 

Was this article helpful? 233 out of 322 found this helpful