How to: create a Facebook iFrame application thanks to WordPress

If you are working with Facebook, you must have been slightly worried when they announced the end of the FBML for page tabs. Within a few weeks, some alternatives have been created, and you could switch from the old FBML to some new system. But to me none of these solutions seem satisfying. And let’s face it, I am too much of a WordPress fan not to imagine merging the two systems. So I took the opportunity to start working on a WordPress plugin that would make creating Facebook iFrame applications dead simple for people administrating a WordPress site.



After a few days of work, here is what I came up with: WP Facebook Applications.

This WordPress plugin is simple to use: download it, install it and activate it on your blog, and a new “FB Applications” menu will appear. There you can create a new page for your Facebook tab, and you are guided through the process in order to keep it as fast and as simple as possible.

A few options are available: you define an image non fans of your page will see, then the content they will see once they “Like” your page. And you can decide to ad a Facebook comments form below that content.

Of course, this plugin is a work in progress: I would be happy to receive all your comments, remarks, ideas and bug reports in order to improve it and add new functionality if need. I actually have a few ideas and a small to-do list for future improvements:

  • Limit the size of the images that are displayed on the Facebook pages
  • Translate the plugin in my mother tongue, I have been lazy and did not deal with i18n so far;
  • Somehow make it easier to create the app on Facebook’s side
  • Allow the choice between the landing page for the non-fans, or the content directly
  • Add more possibilites for other Facebook elements (like the comments)

What do you think? Will you be using my plugin for your next Facebook tab?

Useful links :

If you want to follow the evolutions and news about the plugin, follow me on Twitter, or subscribe to this blog!

13 replies on “How to: create a Facebook iFrame application thanks to WordPress”

Pepe says:
June 1, 2011 at 21:02

Me han encantado las posibilidades de esta plugigin ¡Chapeau! sigue adelante.

Gerard Brindley says:
July 10, 2011 at 11:36

Thanks for this brilliant piece of work. I will try and incorporate it into my web site over the next few weeks.

Chris says:
July 20, 2011 at 06:20

Hi,

In the future, will it be possible to show content for non-fans instead of just an image?

Thank you,
Chris

Jeremy says:
July 20, 2011 at 06:38

Yes, that’s coming in the next version! It is actually ready already, I am just translating the plugin into 2 new languages before to release the update.

gus mctavish says:
January 19, 2012 at 22:11

I love what the plug in does but i am frustrated as i need to get feeback regarding the TOP url or page URL that the tab is being presented in.

I want to record which page is referring FB users to the TAB page without asking the user for any permissions as it should be public info.

Have you given this any thought?
thanks

gus mctavish says:
January 19, 2012 at 23:19

:)

When i opened the template.php page i discovered you ARE trying to retrieve the signed_request values

My code to echo these values produced the following result.

page_id =
page_admin =
like_status =
country =
local =

Under what conditions might the signed_request info not be available?

(Since the like_status = NULL this question will halp those who wish to utilize the two page concept.
)

thanks

Jeremy says:
February 2, 2012 at 14:49

@Gus: You won’t get info regarding the page you are on if you are calling the URL from outside of Facebook. When you embed the page in a iFrame within a Facebook application, you will see that what you are trying to echo will return results about the page you are on.

Let me know how it turns out after testing!

turbackpackeras says:
July 29, 2012 at 23:58

I’ve tried the ‘fanpage connect’ once but it require SSL certificate to show the content on Facebooks fanpage. How about your plugin? Does it need the certificate as well?

Jeremy says:
July 30, 2012 at 08:08

All Facebook applications now require an SSL certificate. That includes applications created through WordPress plugins like mine.

I hope this helps.

Álvaro says:
January 13, 2013 at 18:31

SSL certificate can be obtained free of charge from Social Server: https://www.facebook.com/SocialServer

Thanks a lot for this plugin. I find it very easy to configure. I have a problem though: the Facebook Application created is not loading my site’ stylesheet, and just loads unstyled content.

https://www.facebook.com/pages/Macrosoft/127051597368617?sk=app_475281345864511

Am I doing something wrong?

It should look like this (without the scroll):
https://www.facebook.com/pages/Macrosoft/127051597368617?sk=app_406630689412288

Thanks.

Jeremy says:
January 13, 2013 at 20:43

Instead of adding a link to your stylesheet to your header.php file, try using wp_enqueue_scripts instead, as explained here:
http://codex.wordpress.org/Function_Reference/wp_enqueue_style#Loading_stylesheets_in_WordPress_themes

If you load your stylesheet this way, it will also be loaded into my plugin, as well as in all other plugins using custom template files.

Al says:
May 30, 2013 at 17:09

Do you maintain this now? Is it working in 3.5?

Jeremy says:
May 30, 2013 at 17:32

I don’t have time to work on that plugin at the moment, but it should work in WordPress 3.5. You wil, however, experience issues with the width of the frames. Facebook now uses wider application tabs, and my plugin still uses the old 520px wide application setting.