Here are the steps to create a popup with a FaceBook Like button.
Note: You actually only need Magic Action Popup Add-on if you want the FB Like button to be shown as a popup to visitors. You can just use Magic Action Box without the add-on and display the FB Like button within your content pages just like any other action box.
Alright, let’s get started.
Get your FB Like Button Code from FaceBook
Go to the FB Like Button Code Generator and fill out the URL to Like field. The other settings on the page are optional. I would also suggest to leave the Width field blank – unless you know what that will do when you add the code to Magic Action Box. Then click on the Get Code button.
The second one is the code you use to indicate where you want the FB Like buttons to show up.
Copy both sets of code into a text file so we can use it later with Magic Action Box.
Now that you have the code from FaceBook, it is now time to
Create an Action Box
Log in to your WordPress Admin backend, then, go to Magic Action Box → New Action Box. You will be presented with the screen to select the action box type. Choose Optin Form.
On the next screen, fill in the name for your new action box, and choose an action box style. You can also change this later.
Next, move down to the Opt In Form Settings section and in the Select Mailing List Provider option, choose Other (Copy & Paste) from the dropdown.
Next, go down a bit to the Processed Opt In Form Code field below the Process Code button. This is where you paste in the code from FaceBook.
Note: There is also an Opt In Form Code field (without the Processed word). Leave this field blank. You never need to click Process Code button.
The next bit we will do is only done because we are loading the action box via popup. Popups are created on the page dynamically – after the page has been rendered. And if we do not do the next part, then the FB Like buttons won’t get loaded.
After you have pasted in the code from FaceBook, type the following code right below the pasted code:
That’s it for getting the Like Box to show up.
You’ll also want to add some heading text to your action box. Move down to the Opt In Copy section and fill in the Main Heading and Sub Heading fields. You don’t have to though.
Now, Save your action box.
At this point, you can actually start using this action box and add it before or after the content of your blog posts and pages, just like any other action box.
But, to show the FB Like button as a pop-up though, we’ll need the Magic Action Popup Add-on. Once you have the popup add-on installed, we can now
Create a Popup
In your WP Admin backend, go to Magic Action Popup → Create Popup. Make a descriptive name for your popup, and in the Select Action Box to Use In Popup dropdown, choose the FB Like action box that we created earlier. Also, make sure to Activate the popup.
Save/Publish the popup.
You can now assign the popup to specific posts and pages. Edit the blog post or page you want to add the popup to and look for the Magic Action Popup Settings section. Choose the popup we just created in the dropdown.
Or, you can also assign the popup to your front page, to all your blog posts or pages, or to specific categories. To view the options available, go to Magic Action Popup → Popup Settings and go through the tab options available.
Here’s What It Looks Like