Please support us by disabling ad blocker for smarttutorials.net ...

How to create a custom facebook timeline page

Posted by & filed under FACEBOOK.

Facebook is the great platform to increase your blog traffic. If you started your blog newly, surely you won’t get search engine traffic, so only way to increase your blog traffic is to utilize Social networking sites effectively to attract your readers. Nearly 25-30% traffics to my sites all through Facebook, twitter and etc… Here is one way to attract more readers to your blog, is creating custom Facebook timeline pages.

Follow this steps to create custom facebook timeline pages at the end you will nice looking facebook custom pages (you don’t need any programming knowledge to create this).

Before continuing this tutorial please my previous tutorial on how to add custom facebook tab to your facebook timeline page?

Step 1: To develop Facebook app go through following url

https://developers.facebook.com/
then login into the facebook
how to create a custom facebook timeline page
Step 2: Then click On Build apps on facebook link on the page like in the above picture. 

Then click on the apps tab in the top navigation bar to go apps creation page.
how to create a custom facebook timeline page
Step 3: Now click on create new app button in the right top of the page like one shown in the below picture.
how to create a custom facebook timeline page
Step 4: Enter valid app name, app namespace and check the check box if you want to use free heroku cloud hosting. (please check the check box to use heroku cloud hoisting to host facebook app files, because facebook doesn’t support normal http). Then click continue to proceed.
how to create a custom facebook timeline page
Then heroku cloud hoisting will ask your confirmation to create an account, so click on create button to proceed.
how to create a custom facebook timeline page
You have successfully created your first facebook tab application. Now you can configure tab app settings for facebook timeline fan page.
now click Go to app button to proceed
how to design custom timeline facebook 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.

how to design custom timeline facebook page

(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.

how to design custom timeline facebook page

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

how to design custom timeline facebook page

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

how to design custom timeline facebook page

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”

how to design custom timeline facebook page

$ git push

how to design custom timeline facebook page

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.

how to create a custom facebook timeline page

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

how to create a custom facebook timeline page

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

Page tab name
Enter your page name ex. happy
Page tab URL
http://strong-fog-9919.herokuapp.com/
Secure page tab URL
https://strong-fog-9919.herokuapp.com/
Page Tab edit URL
https://strong-fog-9919.herokuapp.com/happy
Page tab image
Select your tab image to appear on your tab
Page Tab width
Select 810px wide
Step 12: Click the save changes button. You have created the tab app successfully. Now follow steps to add custom tab to your facebook page.
Step 13: Now copy your API key (APP ID) and your app url (https://strong-fog-9919.herokuapp.com/) from the page.
Step10: Put your APP ID and your app url in the following URL
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.

how to create a custom facebook timeline page

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
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).

how to create custom facebook timeline page

 

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

.

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!