close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

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

Thread began 10/17/2010 2:25 pm by elevy388997 | Last modified 10/23/2010 12:20 pm by elevy388997 | 2710 views | 2 replies |

elevy388997Beta Tester

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

There is a wave of static facebook sites that use html, css without java script to create mini websites on business pages. How should I go about creating one for me (certain extensions to use etc).

Here is a page using it: BritishSubAquaClub?v=app_7146470109

Here is the applications: application.php?id=4949752878&v=info

Sign in to reply to this post

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>
Sign in to reply to this post

elevy388997Beta Tester

Thanks for the reply! Sorry for the confusion.

Do they allow iframes now with the current FBML? I am trying to get a small mini website within one box and figured I had to place it all in an iframe to keep it from loading a new page. Also, is there a way to have the navigation menu outside the iframe and tell the link to open the page in the iframe?

I would like to embed youtube on my FB business page but would like to fbml to just automatically get the activity so I don't have to upload the video to youtube, then link it to my website.. fb..twitter... vimeo.. etc. Eventually i'll be sitting all day just updating the media on all my websites, so i would like it to be automatic as much as i can.

Sign in to reply to this post

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