Turn your Facebook page into a Firefox OS mobile app

Whether you are a business or community page owner, what would be better than increasing your page reachability by offering your standalone mobile app?

Apptuter is an open source framework to help you achieve that, with minimum coding knowledge and easy to follow steps you would be able to produce your own app. The framework currently supports Facebook pages as a content source and is capable of producing apps for Firefox OS and Android platforms.

How it works

Let us take a test drive on how this is supposed to work. In our example we will generate a standalone app using Mozilla’s Facebook page as a content source.

Clone the repository

First step would be to download or clone the Apptuter-Firefox directory from the Apptuter repository:

git clone https://github.com/egirna/apptuter.git

Directory structure should look like this:

Get the Facebook numerical id

Then we will need to get the Facebook numerical page id. If you have assigned a friendly page name, the page ID will not be visible from the page URL, in this case we will need to visit the following URL to retrieve it: https://graph.facebook.com/mypagename

In our example this would be: https://graph.facebook.com/mozilla

Page ID will be visible on the first line of data returned.

Create a Facebook app

Next step would be creating a Facebook app: You will able to get App ACCESS TOKEN by combining APP ID & APP SECRET so that the requested URL should be in the following form: http://graph.facebook.com/endpoint?key=value&access_token=app_id|app_secret

Requesting Page Info (Info.js) is where we are going to define those parameters, replace PageID with the numerical that can be found at /Apptuter-Firefox/js

var Main = function () {
    this.pageName = ‘pageID’;
    this.name = null;
    this.category = null;
    this.description = null;
    this.photoArray = null;
    this.postArray = null;
    this.infoArray = [];
    this.accessToken = 'AppID|AppSecret';
    this.pictureUrl = null;
    this.paging = 'https://graph.facebook.com/' + this.pageName + '/posts?limit=20&access_token='+this.accessToken;
    this.pagingNext = 'https://graph.facebook.com/' + this.pageName + '/posts?limit=20&access_token='+this.accessToken;

Let us define our new app properties in the manifest.webapp file found at the directory root:

  "name": "Mozilla App",
  "description": "This is an example app of apptuter framework",
  "launch_path": "/Shared/index.html",
  "icons": {
    "32": "/images/app_icon_32.png",
    "60": "/images/app_icon_60.png",
    "90": "/images/app_icon_90.png",
    "120": "/images/app_icon_120.png",
    "128": "/images/app_icon_128.png",
    "256": "/images/app_icon_256.png"
  "chrome": {
    "navigation": true
  "version": "1.0.1",
  "developer": {
    "name": "Egirna Technologies Limited",
    "url": "http://www.apptuter.org"
  "orientation": [
  "default_locale": "en"


Only thing left is the artwork. From the repository, go to /Apptuter-Firefox/images and replace the default images with those of our example logo with matching dimensions and file name.


And we are done! Let us test what the app would look like using Firefox OS Simulator:

You ultimately are responsible to use this software in compliance with Facebook, Google and Mozilla terms of service and end user license agreement. This applies to any service this software may integrate with.

About Mahmoud Nouman

Apptuter open source framework project coordinator, interested in social media, information security and mobile platforms. M. Sc. computer science.

More articles by Mahmoud Nouman…

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


  1. Veera Manikanta

    Its a good article.And that was of more interesting one because it provides us a facebook page to convert into an App with in no time…Amazing….

    Thanks Mahmoud Nouman

    August 7th, 2014 at 08:59
    1. Mahmoud Nouman

      Most welcome!

      August 8th, 2014 at 04:39
  2. Gabriele Vidali

    I got an “Network error occurred, check internet connection …” error.
    But the simulator can navigate just fine

    August 8th, 2014 at 03:36
    1. Mahmoud Nouman

      Hi Gabriele,
      Well, this indicates one of the following possibilities:
      1) The target facebook page has a country or age restriction and therefore the FB graph API is not able to retrieve data from, there is no way around this either to remove the restrictions from the page itself.

      2) PageName, AppID or APPsecret is wrongly defined, all of there paramteres are located at file: /js/Info.js:

      PageName, this should be a a numerical value as:
      this.pageName = “123456789”;

      AppID and Appsecret both are combined with | separator as:
      this.accessToken = ‘123456789|123456789abcdef’;
      The first part is the AppID and the second is the AppSecret

      Please give it a try, if you still receiving error, you may visit my facebook page for quick help or you may open an issue under Issues section of the repository.

      Thank you and good luck

      August 8th, 2014 at 04:38
  3. Facebook Alternative

    Geeks are so innovative that you can expect them to make an application out of any crap you can (not?) think of. :)

    August 10th, 2014 at 12:22

Comments are closed for this article.