How to create a popup with Facebook connect button

A live example of this tutorial is here: http://www.wpsubscribers.com/demo/category-8/facebook-connect-custom-popup-design.html

There're 2 things we need to do:

  1. Create a facebook connect button.
  2. Set Facebook Opt-in parameters
  3. Create a custom popup and put the FB button in.

 Here we go:

Step 1: Create your Facebook connect button

1.1 Go to http://developers.facebook.com/setup to get your new Facebook Application (If you don't have one).

1.2 On your application settings : Select “Website with Facebook Login” and write your website URL.

facebook connect Application

1.3 Click “Save Changes”

1.4 On the same panel : get the App ID and the App Secret keys for WPSubscribers.

Step 2: Set Facebook Opt-in parameters

2.1 Put your App ID and App Secret key to “Facebook Opt-in” admin panel, for example:

facebook connect WordPress

2.2 Press “Save Changes” button.

2.3 In “Traditional Connect Method”, check to enable your Facebook application on WP Subscribers.

facebook connect WPsubscribers

2.4 Press “Save Changes” button.

Step 3: Create a popup and put your Facebook button in

3.1 Go to “Create Opt-in Forms” in Wpsubscribers admin panel, and then choose “Create Opt-in Popup” tab.
3.2 Create a new popup with template is “custom popup“:

– As you see in the screenshot, the “Content” field didn't has advance text-editor, so we'll press “Save Changes” button first.

3.3 After the text-editor is ready, I'm going to put my offer in this new popup, and don't foget to specify this popup width and height:
{width:700px;height:350px;background:#ddd;padding:30px}

3.3 Put the Facebook Connect button into this new popup:
– Press the “HTML” button on the text-editor:

– Copy and paste one of these codes below into the popup:
<fb:login-button size="large" v="2" perms="email" autologoutlink="true">Get Instant Access</fb:login-button>

<fb:login-button size="xlarge" v="2" perms="email" autologoutlink="true">Get Instant Access</fb:login-button>

<fb:login-button size="medium" v="2" perms="email" autologoutlink="true">Get Instant Access</fb:login-button>

<fb:login-button size="small" v="2" perms="email" autologoutlink="true">Get Instant Access</fb:login-button>

<fb:login-button size="icon" v="2" perms="email" autologoutlink="true">Get Instant Access</fb:login-button>

Then press “Save Changes” button and your custom popup is ready.

– This connect feature of Facebook itself couldn't work work with IE so here is the solution for you:
Fix Facebook Connect And XFBML Not Showing Up in Internet Explorer [IE7, IE8, IE9]:
http://digitizor.com/2010/07/06/fix-facebook-connect-xfbml-not-showing-ie/






Comments are closed.