How to Create a Custom Facebook Page for Your Band or Business Using WordPress

Facebook recently announced that they’ve updated page design for organizations, adding in support for iframe tabs. This is good news for WordPress users, because it makes it very easy to embed custom designs that you’re already using on your WordPress pages.

In this tutorial we’ll walk you through the process of creating a custom Facebook page using tools available through WordPress.

Step 1: Set up a Facebook Page for your band, business, or organization

Facebook makes this very easy for you to do, since they want to have millions of pages on their network. Download or view the Facebook Guide to Pages if you need help setting one up.

Step 2: Add the Facebook Tab Manager plugin to your WordPress site

Facebook Tab Manager is a new plugin for WordPress that makes WordPress function as an editor for tabs you can embed in a Facebook page. You can use it to create landing pages and other types of content that you want to include on your Facebook page. It makes use of the regular WordPress page/post editor, so you can even use shortcodes and added dynamic functionality from other plugins.

The Facebook Tab Manager plugin basically allows you to put more interesting layouts and functionality into your Facebook pages, without the need to get too deep into fancy programming.

After you’ve installed the plugin, you can create content by going to fbtab >> add new.

Step 3: Register your content as a Facebook Tab

After you’ve created and published content using the fbtab editor, look underneath your content on the edit screen. You’ll find the instructions for registering a new Facebook app to contain your content. This involves:

  1. Visit the Facebook Developers utility for app registration
  2. Click the Create New App button
  3. Fill out the registraition form, including the parameters displayed to you on the edit screen of the content you created within WordPress

Setting up the Facebook app should be as simple as giving it a name and then pasting in the Site URL and Site Domain.

Step 4: Add Facebook Integration to the App

Within the app settings, go to Facebook Integration and paste in the Canvas URL, as shown to you on the post editing screen within WordPress. Scroll down and add the Page Tab information, as directed and click save.

Step 5: Add the App to your Facebook Page

This is the last step. You’ll need to be an admin on the Facebook Page that you’re working with. While in the developer center of the app you just created, view the app and click “Add to my Page”. If you want the tab to be default when someone visits your page, you can assign that while logged into your Page as admin: Manage Permissions >> Default Landing Tab.

Now when you view your Facebook page with a custom landing page you’ll see the content you created in WordPress.

You can create tabs for any content that you want to pull in from your site – ie. event signups, registration forms, blog posts, contact forms, etc. Users can even navigate directly within the iframed content while staying on Facebook.

The Facebook Tab Manager plugin was created by David Carr of Carr Communications. Stop by the plugin’s homepage on his site for more information.

Tags

Comments (59)

  1. this is a great explanation, but somehow my WordPress permalink is showing up as a 404 Not Found, and I have no idea how to fix this. I saw someone else posted the same error. Can youhelp? I think the issue in the plugin itself?

  2. I had a thr404 problem but got that corrected by adding a slash at the end of the URL. Did another page and now it is pulling up a post that is 4 months old and not named anything like the tab. Very confusing.

    I’m excited abut this and hope to get it working again tonight. I know it’s new so there are bound to be a few bugs. Hope they get fixed soon.

  3. Well, I ran out of options and uninstalled the plugin and deleted the pages. Started over. Received the 404 error. To get validated I had to add a forward slash on the url. So once I got the 404 then I went back and added the same forward slash to the tab url. No longer get the 404 but I get a post that is abut 6-7 months old again. Have no idea why. Not even close in name. I posted to the developers site so hopefully he fix this soon. I’m going to have to give up and do other things. Great concept and
    f I sure hope it will work for us.

  4. Crista,

    Thanks. But I have more than one page to make. It actually worked the first time but I had a Twitter icon that kept showing up and when I tried to get rid of it, everything fell apart from that point on. I do have a clean WordPress install that I’m going to try it on today and see what happens. And I’m upgraded all of my Facebook pages that I administer. So I’m going to do a little more testing today. Have a couple of ideas.

  5. There has just been an upgrade on this plugin. The problems I was having have now gone away for the most part.

    I’ve having some plugin conflicts but i think i can get around them. I have a related posts plugin and I thought there was a filter for it but no. I also have a plugin that automatically posts to Twitter when I publish. Again…I can get around that..but be aware if you are testing alot you may see some unwanted Tweets.

    Going to play a little more later on a clean install of WordPress without all of my plugins.

    Excited.

  6. The latest Facebook Tab Manager release lets you set your page tab to be resizable, if you need it to be taller than 800 pixels (the default frame is 800 x 520).

    I also set it up so you can specify both a canvas page (stand-alone app view) and tab (appears within your business or organization page).

    There are several demos at http://www.facebook.com/carrcomm

    Apologies to those of you who tried an early release and ran into some bugs and oversights.

  7. Steve, it’s not FBML, but it is iFrames – this is the integration of iFrames with page tabs that Facebook has been promising for months. Now, it’s live, and they’re talking about phasing out support for the old Static FBML app.

    Although there are trade-offs, the advantage of the iFrame approach is you can use standard HTML/XHTML and JavaScript. You can also take advantage of the newer XFBML widgets introduced for use with their JavaScript SDK. Search for Facebook Social Plugins, and you’ll find a bunch of nice ones available for copy-and-paste integration with your page.

    I have some examples at http://www.facebook.com/carrcomm that are based on the plugin discussed in this post.

  8. Will this create an app? Or is a simple custom page considered an app? And will people be able to include that page on their facebook or can I limit it to me only?

  9. Note that things have actually changed a little since this was first published. Because Facebook now has a significant minority of its members browsing over an https encrypted connection, your WordPress website really has to have an SSL certificate so the content inside the iFrame is available at an SSL address as well. Otherwise, users will get an error when they attempt to view the tab.

    Facebook Tab Manager supports this just fine, but the SSL thing means a little more work for you or your web host. Good for you in the long run because it means you can also access your WordPress admin screens securely.

    Keeping Up With Facebook Platform Changes – The BrainYard – InformationWeek http://bit.ly/hv5L8M

  10. Yes, that’s just the way it works with Facebook. If you want multiple tabs on your page, each of them has to correspond with a different web address, so that pretty much means creating a new post and registering the URL in the Facebook Developers app.

    The advantages of Facebook Tab Manager come from being able to update your content more easily through WordPress, and you can also use the shortcodes to pull info interactively, such as the most recent posts in a given category.

    For documentation, see the plugin home page at carrcommunications.com

  11. Holy wow, great plugin, just tried it, my WP page was up in just under an hour. I don’t know how long it would have taken without this plugin, but I’m guessing it made the time needed much shorter, since I don’t know anything about FB programming… Thanks for making it!
    Tom

  12. Does this address the SSL problem for the FB apps? Meaning – FB asks for both the HTTP and the HTTPS address and as far as I know, if you do not have an SSL installed, people who have enabled SSL via FB will not be able to view your content.

  13. This is a great article, but unfortunately it needs updating. The menus/screens in Facebook have changed.

    Also, this article does not explain how to actually make the tab page in WordPress, as the title says. In step 2 the last statement is “After you’ve installed the plugin, you can create content by going to fbtab >> add new.” Then it leaves you hanging as to what to do next. I guess we are supposed to know already how to add the content?

  14. I have everything set up and working but besides the post created as a full page template in my theme I can’t seem to get rid of the real header and footer. Any ideas?

    Thanks

  15. I’ve designed the app as show above but cannot see anywhere to add to my page? Is there something I am missing?

    Many thanks

    http://www.thefoolmonty.co.uk/fbtab/?fbreveal=4-12
    App ID: 326540607389608
    App Secret: 15ca8848dbe8aac874b3eaea1b0f62fc(reset)

    (edit icon)
    Basic info
    App Display Name:

    App Namespace:

    Contact Email:

    App Domain:

    Category:

    Cloud Services
    Hosting URL:
    You have not generated a URL through one of our partners (Get one)
    Select how your app integrates with Facebook
    Website
    Site URL:

    App on Facebook
    Canvas URL:

    Secure Canvas URL:

    Page Tab
    Page Tab Name:

    Page Tab URL:

    Secure Page Tab URL:

    Page Tab Edit URL:

    Mobile Web Bookmark my web app on Facebook mobile.
    Native iOS App Publish from my iOS app to Facebook.
    Native Android App Publish from my Android app to Facebook.

Participate