Archive for category Web Coding
The Future of Static FBML Custom Tabs, Now that Facebook is Moving from FBML to iFrames
Posted by timware in Social Media / Inbound Marketing, Static FBML & FBML, Web Coding on August 20th, 2010
Yesterday, August 19, 2010, Facebook announced that in the pursuit of simplifying and standardizing their platform, they would be moving away from FBML and towards iFrames, both for canvas applications and Page tabs.
Facebook Static FBML, an app that allows those with minimal coding experience to create their own custom tabs, may be a victim of this change, as well as those amateur coders and the FBML Entrepreneurs who love them.
Facebook's Announcement of the FBML / iFrame Change
Namita Gupta wrote on the Facebook Developer Blog:
We are also moving toward IFrames instead of FBML for both canvas applications and Page tabs. As a part of this process, we will be standardizing on a small set of core FBML tags that will work with both applications on Facebook and external Web pages via our JavaScript SDK, effectively eliminating the technical difference between developing an application on and off Facebook.com.
Facebook's Previous Advice about Moving your Deleted Boxes Content to Custom Tabs? Forget about it!
Back in February when Facebook was letting everyone know that they would soon be getting rid of both the boxes Wall sidebar and the Boxes tab, it advised: "Create custom content in FBML on a custom tab (optional). Move deleted content from Boxes to a new tab on your page by adding the FBML application to your page."
Well, that was then and this is now. Now it appears they're saying something very different.
Read the rest of this entry »
Facebook Static FBML Custom Tabs - 520-Pixel Reduction Previews Available to Admins NOW!
Posted by timware in Social Media / Inbound Marketing, Static FBML & FBML, Web Coding on August 10th, 2010
When I checked our Fan Page today, I was greeted by friendly message from Facebook — the long-promised/threatened width reduction application tabs was being rolled out in preview for Page admins. The message:
I took a look at one of our application tabs in Facebook, and it showed the reduction of available space to the custom tab to 520 pixels. I checked around at a number of other fan pages and am seeing the changeover for all Pages I admin.
Read the rest of this entry »
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 »
Static FBML & Internet Explorer 8 - Use External Stylesheets, Not Inlined
Posted by timware in Social Media / Inbound Marketing, Static FBML & FBML, Web Coding on August 1st, 2010
As many of you have probably noticed, viewing Static FBML tabs with Internet Explorer 8 is now a rather painful experience IF you inlined the styles with the <style> ... </style> tag instead of having an external stylesheet called with the <link rel="stylesheet" text="text/css" href="URL TO STYLESHEET" /> tag.
If you call an external style sheet via the <link> tag, then IE 8 is happy and will display your tab as dictated by the styles in the stylesheet. 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.
This current problem underscores the importance of using external stylesheets for your Static FBML tabs instead of inlining the styles.
NEW: Read our tutorial on creating and hosting your external stylesheet, using Google Sites!
There is a bug report on the Facebook Bug Tracker #11683, but no one from Facebook has commented there.
The solution, as discussed in my earlier post on using external stylesheets with Static FBML, is to NOT inline your styles, but use the <link rel="stylesheet" type="text/css" href="URL TO STYLESHEET">. Of course, you have to put your CSS styles in a text document with the extension ".css" (and DON'T include the <style> </style> tags!). Besides the current situation, where IE 8 simply isn't rendering styles inlined with the <style> ... </style> tag, background images called from inlined styles are often displayed incorrectly.
You've changed from inlined to external styles and your tab's display is still broken in IE 8?
If you changed from inlined to external stylesheets and your Static FBML still appears broken, try incrementing the number we've recommended in the past to refresh Facebook's cache. Use:
<link rel="stylesheet" type="text/css" href="http://www.your-domain.com/your-stylesheet.css?v=40.0" />
The "?v=40.0" appended to the end of your stylesheet file name forces Facebook to refresh its cache. In the above example, I have intentionally set it high (usually you just start with 10.0) just to make sure. Every time you modify your external CSS you need to increment that number to refresh Facebook's cached version of your stylesheet.
If you're switching from using the <style> ... </style> tag to inline your styles, to calling your external stylesheet via the <link> tag, then I would strongly recommend using the "?v="40.0" method to emphasize the change on Facebook.
Facebook: The Most Common Static FBML Problems & Their Solutions
Posted by timware in Social Media / Inbound Marketing, Static FBML & FBML, Web Coding on July 12th, 2010
In the course of posting so many Static FBML tutorials on our blog, and then responding to visitors' questions in the comments, I now have a good idea of what are the most common problems people encounter when either adding Static FBML to their Fan Page or trying to get the tab to look and function as they wish. So I've put together this list of common questions and my answers.
NOTE: Check out our popular Static FBML Tutorial and, if you don't see a solution here or you want more detailed information, check out our Static FBML FAQ which also has links to all our Static FBML tutorials.
NOTE: When I refer to "FBML box" I mean the box/field where you put your CSS/HTML/FBML content:
Read the rest of this entry »
Best Online Form Services for Facebook Static FBML Fan Pages
Posted by timware in Social Media / Inbound Marketing, Static FBML & FBML, Web Coding on June 2nd, 2010
In setting up Fan Pages on Facebook for a number of clients, there is often the need for a contact form so that Facebook users can contact a business right from Facebook. I decided to research several of the available online services that offer the creation and processing of forms, to determine which is best for setting up a form on a Static FBML application tab.
The services I checked out offer both free and paid plans. Either plan offers the same options in terms of form features etc. The difference with paid plans is in the number of different forms, or form recipients, or submissions you are allowed.
I looked at three services, Wufoo, Allforms and JotForm. I wanted to see which provided the most choice in terms of the form display/design, form validation (checking that required fields are filled in), and customization of the email the business receives from a form submission.
Read the rest of this entry »
How To Add a Contact Form to your Facebook Static FBML Tab with JotForm
Posted by timware in Social Media / Inbound Marketing, Static FBML & FBML, Web Coding on June 2nd, 2010
I researched several online form creation and hosting services and determined that JotForm and Allforms were the best choices for creating a contact form for your Facebook Static FBML tab. This is a tutorial on how to create a contact form using JotForm.
Getting Started with JotForm
There is a free option and a paid option. Both have the same features, but the paid option allows more forms, more submissions, etc. Here's a comparison chart.
Read the rest of this entry »
Add a Contact Form to Your Facebook Static FBML Tab using Allforms
Posted by timware in Social Media / Inbound Marketing, Static FBML & FBML, Web Coding on June 2nd, 2010
In researching the best options for online form-creation services for Facebook Static FBML tabs, I determined that the two best were, in my opinion, JotForm and Allforms.
Although JotForm offered the most attractive interface for form creation, the most flexibility for design, and more features, I liked Allforms because it supports form validation, as well as CAPTCHA. And, if you're comfortable working with CSS and HTML, you can do further customization of the Allforms form you create.
Another plus is you can create a form with HTML and CSS and use Allform's free service to create just the form processor. Pretty cool....
Read the rest of this entry »
Facebook Shrinking Images on Fan Page Tabs - The Fix
Posted by timware in Social Media / Inbound Marketing, Static FBML & FBML, Web Coding on May 27th, 2010
I noticed this morning that images on my Static FBML tabs had inexplicably shrunk to about half their size. I hadn't made any changes, so apparently Facebook has either introduced a bug or changed the rules.
Update (but see my fix below for immediate relief!):
Facebook sez: "A fix for this problem will be pushed out to all of the web servers this afternoon."
Read the rest of this entry »
Multiple YouTube Videos Side-by-Side in Rows with Facebook's Static FBML Tabs
Posted by timware in Social Media / Inbound Marketing, Static FBML & FBML, Web Coding on May 22nd, 2010
A number of people have asked how to add multiple videos to their Static FBML tabs, and have them display in rows, side by side.
Of course, you can create a YouTube channel or playlist of videos and embed that in your Static FBML tab, but if you want to show individual videos (or Flash) on your Static FBML tab, and be able to have them align horizontally, here's how:
Read the rest of this entry »
Static FBML Code Templates for Sale!
