Monday, April 30, 2012

Viral Facebook application with step-by-step tutorial

Viral Facebook application with step-by-step tutorial

Free viral Facebook application Love Calculator with full step-by-step tutorial
The application is free with source code provided and supports the following features:
- like button
- publish on wall
- recommend to friends

 Inforbiro is information technology agency offering Facebook application, web and mobile professional development as well as Internet marketing and advertising services in its own marketing network BlicKlik(www.BlicKlik.com)
Recently we have had a request from FeminaPortal.com – Female Internet Portal for a simple viral Facebook application. We offered them application we had created for education purposes and decided to offer it to all of you for free. The application is very simple but still effective because it contains almost all viral features that a FB app needs to have, such as like button, publish on wall and recommend to friends. And, if you are a beginner, you will learn basics of Facebook applications programming.
You can download full application with source code at the bottom of the page but you will need tutorial and the instructions on this page in order to deploy it successfully on Facebook.
Here are some notes before we start with step-by-step tutorial for Facebook application programming for beginners:
  • all application have to be iFrame Facebook applications (FBML Facebook applications are not allowed any more)
  • application should be hosted on a server with https (SSL) support. Some applications can still work without https (for now)
  • web server should be configured to serve index.php as a default page for the application (you could use thehtaccess.txt file provided in this folder, just rename it to .htaccess if the application will run on Apache server)

Facebook application for beginners – step-by-step tutorial

1) Start a browser and open http://developers.facebook.com/setup/. If it opens a blank page read this articlehow to fix the issue with Facebook developer blank page.
2) A window with password confirmation could be displayed sometime. Enter your Facebook password.
Facebook Developer login
3) Facebook Developers page will be displayed
4) Click “+ Create New App” button in upper right corner
5) Dialog box will be displayed offering you to fill application’s basic information
Create New Facebook App
  • App Display Name: Femina Portal – Love Calculator
  • App Namespace: fp-love-calculator
  • Choose Category
  • After this step, confirm captcha question and your application will be created.
6) Enter basic information as they are shown on the following picture 
Facebook Application Basic Settings
  • App ID or API Key and App Secret are very important for further steps. Consider that App Secret shouldn’t be shown to anyone!
  • App Display Name: Femina Portal – Love Calculator
  • App Namespace: fp-love-calculator
  • Choose Category
App on Facebook
  • Canvas URL: http://www.inforbiro.com/fbapps/fp-love-calculator/
  • Secure Canvas URL: https://www.inforbiro.com/fbapps/fp-love-calculator/ – This should be entered because Facebook forced SSL
  • Canvas page: http://apps.facebook.com/fp-love-calculator
Page tab
  • Page Tab URL: http://www.inforbiro.com/fbapps/fp-love-calculator/
7) Auth Dialog information
Set logo, headline, description and other information about your application
Facebook Application Dialog Settings
8) Advanced configuration
  • Set values as they are displayed on the picture bellow
  • Canvas Settings are very important in order to avoid scrollbars
  • Canvas Width: Fixed (760px)
  • Canvas Height: Fixed at your will
You can create application fan page from this page, too. But we will omit this step for now, because it’s not important for the tutorial’s purpose.
9) After saving the settings, application’s summary info will be displayed
Facebook Application Summary
If you need to make any changes in the application click on “Edit App” button in upper right corner and enter changes.
Instructions for running the application are in Instructions.txt file provided with source code.

DOWNLOAD AND DEMO

Facebook Love Calculator is free Facebook application with source code and published under GNU General Public License 3 so you are free to download package with Facebook application source code HERE (a file with instructions are located in folder)
You can see Femina Portal – Love Calculator Facebook application in action HERE. Please like the application if you find it useful.

Older Post:

Newer Post: