Write Your Own Facebook App in 5 Minutes

Published in: Facebook

We’ll write a basic Facebook app that will have links to our social profiles and a Google site search box. Later, you can expand the idea to build slightly more complex applications that contain RSS feeds, video clips, etc.

How to Write a Facebook Application in 5 minutes

Things you need: You don’t have to be a “geek” for writing basic Facebook Applications. All you need is some knowledge of web programming languages and some free space on a web server where you’ll host your Facebook app (which are nothing but simple PHP files).

OK, let’s get started.

Step 1. Assuming that you already have an account on Facebook, add the Developer application to your Facebook profile and then click “Set Up New Application”.

Step 2. Give your new Facebook App a name, agree to the terms and then upload some image for your application logo.

Step 3. From the Application settings, choose Canvas and set FBML as the rendering method. The other option is IFRAME but we’ll use FBML for the moment to keep things simple.

Step 4. Using any WYSIWYG HTML editor (or even notepad), write the content that you want to display inside your Facebook application.

In this example, we are adding just two hyperlinked images with a Google search box and therefore the code looks something like this:

Step 5. Log in to your web server where you’ll be hosting the Facebook App and create a sub-directory called “facebook”. So if you domain is example.com, the Facebook app can be accessed from example.com/facebook.

Under the facebook directory, download (wget) the fbook.php.txt application template and rename the file to index.php. Replace the API Key and the Secret key in index.php with real values and also copy-paste the HTML (that you created in Step 4) into the index.php file.

Step 6. While you are inside the “facebook” directory, download the Facebook library (through wget) and extract the files in this archive via gunzip and tar. Now execute the following command to move facebook.php and other library files outside the facebook-platform subdirectory.

$ mv facebook-platform/client/facebook*.php .

Step 7. We are almost done. Go back to your Facebook Application page in the browser, click “Edit Settings” and set the values for Canvas.


  • The Canvas Page URL - choose a nice vanity URL for your Facebook application.
  • The Canvas Callback URL - location of the web service where your files are hosted (in our case, this will be example.com/facebook).

That’s it. Anyone can now add your Facebook app to their profiles either in the Boxes tab or in the sidebar of the main profile page.

Check the “Stay Connected” box on this Facebook page for a working demo.

Extend your Facebook Apps

We just created a basic app but you can make it more useful with simple modifications. Some ideas:

#1. You can incorporate RSS feeds in your Facebook apps though a feed parsing library like SimplePie.

#2. You can track your Facebook application usage via Google Analytics. Just add the following code in the PHP code.

<fb:google-analytics uacct=“UA-12345-xx” />

#3. You can use the same CSS Styles and color schemes for your Facebook Apps that are used on the main Facebook site.

#4. If you want to embed YouTube video or Slideshare presentations in your Facebook apps, you should use the <fb:swf> tag.

#5. Instead of using a plain search box, you should consider using the Google AJAX search API as that will let you customize the look and feel of search results to match other elements on the Facebook page.

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: Facebook

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube