How to Add a Facebook Like button to Your Magento 2 Store

Do you know that there are many Magento 2 extensions for on Magento Connect that help you integrate your store with social media? In this article, we would like to show you an example of how to add a Facebook Like button to your store.

Step 1: Set the Button Code

1. Open the Facebook website, then direct to the button setup page.
2. In URL to Like field, write down the URL of the page in your Magento 2 store which you purpose people to Like. For instance, it is the URL of your Magento 2 home page. Next, do the following:

3. Choose the Layout for the button.
4. In Width field, enter the number of pixels that is available on your Magento 2 site for the button and any text message associated with your store.
5. Choose Like or Recommended for Action Type field.
6. Click on Get Code button for copying the archived code to the clipboard.

Step 2: Create a Content Block

1. Backtrack to your Magento store. Open the Admin sidebar and choose Content. Next, under Elements categories, choose Blocks.
2. In the top-right corner, click on Add New Block button. Next, do the following:

3. In Block Title field, enter a definitive title for internal reference.
4. In Identifier field, set a particular identifier to the block. In that case, you have to use all lowercase characters and underscores because spaces are not allowed to be contained in that field.
5. Choose various Store View where bock is included if your Magento installation has more than one Store View.
6. Enter the snippet of code copied from the Facebook site in the content box.
7. In case that the block is not ready to go live, you should set “No” to Enable Block.
8. When complete, tap Save Block button to finish.

Step 3: Place the Block

1. Open the Admin sidebar and choose Content. Next, choose Widgets under Elements.
2. In the top-right corner, click on Add Widget button. Next, do the following:

a. In the Settings sector, choose CMS Static Block for Type and then click Continue.

b. Make sure that you’ve set the current theme for Design Theme.

c. Click Continue.

3. In the Storefront Properties sector, do the following:

a. Enter a title for internal reference in Widget Title field.

b. Configure Assign to Store View field to “All Store View or to the Store View where the app will be available. In order to select more than one, hold Ctrl button and select each option.

c. In Sort Order field, enter a number to define the sort order of the block if it is set to display in the same location on the page as other content features. It is zero on the top.

4. In the Layout Updates sector, click on Add Layout Update. Next, choose the following: category, product and page where you purpose the block to display in Display On field.

In order to position block on a specific page, do the following:

a. Choose “Specific Page” for Display On field. Next, select the specific page where you intend the block to display.

b. In order to identify the place on the page where the block intended to be placed in Block Reference.

c. Maintain the default setting for Template.

d. Click on Save and Continue Edit to turn to next step.

e. Choose Widget Options on the board on the left.

f. Click on Select Block button and choose bock that you want to place from the list.

5. When complete, tap Save button to finish.

Step 4: Verify the Location in Your Store

Backtrack to your Magento 2 store to make sure that the block is placed in the exact position. To move or change anything related to the block, get back to the widget and do your wish.

If you find it helpful for you, please Like, Share and Subscribe to keep updating more coming blogs!