Posts Tagged ‘css’

Make facebook your own

It’s no secret that Facebook has become a huge player on the social media circuit. In fact, it’s the biggest player out there at the moment, and that, of course, means you need to be there right?

If you have any kind of business or organization you probably have (or are thinking of having I hope) a Facebook fan page. That’s great, but did you know that you can also customize your facebook page to make it more personal? Here’s how:

The first thing you must do is make sure you have a personal account linked to the fan page you wish to customize, and make that personal account an administrator. Once that’s done you will be able to activate applications on your page.

The app that we are interested in is called static FBML – FBML is an acronym for Facebook Markup Language. What exactly is that, I hear you ask. Well, here’s how the developer describes it:
“FBML is an evolved subset of HTML with some elements removed, and others which have been added that are specific to Facebook.”
The important thing about that as far as we are concerned is that we can use HTML to customize our fan pages. FBML is capable of all sorts of other trickery too, but for now let’s just stick to the html aspects of it.

fbml

The maximum width you should try and use for your page should be 520px for it to fit properly (500px tends to be just right).

Css rules can also be applied to your pages. It’s important, however, to make sure you call them from an external stylesheet using

<link rel="stylesheet" type="text/css" href="linktoyourcss.css" >

The use of an external stylesheet ensures compatibility across all browsers

So, here’s the steps needed to get your static fbml tab up and running.

  • You edit your FBML tab from the edit page link located underneath your logo on the wall page.
  • Scroll down to and click on “edit” on the FBML app.
  • Change the box title to something more relevant to your business/organization. Unless of course your business is called fbml, in which case you can leave it the way it is!
  • Add your css link, and your html
  • click save changes

Pretty simple stuff right.

You should now have an extra tab on your page titled, well, whatever you decided to title it.

new fbml tab

The new FBML tab


If you don’t see your tab go back to edit page, and under fbml click on application settings. Make sure that the option for tab says added, rather than just available. The order of this tab can also be rearranged to some extent on your wall simply by dragging it.

The final thing you need to do is make this tab the default landing page for new visitors to your page. You do this by clicking on “Wall settings”, and under the “default landing tab for everyone else” option change it to your new tab.

default landing tab settings

The default Landing Tab

It is also possible to make a feature for the sidebar using the same application, except this time you would only want it to be 180px wide.

Need more info? All you have to do is ask…

Valid Design – What does that mean?

code

A lot of designers mention valid design, and it sounds great when dropped into conversation:
“nice weather we’re having isn’t it?”
“yes, beautiful”
“talking of beautiful, did you know all my designs are valid”.
Ok, it’s pretty improbable that the conversation would go exactly like that, but it does still beg the question, what does valid design really mean.

Well, generally speaking, when web authors or designers talk about having a valid design, or a valid website,they’re talking about one of two things, and sometimes both things at the same time:

Let’s take those two items one at a time. First the CSS:

CSS are, basically, what control the “look” or aesthetics of a website.

It used to be that the design of a website was achieved through the complicated use of tables. These tables would be nested together to create a design, and although it worked, it was a cumbersome process which involved a huge amount of coding, was complex even for minor changes to a website’s design, caused large server loads, and basically was never meant to be used that way in the first place.

Enter Cascading Style Sheets. CSS seperated the design elements of a website from the rest of the code, allowing for more streamlined coding, less server load, and seperation of content and aesthetics. Nowadays the only time you should see a designer using tables is for data that needs to be presented in a tabular format.

Blah, blah, blah. What does all this have to do with being valid though? Well, the W3C implements and maintains standards for CSS (currently CSS level II). In order for a website to be valid, it should conform to the standards set out by the W3C. There is, at the moment, a slight controversy with this however. CSS level III is (and has been for a while) in the works, with many advanced features which simply are not possible with CSS level II. The better browsers already have some limited support for some of these features, but they are in proprietary format, and until CSS III becomes the official standard, any website using these proprietary CSS level III features will fail validation. In fact, because of the css rounded corners I use on this very site it will not validate!

Ok, on to the second part, the (x)html. html, and it’s modern day counterpart xhtml, are the building blocks of websites. It’s the code that’s used to tell your browser what goes where, headings, emphasized text, blockquotes,links, etc.

It is important that html, and especially xhtml, is well formed and coded correctly so that browsers interpret it correctly. If a web document is improperly coded things may not appear the way the author intended them to be presented. The best way to think of this is in the same terms as your native language. While it is possible to get by with misspelled words or malformed sentences it is, at some point, going to become a problem. This also holds true with the language of html and xhtml. Again, the validation of html and xhtml are both undertaken by the w3c. In this instance I can safely say this site does pass validation.