Facebook + Tab + WordPress

So, I want to create a new Facebook Tab App to one of my supported Facebook Page. I know there are a lot of tutorials out there, but I have my own unique requirements.

  • Create Facebook Tab App that point to external self-hosting page/site.
  • Edit and manage the pointed self-hosting page/site manually without editing through Facebook.
  • Self-hosting page/site is using WordPress.

What we/you need are:

  • Facebook Page, and you are the Admin of that Page.
  • Facebook App that you need to create via Facebook Developer.
  • Self-hosted site through WordPress.

At the end of this tutorial, we should be able to add Facebook Tab as per the picture below: Requirement, What’s New, Training, Register, and Profile.

 

Create Facebook App

 

  •  Click Create New App
  • You will be requested to create Apps name etc, just follow with the process.

 

  • Once you done. You will be presented with your App.
  • Take note of the App ID, you need this for future configuration.
  • Don’t close this page yet.

 

Configure WordPress

  • Open a new browser tab and go to your WordPress Dashboard.
  • Install and activate a new plugin called: Facebook Tab Manager

 

  • Now go to Facebook Tabs
  • Click Add New and create a normal page like what you usually do in WordPress

 

  • Now scroll to the bottom and find App ID #
  • Remember the App ID I want you to take note? Now put it there and click Save
  • Then Publish it
  • After that, scroll back down and take note on the Facebook Integration Tab
  • You need this setting for the next configuration


 

 

Mixing it together

  • Now go back to your Facebook Apps and fill up the field as per from above
  • Another thing that I want to highlight are:
    • App Domain; write down your WordPress domain here without http
    • Site URL; write down your Canvas URL as per from above
  • You might want to change the Icon and Page Tab Image as well
  • Once done, just click Save and you’re ready to go

 

  • Go back to your WordPress
  • Just above Facebook Integration Tab, there is a link says “Add to Page”
  • Click that link and you’ll be presented with below screen

 

  •  Now, choose which page you want the app to show up, and click Add Page Tab
  • That’s it!
  • …and if you want to edit your Facebook Page Tab, just head over to your WordPress > Facebook Tabs

 

 

 

 

 

 

 

 

 

 

You’re Done!

Leave a Reply