Adding a Custom Facebook Like or Share Button

Follow

You may prefer to add your own custom Facebook Like or Share button on your landing page rather than using our social widget. This document will show you how! 

Head on over to Facebook 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, hit the Get Code button and a new dialog box will appear with two different scripts.

    • Script one is your Javascript code.
    • Script two is your Custom HTML code.

facebook_button_code_examples.png

You’ll need both codes to get your custom Facebook button to appear on your page. Let’s break the process down and go through installing each of these scripts separately.

 

Step 1: Installing the Javascript Code for your custom Facebook button.

  1. Copy the Javascript code from your Facebook widget page.
  2. Log in to your Unbounce account and find the page where you would like to add your custom button. Click Edit to get to the Unbounce Builder.
  3. Click the Javascripts javascripts_button.png button in the bottom left of the editor to add the javascript to your Unbounce 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”.
    • In the Placement drop-down menu, select After Body Tag.
    • Paste the Javascript code from your Facebook account into the main body of the dialog box.
  5. Click the Save Code button at the bottom right corner of the dialog box.facebook_button_javascript_code.png

 

Step 2 - Add the Custom HTML Components On Your Page

  1. Copy the Custom HTML portion of the code from the Facebook page for your custom Like or Share button.
  1. Go back to the Unbounce 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.
  2. Paste in the Facebook Custom HTML code to the Embed Custom HTML Code dialog box.
  3. Click the Save Code button at the bottom right-hand corner of the dialog box.
  4. 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

 

 

 

Was this article helpful?
1 out of 3 found this helpful