Browse by Topic

Facebook Likes

Adding a Facebook "Like" or "Recommend" button to product and blog pages lets your customers promote and share your products and content with their own friends and family. Use the steps below to add a Facebook Like or Recommend button to your store’s homepage, products and blog posts.

 
 

Adding the Facebook Like Button to Product and Blog Post Pages

1. Go to Store Setup › Store Settings, then click the Share tab.

2. Enable the Facebook Like/Recommend button setting by clicking the “like” icon. Then click the settings (...) icon in the upper left of the button.

Facebook Like button settings (...) highlighted in the Share tab

3. Fill out the Facebook Like settings with the following information.

  • Admin User ID — Get your Facebook profile user Id by navigating to your Facebook wall, copying the URL, and pasting it into findmyfbid.com.
  • Layout Style — select Standard (for logged in users, displays the names of other Facebook friends who have liked the product or post) or Count only (displays the total number of likes).
  • Button Position — determines if the button displays above or below your product details
  • Text to Display — determines if the button action reads “Like” or “Recommend”
  • Show Faces? — select to show the profile picture of any Facebook friends who have liked or recommended the product under the button itself

Facebook Like button settings popup
 

 

Don't see all the options? If you have a Stencil-based theme applied to your store, only the Admin User IDs is necessary. The layout options are handled in Theme Editor.

4. Click Done, then Save to save your changes.

Facebook Like button as it appears on a product page on the front-end of the store

 
 

Adding a Facebook Like Button to your Homepage

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

User-added image

 

Keep this code box open. 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.

1308-html-button.png

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.

1308-html-editor-first-code.png

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.

 

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

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. The button will now be displayed on your homepage.

Example of a Facebook Like button on a BigCommerce homepage.

Was this article helpful?