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
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
How to remove icon from showing on divi woocommerce add to cart button
To remove icon from showing on divi woocommerce add to cart button add the following CSS to the divi themes css section .woocommerce div.product form.cart .button:after { display: none; }
How to set the height of the images in the divi shop module
To set the height of the images in the divi shop module use the following CSS in the divi custom css section in the theme options .woocommerce ul.products li.product a .et_shop_image img { width: auto; margin: 0 auto!important; display: block; max-width: 180px; }
Turn Off Icon on Hover Effect on Divi Contact Form Submit Button
To Turn Off Icon on Hover Effect on Divi Contact Form Submit Button add the following css to your Divi->Theme Options->General Panel->Custom Css .et_pb_contact .et_pb_contact_submit.et_pb_button:after { display: none; } .et_pb_contact...
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
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%...
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; }
Recent Comments