Posts Tagged CSS
Facebook Static FBML: Setting Up Your External CSS Stylesheet & Image Hosting with Google Sites
Posted by timware in Social Media / Inbound Marketing, Static FBML & FBML, Web Coding on August 2nd, 2010
The recent problems with Internet Explorer 8 not rendering CSS styles when inlined on Static FBML tabs using the <style>...</style> tags has underscored the importance of using an external stylesheet — a separate text file with the extension ".css" that contains all your CSS style rules — to apply CSS to your tabs.
Those fan page owners who aren't comfortable creating and uploading files to a Web server have been particularly hit by this IE 8 problem, and unfortunately IE 8 is currently a very popular browser.
Google Sites for Hosting your Images and your CSS Stylesheet
I decided to find the easiest and cheapest solution possible for external hosting of CSS files and images — and that solution is Google Sites, a Web service Google offers that allows the creation of websites, including the creation of directories and the uploading of HTML and CSS files, images and other file types.
Although Google Sites was originally intended for creating websites, I'll show you how to use it as a free and easy service for hosting your stylesheets, images and other file types.
Read the rest of this entry »
Facebook Static FBML & External Stylesheets - New Rules
Posted by timware in Social Media / Inbound Marketing, Static FBML & FBML on April 15th, 2010
HOW TO HOST EXTERNAL STYLE SHEETS: New tutorial on how to set up free hosting of your external CSS stylesheet and images using Google Sites...
UPDATE Jul 31 2010: Again, inlining your CSS styles via the <style> tag isn't working with Internet Explorer 8. If you call an external style sheet via the <link> tag, then IE 8 is happy. This is a problem on Facebook's side, as nothing changed in the past few days with IE 8 and Facebook is constantly fiddling with their API.
UPDATE Apr 17 2010: It seems that external calls to CSS are working again, after some days of not working. It's hard to know when Facebook has changed its API or just having a meltdown, particularly when they don't issue a bug alert. Yes, there was a Facebook bug report 9601 specifically regarding canvas pages, but nothing that addressed Static FBML application tabs. I'm going to go exclusively with inlined CSS using the <style type="text/css"> ... </style> tags. They now work across all major browsers and platforms and just seem, well, safer.
Read the rest of this entry »
Facebook Static FBML and Internet Explorer - CSS & Stylesheets
Posted by timware in Social Media / Inbound Marketing, Static FBML & FBML, Web Coding on December 18th, 2009
UPDATE: Apr 2010: Facebook appears to have changed its API so that calls to external CSS files are no longer supported, in new fan pages. Fan pages created before the change still work, but for how long, who knows? Read my new post how to implement CSS in your Static FBML tab....
Original Post...
In my post on adding the Facebook application Static FBML to your Fan Page, I laid out in detail how to use this very useful app to create very nice page layouts for your Wall tabs. As I've researched this further, I found that good ol' Microsoft Internet Explorer versions 6, 7 and 8 do not handle these Static FBML pages like Firefox, Safari and the other browsers. Of course, any seasoned Web developer expects this and IE does not disappoint.
Static FBML CSS: Internet Explorer (all versions) and other browsers
With Internet Explorer you have only two options in applying CSS styles to your Static FBML application tab:
- Calling an external stylesheet using, for example:
<link href="http://yoursite.com/styles/layout.css" rel="stylesheet" type="text/css" />
Of course, you need to upload the CSS file to your server (or some Web-accessible server). NOTE: Add this string to the end of your external stylesheet call to force Facebook to refresh the version it has cached (example): <link href="http://yoursite.com/styles/layout.css?v=10.0" rel="stylesheet" type="text/css" /> (change the v= number each time you refresh the page.) - Putting the CSS styles inside the HTML mark-up, i.e. inlining the styles, for example:
<div style="font-size:14px; margin:0 auto;">
Although inlining the styles has appeared to always work with Static FBML application-tab pages, using calls to an external stylesheet seems to be only recently supported. I tested our HyperArts Static FBML Page, calling an external stylesheet, and it's working fine. (If anyone does notice an issue, please let me know!)
The option that <em>doesn't</em> work with Internet Explorer is using the style tag to embed your CSS rules:
<style type="text/css">
.some-class { margin:0; font-size:14px; }
#some-id { margin:0; font-size:14px; }
</style>
Although the above works in most other browsers, Internet Explorer ignores the contents of that tag.
If at all possible, you should choose the option to call an external stylesheet. You have much greater flexibility in applying — and making changes to — your CSS using a stand-alone stylesheet.
Static FBML Code Templates for Sale!
