How to Add Like Us Button On Facebook to your WordPress website using Divi theme and Bloom Optin

Facebook Setup

Step 1

Go to the Facebook ‘Like Button For Web’ page

https://developers.facebook.com/docs/plugins/like-button#

Step 2

Enter the URL of the Facebook page that you want people to Like, select the options on how you’d like it to look and then click the ‘Get Code’ button

Step 3

At the top of the form click on the ‘IFrame’ tab and then copy the code under ‘Step 2’.

Bloom Setup

Note: It is assumed that you are familiar with the basic bloom configuration e.g. setting text, colours etc.  Please see the Elegant Themes documentation https://www.elegantthemes.com/documentation/bloom/overview/ for more information.

Step 4

Goto your WordPress dashboard -> Bloom -> Optin Forms

Step 5

Click the New Optin Button

Step 6

Select the Optin type you want, in this example we are using ‘Pop Up’

Step 7

In the Select Email Provider drop down, select ‘Custom HTML Form’ (its the last option in the list) and paste in the code that you copied from the Facebook Like Developer Page into the box below

Step 8

The Click the Next Button and choose your template

Step 9

Complete the template design your optin form and upload a Facebook icon

Setup Complete and your pop up should look something like:

To see this in action, please goto https://demo.winstar.asia/

Divi Websites and Facebook Groups

If you are looking for more information on Divi then please check out DiviLibs, containing links to over 70 Divi related websites and over 10 Divi Facebook groups.

More From Our Geek Blog

Hide Field Label on Gravity Forms

To hide the field label on gravity forms, first use the placeholder text to set the description and then set the CSS Class gf_simple_horizontal on the form Please refer to https://www.gravityhelp.com/documentation/article/css-ready-classes/ for more information

read more

Style Gravity Form Submit Button

The following CSS can be used to style and position the submit button on a gravity form field. Please replace the FORMID with the ID of the gravity form e.g. body #gform_wrapper_2 body #gform_wrapper_FORMID .gform_footer input[type=submit]{ float: right; margin: 0 50%...

read more

Position Logo

To change the postion of the logo in Wordpress using css you can use #logo { position: relative; left:15px; top:20px; } #logo { position: absolute; left:15px; top:20px; }

read more

Keep Posted with our Special Offers and Latest Updates

Like Us On Facebook!