How to create a custom facebook timeline page

Step 5: Now you see default facebook landing pages with default design. So now you need to design your page and then finally upload that file to server.

(here we are using heroku cloud hosting to host your custom facebook page. You can host that files even in normal http hosting, but facebook stopped supporting http host. So if you really want to run your app as a Canvas Page inside the Facebook, you need https hosting. If you go for https hosting it cost high, so here I am using free https hosting provided by heroku.)

Step 6: Install heroku command line editor :

To design and edit your pages, you’ll need the Heroku command-line tool and the Git revision control system, both of which will be installed by the Heroku toolbelt. Download and install the toolbelt for your OS from the list below:

Mac OS X             Download OS X package

Windows             Download Windows .exe installer

Ubuntu Linux     apt-get repository

Other                      Tarball (add contents to your $PATH)

now install downloaded software

Step 7: Login using heroku command line editor :

Once installed that command line editor, you’ll have access to the heroku command from your terminal. Log in using the email address and password (your facebook username and password) for your Heroku account:

Type following command in the editor heroku login, then it will ask you to type your email id and password. Finally enter, you will get authentication successful message.

If you had logging problem like could not find existing public key?, as well ask you to generate new public key. Please generate new key by pressing y button.

Designing you custom facebook timeline page:

Step 8: Fetching your App source code :

Now download the app source code from heroku cloud hosting using Git tool. For this you need name of the app that is randomly generated by heroku (you will get name from the URL generated by the heroku. You will find the url in the app settings summary under the name of site url like https://falling-waterfall-2755.herokuapp.com where falling-waterfall-2755 is the name.)

Now type following command $ git clone git@heroku.com:falling-waterfall-2755.git

Now you app source code downloaded into your local C:/user/user/falling-waterfall-2755

create master folder using following command $ cd falling-waterfall-2755

Step 9 : Design your page with Html and CSS :

Now find the <section id=”guides” class=”clearfix”> line in the index.php file and remove those line between <section id=”guides”>………….to </section>.

Now add following code just above this </body>

<div class="wrapper">
  <div class="title"></div>

  <div class="body"><p style="font:Verdana, Geneva, sans-serif; font-size:20px; font-style:normal">An Inspirational game to improve your concentration</p>
  <iframe src="http://dl.dropbox.com/u/1362566/inspirational_game.html" width="455" height="450"></iframe>
  </div>
  <div class="body1"><p align="center" style="font:Verdana, Geneva, sans-serif; font-size:20px; font-style:normal">Click onto the red block with jump over it.Move the red block avoiding crash with the blue ones.Don’t touch the black edge. If you can reach more than 18 seconds, you are a genius. It is said that the pilots from the US Air Force are forced to reach 2 MINUTES</p></div>
  <div class="footer"> <div class="fb-like-box" data-href="https://www.facebook.com/cultivatinghappiness" data-width="800" data-show-faces="true" data-stream="false" data-header="false"></div></div>
</div>

Now create using style1.css using following css code

.align {
	left: 200px;
	top: 50px;
	right: 200px;
	bottom: 200px;
}
.wrapper {
	width: 800px;
}
.title {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 24px;
	font-weight: bolder;
	text-align: center;
	cursor: auto;
	color: #0F0;
	background-image: url(logo.png);
	height: 210px;
	width: 790px;
	background-repeat: no-repeat;
	margin-right: 20px;
}
.body {
	width: 460px;
	margin-top: 20px;
	float: left;
}
.body1 {
	float: right;
	height: 440px;
	width: 340px;
	margin-top: 200px;
}
.footer {
	width: 800px;
}

Finally copy style1.css and logo.png image into falling-waterfall-2755 app folder.

Step 9: Upload your files into heroku hosting:

Now commit those changes using following commands.

$ ls index.php logo.png style1.css

$ git add .

0r

$ git add index.php logo.png style1.css

$ git commit –am “changed greeting”

$ git push

You are done. Just go through https://falling-waterfall-2755.herokuapp.com you will see your newly designed facebook page.

step 10: check below picture to change apps settings like your app icon and your domain name etc.

Step 10: Now expand page tab in the bottom of the page.

Step 11: Fill the following details in the required field on the page tab option.

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

Step 11: now click on Add page tab button to add your custom tab your pages. Refer below picture.

Here you need to select your page then press add page tab button to add tab to your page.

Step 12: Now go to facebook page where you will find your newly added custom tab.

how to create a custom facebook timeline page

Now click on the custom tab it will goes to new facebook landing page (that’s default facebook page design).

http://www.facebook.com/cultivatinghappiness/app_219800234790851