I am not trained in web design, web development or even IT. So maybe I shouldn’t be blogging about how to create a Facebook landing page, or update a website, or switch from using tables. But:
1. A lot of readers might also be new to this web design shizzle, and might welcome a beginners-style approach/voice.
2. I do try. I work with HTML every day and think it is the sort of thing that you can teach yourself (even if I am not yet fully qualified) and
3. There are so many useful resources online that I want to share with you that make the process a bit easier, even for total novices.
Facebook Landing Pages
This isn’t really where I should start, of course, but this is what I did today.
Basically, if you have a Facebook business page, you can sneakily alter it to make users “land” on a page that YOU can design. See, for example, this Facebook page for Pepsi.
As a Facebook-webpage-designer, you essentially have some white space to play with. All you have to do is add a new App to your page called “Static FBML” (NB. FBML is also the Facebook equivalent of HTML – Facebook Markup Language.) Find the App here. Once you have added it or liked it (as I now have the app I cannot tell how I originally got it – d’oh!) you can go to “Edit Page” –> “Apps” and it should be listed there. Hit “Go to Application” and you will see you can add a title and content. Now, I really don’t know much about what exact kind of code this content box will take – it does take some HTML as well as FBML – but I do know that one can certainly add an image using the following code:
<img src="typethewebaddresshere" title="imagetitle">
You can put
<center> </center> round this to make sure it is nicely in the middle.
You can use a host site to upload images to, such as Image Shack, or better still upload them to your business website. Images should be 520px in width and whatever height you want – but remember to keep anything important “above the fold” (people don’t tend to scroll down very often.)
Here is the first simple one I did for my company:
What you then have to do is make sure that the FBML tab – which by now you will have renamed to something like “Welcome to My Company” (with your company name… obviously) – is the one people see first when they click to your company Facebook. Simply go back into “Edit Page” (I’m assuming you came out of the editor to view the glory of your new Welcome image…) and change the settings under “Manage Permissions” -> “Default Landing Tab”. Job done!
The next step I took today was to turn my landing page into something more dynamic, with clickable links. One way to do this is to create a Client-Side Image Map – something I do actually know how to do with HTML, but this usual way of producing code didn’t seem to work on Facebook.
I created this image on Photoshop (it mirrors our business website):
And then I had to create code to make all of the supposed links on this image (the menu words) clickable. (You can check it out for real at www.facebook.com/HandsOnGlasgow – let me know your thoughts!)
So I got advice from this page: http://illuminea.com/social-media/image-map-in-fbml-tab-facebook/ which told me to use an Image Map creator. As I said, normally I would create my own image map code by obtaining the co-ordinates of the areas I need to be clickable – use an image editor like Photoshop which allows you to view the coordinates at any point in an image – and using the following code:
<AREA SHAPE=”rect” alt=”Something” title=”Something “coords=”157,76,129,130” (the rectangle coordinates work as: top left corner, x and y, and bottom right corner, x and y)
<AREA SHAPE=”poly” alt=”Something Else” title=”Something Else” coords=”125, 122, 103, 150, 217, 208, 240, 169″ (for a polygon, you need the x and y coordinates of every point and the interweb cleverly joins the dots)
<AREA SHAPE=”circ” title=”One More Thing” alt=”One More Thing” coords=”97,157,23″ (for a circle, you need the centre point x and y, then the radius in pixels as well)
<IMG SRC=”http://www.website.com/siteimages/image.jpg” USEMAP=”kirsty_map”>
Your “title” is text is displayed when hovering over the clickable – and “href” is the hyperlink reference to the webpage you want to link to.
However, as this didn’t seem to work, I used the image map creator which automatically creates the CSS Code required for a Facebook Landing Page. What I chose to do was copy and paste the automatically generated code (which I created for just one link) and then I repeated it throughout my FBML Static landing page.
This method uses DIV code instead of the usual Image Map coding I indicated above. You can just use the automatic image map code creator as it is, but if you want to play about with it yourself – or you want to do a fair quantity of links – you can try my copy & paste method. (Also, note that it pastes text below your image.)
You need to start with the code that will insert your image, as follows:
<div style="display:block; width:520px; height:571px; background:url(http://www.hands-on-uk.com/siteimages/fblanding2.jpg)[enter your own URL of course, and dimensions]
; position:relative; margin:2px auto 2px auto;">
This is how the code for each link can be inputted, for example:
<div><a style="left:16px; top:213px; background:transparent; display:block; width:112px; height:0; padding-top:45px; overflow:hidden; position:absolute;" title="About Us" href="http://www.hands-on-uk.com/aboutus.html"></a></div>
In this case, the “left” refers to how many pixels from the left side of the image, the “top” of course refers to how far from the top of the page it is. Then the width is how wide you want the clickable area to be. Finally, the height of your clickable area is determined by “padding-top” distance. You should know this information using the same method indicated above. Add title and link reference as before. Repeat as desired! I had to do about twenty but it was worth it. Let me know how you get on!
(PS To do a blog like this with code printed in the body of the blog, use
<code>... </code> round the text… and also take the advice of this chap: http://www.kavoir.com/2009/08/how-to-display-html-code-on-a-web-page.html )