Browse by Topic

Adding a Facebook Like Button to your Homepage

These instructions apply to our free, legacy Blueprint themes and Stencil themes that have not been customized.  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 Partner Directory or ask your question in the BigCommerce Community Design Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

In this article, we'll walk you through adding a Facebook like or share button to your homepage using a marketing banner.

Example of a Facebook Like button on a BigCommerce homepage.

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.


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.


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


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


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


User-added image

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.

Create a Banner button

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.

Banner Name

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


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

The Facebook Like button JavaScript code.

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


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

The Facebook Like button HTML code.

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.

Exapmle Facebook HTML code pasted in the BigCommerce WYSIWYG editor.

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.

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

Banner settings

11. Save your changes.

Was this article helpful?