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

This guide contains steps that are outside of the scope of our tech support team. If completed improperly, it may harm your Data and/or Template Files.
Please see This Guide to back up your files before proceeding.

Accessing the Facebook Code

1. Open https://developers.facebook.com/docs/reference/plugins/like/.

2. Fill in the required information, then select Get Code. (The URL to Like is your Facebook page URL).

2011-12-27_1429_001.png

Installing the Code on your Store

1. In your Bigcommerce Control Panel, click Design.

1308-design.png

2. Select Browse Template Files.

1308-browse-template-files.png

Code Types

HTML5

3. On Facebook, copy the content in the top box.

2011-12-27_1427.png

4. Go back to your default.html file, then paste the code after the opening <body> tag.

2011-12-27_1439.png

5. On Facebook, copy the content in the second box.

2011-12-27_1427_001.png

6. Go back to your default.html file, then paste the code where you would like it to display.

2011-12-27_1440.png

7. Click Save.

2011-12-27_1442.png

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

2011-12-27_1448.png



XFBML

3. On Facebook, copy the content in the top box.

2011-12-27_1427_002.png

4. Go back to your default.html file, then paste the code after the opening <body> tag.

2011-12-27_1439.png

5. On Facebook, copy the content from the second box.

2011-12-27_1446.png

6. Go back to your default.html file, then paste your copied code to the <html> 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

7. On Facebook, copy the last box of code.

2011-12-27_1428_001.png

8. Go back to your default.html file, then paste the code where you would like it to display.

2011-12-27_1452.png

9. Click Save.

2011-12-27_1442.png

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

2011-12-27_1448.png



IFRAME

3. On Facebook, copy the content in the top box.

2011-12-27_1429.png

4. Go back to your default.html file, then paste the code where you would like it to display.

2011-12-27_1458.png

5. Click Save.

2011-12-27_1442.png

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

2011-12-27_1459.png

Attachments

No attachments were found.

83 votes 80% thumbs up 19% thumbs down

Did this article resolve the issue?

Was this article helpful?

Continue
Start your free trial

Start your free, no-risk, 15 day trial

Get your own store up and running in no time. No credit card required.

You can always change your store name later