1. Documentation
  2. Working in the Classic Unbounce Builder
  3. Adding Social Media Icons to your Classic Builder Page

Adding a Custom Like or Share Button from Meta (Facebook) in the Classic Builder

Follow
Avatar
Leslee Teehankee
Last Updated

You may prefer to add your own custom Meta (Facebook) Like or Share button on your landing page rather than using our social widget. This article will explain how to set this up in the Classic Builder.

To learn how to add a Share button to your pages in Smart Builder, see this article: Adding a Meta (Facebook) Share Button to your Smart Builder Page. 

Step 1: Create a Custom Button (Like and Share, or Share Button) in Meta

Head over to Meta's documentation and use their button configurator to get the code for a Like and Share Button, or a Share Button.  

Once you select the options for your custom button, click the Get Code button and a new dialog box will appear with two different scripts.

The first script is your JavaScript code, and the second script is your Custom HTML code:

facebook_button_code_examples.png

You’ll need both codes for the Share or Like Button to appear in the Classic Builder. Let’s break the process down and go through installing each of these scripts separately.

 

Step 2: Installing the Javascript for Your Custom Button in the Classic Builder

  1. Copy the Javascript code from your Facebook widget page.
  2. Navigate to your landing page in the Classic Builder.
  3. Click the Javascripts javascripts_button.png button at the bottom left of the Classic Builder to add the JavaScript to your page. A new dialog box will appear.  
  4. In the new Manage Scripts Dialog box, fill out the following information:
    • In the Script Name form field, type Facebook Buttons, or any script name.
    • In the Placement drop-down menu, select After Body Tag.
    • Paste the JavaScript code from Meta into the main body of the dialog box:
      facebook_button_javascript_code.png
  5. Click the Save Code button at the bottom right corner of the dialog box.

Step 2 - Installing the HTML Code for Your Custom Share Button in the Classic Builder

  1. Copy the Custom HTML portion of the code from Meta for your custom Like or Share button.
  2. In the Classic Builder, drag and drop the Custom HTML custom_html_widget.png widget from the left-hand side of the editor to the place on your page where you would like to add the Facebook buttons. A new dialog box will appear.
  3. Paste in the Custom HTML code to the Embed Custom HTML Code dialog box.
  4. Click the Save Code button at the bottom right-hand corner of the dialog box.
  5. Save and Publish/Republish your page.

All set! Your page is ready for all sorts of Facebook liking and sharing.

facebook_button_finished_product.png

Related articles