Adding a Facebook Like Button to your Homepage

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.


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.



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.


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.


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.


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.


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.


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.


11. Save your changes.

Was this article helpful?