How to Create A Popup With FB Like Button

fb like popupHere are the steps to create a popup with a FaceBook Like button.

Requirements:

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.

FB Like Button Generator

You will be presented with two boxes of code. The first one is the code for the JavaScript SDK.

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.

Copy FB Code

Note: Make sure you only load the JavaScript SDK once. Ideally, you would add this code right after the opening <body> tag. If you know how to do this, then copy only the code from the second 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.

Choose Action Box Type

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.

Edit Screen 1

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.

Select Mailing List Provider

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.

Paste FB Code

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:

<script>FB.XFBML.parse();</script>

Type additional 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.

mab-copy-fields

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.

popup-create-fb-like

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.

popup-page-select

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

fb like popup

12 Responses to “How to Create A Popup With FB Like Button”

  1. Katharina September 20, 2014 at 5:54 pm #

    Thank you for the tutorial, this is very helpful!

  2. Dan November 4, 2014 at 5:20 am #

    Hi there,

    If there person already likes your Page on Facebook. Will the pop up still show?

  3. Mary March 10, 2015 at 3:35 am #

    This doesn’t make sense saying the free version is fine for the Magic Action Box Plug-in, but then the pop up only works with Ultimate Tier users?!!?

    Also, should the MABP work on the home page of a scrolling template like SKT Parallaxme?

    • Dean Soto March 10, 2015 at 3:41 am #

      Thanks Mary. The evolution of MAB began with a simple newsletter opt-in form that works with any autoresponder and that’s what the free version does. All of the extras (Including popup took a lot of time and effort over the past few years. Even though we’d like to make it all free, we need to eat. 😉

      As far as being used on a scrollable theme – As long as your theme let’s you place PHP tags in the homepage you can use the mab_get_actionbox( ACTION_BOX_ID ) tag with the free version.

  4. Anthony April 1, 2015 at 9:51 am #

    Is the pop up able to be activated only when the person is leaving the site? Thanks

    • Ryann April 7, 2015 at 11:28 pm #

      Yes there is an option for this.

  5. Clare April 6, 2015 at 10:51 am #

    Hi Dean,
    This looks great – but I can’t see the ‘iframe’ option anywhere on the Facebook code bit – only JS, which won’t work.
    Any suggestions?
    Thanks!
    Clare

    • Ryann April 7, 2015 at 11:22 pm #

      Hi Clare,

      You’re right, FaceBook doesn’t offer the Iframe option anymore which sucks as this makes things a wee bit harder for our users now. Anyhow, I’ve updated the article to reflect this. Everyone now needs to use the JavaScript SDK.

      See the part where you copy the FaceBook code, then head right down to the part where you paste the FB code into MAB. If you are doing popups, you will also need to type in additional code. This is documented in this article.

  6. Nathalie April 21, 2015 at 8:47 am #

    Hi there!

    I’ve just tried to install an exit Like Box for my blog posts and did as you said but for some reason the box won’t show.

    The screen turns greyish but no box. My other exit pop-up works just fine.

    Can you help…?

    Thanks so much!

    Nathalie

    • Nathalie April 21, 2015 at 9:19 am #

      UPDATE: I forgot to click on “process code”. I’ve done that and now I can see the box but it doesn’t show the like and share buttons. Just

      I’ve inserted the first code on my footer.php file and did the rest as described above.

      Thanks so much for your help!
      Nathalie

      • Ryann April 21, 2015 at 9:51 pm #

        Hey Nathalie,

        Well, first off, you will never need to click on the Process Code button. If you do that, then MAB will process the code inside the Opt In Form Code field – which if you are following this tutorial should have nothing in it – and place the processed code into the Processed Opt In Form Code field replacing whatever is in that field. The field where your FB Like box code is at.

        So, seeing the grey thing only should indicate that that Like Box is trying to do it’s magic. Can you create a ticket for this one at http://prosulum.zendesk.com and take it from there. I’ll be posting the results here later.

        Please also send a url where the like box is implemented at. Also, revert your changes and make it so that you’re getting the grey screen.

      • Nathalie April 22, 2015 at 9:27 am #

        Hi Ryann,

        Thanks so much! I tried it again without processing the code. Now I have the first code twice (in the form and in the footer php file) and it’s working.

Leave a Reply