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

investimmo

investimmo

Winstar subcontract to help support and maintain an existing website hosted in Belgium investimmo.be adding new functionality and fixing any problems reported. The site is multilingual and also has a French version http://www.investimmo.be/fr/  and an English...

read more

How to wrap text on a button

If the text on a button is not wrapping then the white space is probably incorrect.  Try the following CSS to correct it: input[type="submit"] { white-space: normal; } Other Helpful Information Keep Posted with our Special Offers and Latest Updates Like Us...

read more

How to make divi testimonials all the same height

On the testimonial module goto custom css and in the main element add the following css and do this for all testimonials that should be the same height, or create a class in divi epanal and assing the class to each of the modules. min-height: 300px...

read more

Keep Posted with our Special Offers and Latest Updates

Like Us On Facebook!