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”

Hi,

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

Thank you,
Chris

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.

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

:)

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

@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!

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?

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

I hope this helps.

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.

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.