How do I add a Facebook "Like" button to my homepage

How do I add a Facebook "Like" button to my homepage

Facebook's Like button lets a user share your content with their friends on Facebook. When the user clicks the Like button on your site, a story appears in the user's friends' News Feed with a link back to your website.

To have a Like Button on your Home Page, you'll need to make sure that you have a Facebook page first.

Generate the Code for the Like Button

1.) First, follow this link: https://developers.facebook.com/docs/reference/plugins/like/

2.) Fill in the required information and click on Get Code. (The URL to Like is your Facebook page URL.)

A lightbox will now display on your screen with the three different ways of implementing the Facebook Like button; the most flexible is the HTML5 version, though the most compatible is the XFBML version.  The IFRAME version is the easiest to install, but you will not be able to have a "Send" button as you see in the above graphic.  Keep this page open while we navigate to the correct area on your store.


Installing the Code on your Store

All versions will need to be installed on the default.html page to display on your Home Page. (If you have a custom Home Page or want to place these somewhere else, you will need to go to that template file to place the code there.)

1.) Login to your store's Control Panel.

2.) Click on Design.

3.) Click on the Browse Template Files button.  This will open a new window with the contents for your Home Page (default.html).

Here's where the instructions diverge, so click on your chosen version of the Facebook "Like" Button:
HTML5 vs. XFBML vs. IFRAME

HTML5:

4.) From the page where you generated your code, copy the content in the top box.

5.) Go back to your default.html, and paste the code after the opening tag.

6.) On the page where you generated your Facebook code, copy the content in the second box.

7.) Back on default.html paste this where you want the code for your Facebook Like button.  Here, we are pasting it to display above all the content in the middle column.  You may choose to paste this information where you like, however.

8.) Click Save in the top left corner.

9.) Visit your home page to make sure the Like button is now there.

XFBML:

4.) From the page where you generated your Facebook code, copy the content in the first box:

5.) Go back to your default.html, and paste the code after the opening tag.

6.) Go back to the Facebook code page and copy the content from the second box.

7.) Back on the default.html page, add your copied code to the tag as you see below.  You will need to delete the non-highlighted portion as you see in the above picture.

8.) Now, go back to the Facebook site and copy the last box of code.

9.) On your default.html page, copy the final piece of code wherever you want your Like button to display.  For this example, I pasted it above all the content in the middle column.

10.) Click Save in the top left corner.

11.) Go to your home page for your store and make sure that your Like button displays.

4.) From the page where you generated your Facebook code, copy the content from the box.

5.) Go to your default.html page and paste in the code wherever you want your Like button to appear.  For this example, we're pasting it to display above all the content in the middle column.

6.) Click Save in the top left corner.

7.) Go to your store's home page to make sure the button is displaying properly.