Adding a Facebook Like Button to your Homepage

This modification is not supported by the Bigcommerce Development or Technical Support teams. As always, we recommend backing up your current theme customizations before making any changes. Don't feel comfortable adjusting your design or want to work with an expert? Check out our Bigcommerce approved agencies or our community forum.

In this article, we'll walk you through adding one to your homepage using a marketing banner.

Generating the Code

Be sure that you are logged in to your Facebook account prior to going through these steps.

1. Go to the Facebook Like Button page.

2. In the URL to Like field, enter your Facebook page URL. If you don't have a Facebook page, you can use your store's URL.

1308-url-to-like.png

Be sure to include http:// or https:// at the beginning of the website address you enter.

3. Choose a button style from the Layout drop-down. The preview area below will update to show you an example of each layout type as you select them.

1308-layout.png

4. Choose like or recommend from the Action Type drop-down. The preview area below will update the button text.

1308-like-recommend.png

5. Uncheck the boxes marked Show Friends' Faces and Include Share Button to disable those features.

1308-show-faces-share.png

6. Click the Get Code button. A pop-up with the like button code will appear.

1308-get-code-button.png

1308-fb-get-code.png

Keep this code box open as you will need it a little later in the process.

Adding the Code to a Banner

1. In a new tab or window, log in to your Bigcommerce control panel. Go to MarketingBanners, then click Create a Banner.

In some versions of the control panel, this is located under MarketingView Banners.

1308-create-banner.png

2. Enter a name for the banner in the Banner Name field. This is only visible to you, and will never seen by your customers.

1308-banner-name.png

3. At the top of the Banner Content field, click the Edit HTML Source button.

1308-html-button.png

4. In Facebook, copy the code from the top box of the Your Plugin Code pop-up.

1308-fb-first-code.png

5. In your Bigcommerce control panel, paste the code in the HTML Source Editor pop-up.

1308-html-editor-first-code.png

6. In Facebook, copy the code from the bottom box of the Your Plugin Code pop-up.

1308-fb-second-code.png

7. In your Bigcommerce control panel, place your cursor at the very end of the first code you pasted, then press Enter or Return twice.

8. Paste the second code you copied from Facebook, then click Update.

1308-html-editor-second-code.png

After clicking the Update button, the Banner Content field will still appear to be empty. The Facebook like button code will only display on your storefront.

9. Scroll to the Show on Page list, then select Home Page.

1308-show-on-page.png

10. From the Location drop-down, select Top of Page.

1308-location-drop-down.png

11. Save your changes.

Was this article helpful?