Wednesday, April 13, 2011

Easy Steps: Learn how to design your facebook page.

Step by step Facebook design guide.
On the internet having a branded/designed Facebook landing page is selling like pancakes. Hiring programmers and web designers to work on the design and implementation process for a business, entertainment, or organization like designed fan page. Unlike other social networking sites. facebook wont allow us to design pages, but we can use the application to add and manipulate their own version of html tag coding language FBML or even better the "iframe".

Sifu Knows! FBML and iframe landing/fan pages style. Or the more simple step of using your own image and mapping the links. I will be covering all 3 techniques/approach.

Things you must know about Facebook programming platform:
  • Facebook "Don't have" Coding Support — Facebook provides only a small box for you to code in, and provides no syntax coloring or syntax compiling.
  • Old HTML and CSS — Code your Facebook Page like you would any page using simple HTML and CSS. Most of the code will act exactly the same way. As long as you are using plain html coding.
  • Load CSS Externally — if using CSS, it should be loaded using an external stylesheet file instead of using an internal style sheet. Internet Explorer 6, 7, and 8 can’t read internal stylesheets on Facebook Pages.
  • Host Files on Another Server — Facebook doesn't host your files for you. Every image, CSS file, Flash video, or other external file needs to be saved elsewhere.
  • All links are Absolute — All liks to external files must be absolute. Write an image link like http://www.example.com/images/picture.jpg. Don’t write images/pictures.jpg.
     Adding FBML application:
    • Click “Edit Page” on your Facebook Page.
    • Click “Apps” on the left side of the page.
    • Under the FBML section click “Go to App.” If you don’t see this, please add the “Static FBML” application to your Facebook Page.
    • Copy and paste your HTML code into the FBML box.
    • Title your FBML. This will show up in the tab at the top of the landing page. While you may want to use “Welcome,” remember that those who Like you will not land on this tab. Instead they will land on your wall and will see another tab that says “Welcome” at the top. We used “Who We Are.” Hopefully you can think of something more creative.
    • Click “Save Changes.”
    • Go view your Facebook landing page.

    Choose any designing approach fits your knowledge or try learning the advance techniques.
    I. Simplest Approach:
    1. Use an existing image or you can design a layout. Make sure the width of the image is 520px , that is the measurement of the FB content area, the height doesn't matter.
    2. Upload your image to your server, photobucket, google sites, or anywhere so you can use it live on the web.
    3. Map links. let's say on the part of the image you want it click-able. Like putting a like button or links to other pages. You can do this by using an online image link mapping tool at http://www.image-maps.com/
    4. Copy and paste the generated code inside the <body></body> tags. That means copy everything inside those codes.
    5. Then do the adding FBML app steps:
    II. FBML designing:
    - For HTML and CSS coders.. Design or code a layout using dreamweaver or Microsoft frontpage. Make sure the width of your content is 520px. Upload your files on your server. Then do the adding FBML app steps:

    Adding a YouTube Video or SWF File — fb:swf
    Fb:swf will display an image that when clicked will show a video. For example, the code below will display the thumbnail used for The Social Network movie trailer. When that image is clicked, the trailer’s YouTube video will automatically play.

    III. iFrame designing: 
    1. Page width should be 520px
    2. Design your page on Photoshop then map links or directly create a html/css version of the page
    3. Upload the files to your server/hosting company.
    Then the following facebook iframe app configuration steps.
    We need to go to the Facebook Developer website.
    Click on the “Set Up New App”.
    Click “Create App” . If asked to get verified, you have to do this first.
    Go to “Web Site” section and delete the index.html so we won't get a validation error. Then save vhanges.
    Next go to. “Facebook Integration”.
    In this section we’ll do the following:
    •     Name our App under “Canvas Page”. This will be our Application URL (kind of important)
    •     Copy our directory route under “Canvas URL”. Remember to eliminate the “index.html” at the end
    •     “Canvas Type” will be “iFrame” of course
    •     And under “iFrame Size” select “Auto-resize”. We don’t want any scrollbars displaying
    Now scroll down on the same section and we will find the “Page Tabs” configuration. We’ll do two things here:
    1.     Name the Tab. This name is the one that will be displayed on your page so name it something like “Welcome”. I just named it “iframetest″ since this is just a test
    2.     For “Page Tab Type” you will again select “iFrame”
    3.     And under “Tab URL” type “index.html”. That’s the name of your actual HTML file. You remember that, right?
    Now hit the “Save Changes” button. As soon as we do, we’ll be taken to this intimidating page with lots of information including our App ID, API Key, App Secret, etc. Leave. Don't bother giving yourself a headache figuring that out.


    www.sifuknows.echoz.com - free live TV internet webcast, watch and download free movies.
    How to make money? Create your website and start publishing.
    Posted by Sifu Joomla
    Labels: , , , , , , , , , , ,

    1 comment:

    1. facebook designAugust 28, 2011 at 2:33 PM

      I would gladly link to this type of content for all those people who have the time and knowledge to design their own facebook pages, great share!

      ReplyDelete

    Subscribe to: Post Comments (Atom)