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

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Archived

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.)
2011-12-27_1429_001.png
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.

1308-1.png

3.) Click on the Template Files tab and edit default.html.

1308-2.png

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.

2011-12-27_1427.png

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

2011-12-27_1439.png

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

2011-12-27_1427_001.png

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.

2011-12-27_1440.png

8.) Click Save in the top left corner.

2011-12-27_1442.png

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

2011-12-27_1448.png

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

2011-12-27_1427_002.png

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

2011-12-27_1439.png

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

2011-12-27_1446.png

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.

2011-12-27_1447.png

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

2011-12-27_1428_001.png

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.

2011-12-27_1452.png

10.) Click Save in the top left corner.

2011-12-27_1442.png

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

2011-12-27_1448.png

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

2011-12-27_1429.png

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.

2011-12-27_1458.png

6.) Click Save in the top left corner.

2011-12-27_1442.png

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

2011-12-27_1459.png

Photo of Drew N

Drew N, Community Manager

  • 259,114 Points 100k badge 2x thumb

Posted 5 years ago

  • 0
  • 1
Photo of Rosemary1036

Rosemary1036

  • 922 Points 500 badge 2x thumb
There are no pics showing here, just the name of the photos. At least for me. I have tried following this and I am getting nowhere. The facebook button on my shop (there already) goes to the big commerce facebook page. What should I do to fix this?

This conversation is no longer open for comments or replies.