close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

How do I make something like this? (static fbml)

Thread began 10/17/2010 5:25 pm by elevy388997 | Last modified 10/23/2010 3:20 pm by elevy388997 | 1692 views | 2 replies

neilo

Hiya,

How far have you got with it? Have you got the application installed in your facebook page yet?

If not, install the app to your FB page:

The page must be a Business (Fan) page to which you have admin access. Make sure that you're logged in to the fan/business page (with admin privileges), then go to the app page that you linked to above, and click the 'Add to my Page' just below the Profile pic (a question mark) - a pop-up should then allow you to select the business page you want to add the app/tabs to.

To edit the page, click your 'Edit Page' link just below your page profile picture, and scroll down to the FBML app, and click the 'edit' link to bring up an edit box.

Give the box a title, and add your html code in to the FBML text area. Make sure that your max width of the overall collective elements doesn't exceed 520px.

Just add the html code that would normally be between the body tags (but not the body tags themselves).

It is safest to make all the styles for your html code inline styles, so that it doesn't rely on an external stylesheet, i.e. :

<div style="width:520px; border:solid 1px #333333; color:#FF0000;">Stuff Here</>

etc.

If you are linking to images, you would use absolute URL paths each time.

So, just make the code in Dreamweaver as normal, with inline css, and copy the code between the body tags and paste it in to the FBML box.

You can add more boxes as required. When you are done you can add the pages to your wall.

If that's not what you meant, apologies - perhaps you could explain a bit more?

My experience is not extensive, (I haven't added a form yet) but it seems to work fine.

Edit:

Basic example

Also there is much confused information about FBML's future in Facebook; Facebook says that it will be phasing out FBML in favour of iFrames on a canvas page - all a bit too ooer-missus for my liking, but I may look into it at some point. The benefits would be that you host the app developers SDK on your own (php) site - and the content code - which would presumably allow for dynamic content being displayed to the iFrame in your Facebook app. I'm not sure yet if I'm understanding this right (probably not, going by my recent standards) but that would be cool, as you could update your site content and facebook 'pages' simultaneously. Or not.

Edit 2:

Actually, you can (at the moment) just add your styles to the beginning of your FBML before your HTML mark-up:

<style type="text/css">
Your styles here
</style>

<div id="content">
Your content html here
</div>

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...