You may or may not have heard of NFO. It’s similar to SEO, but specific to Facebook. “News Feed Optimization” refers to the strategy for posting content on your Facebook Page, with the goal of having it show up frequently in your fans’ news feeds. While similar to the principles behind Google’s search engine, Facebook’s news feed takes into account several different factors based on your fans, their friends, their interests and more. Or in their words, “affinity, edge, and decay.”

These three factors are part of “EdgeRank” the algorithm revealed by Facebook at their developers conference f8, in April 2010. Digital marketer Chris Sietsema blogs here about these three important pieces that together will determine the visibility of your content on Facebook.

via Teach To Fish Digital

Other Facebook experts and social media marketers have offered insight into the mystery of the newsfeed. But if Facebook is the master behind the scenes controlling your content, how can YOU shape your content to be as appealing and visible as possible? Here are some suggestions I have found useful from various blogs and websites:

• Wildfire Blog: 6 Clever Tricks to Double the Effectiveness of Your Fan Page Status Updates!
• INC: How to Optimize Your Facebook News Feed Presence
• Virtue: Anatomy of an Effective Facebook Post Strategy

The HyperArts fan page is where we offer advice and DIY tutorials for enhancing your social web presence, especially with Facebook applications like FBML. Our community has grown over the past year and we have seen our fans engage with us and each other with greater frequency in the past 6 months. When we post to the Wall, it is rarely with a grand “strategy” or scheme in mind. We post when we have something important to say (“Facebook applications are not working!”) and when we have a solution to known problems (“Try this fix for shrinking images in FBML…”). We also like to give stuff away on our page, from information and answers to individual questions, to prizes and free products.

But beyond what you say, there is an art to how you say it, and how you craft each individual post. Blogger Dan Zarella has some suggestions for the words you use on Facebook, if you want to get really picky.

These are my personal tips for effective Facebook posts:

• Don’t be harsh, rude, controversial or angry, unless you are intentionally inviting any possible response. You might offend people, but you also might please them, so be ready for both.
• Ask a question with your post if possible, it will encourage responses more than a statement would.
• Tag your friends or pages that you like in your comments. Simply precede a name with the @ symbol and if you are a fan or friend of that person, Facebook turns their name into a link. And your post will show up on their page!
• Add an image or link to your wall posts when possible and appropriate. If you simply post text, your wall post will also become your status update. And an image will catch a reader’s eye when scrolling through the posts on your wall, while text alone can blend and disappear.
• Make sure you are willing to monitor responses to each post that you publish. If your page becomes a 1-way broadcast, rather than a multi-directional conversation, you will lose fans quickly.

In the end, you have to determine this #1 important factor for yourself: what does your audience want to hear? Did they become fans of your page because you promised them something fro free once? Then you might not ever see or hear from them again, after they get their free prize. But if they became a fan expecting to hear from you, it’s wise to give them what they want…YOU! No matter how many tips and tricks you study and learn, you will need to find your own special brand of personality and valuable content to deliver with flair on your page.

If you are interested in talking to us about strategy for your Facebook page, and making the most of your wall posts, contact me at (510) 339-6084. Read what other people have said about the effectiveness of our consulting services:

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:

The Most Frequent Problems with Static FBML … and the Solutions

1. I can’t add the Static FBML application to my Facebook profile, group or fan page.
   

   Static FBML can only be added to Facebook Fan Pages (aka Public Profiles, aka Business Pages). You cannot add the Static FBML application to a personal profile or Group.

   A Fan Page administrator must be logged in to their personal profile in Facebook in order to add Static FBML to the Fan Page for which they are an admin (a Fan Page can have multiple admins). In order to add applications to your Fan Page, you MUST have a personal profile associated with the Page and be logged in as that user.; the Admin can add applications when logged in.

2. I clicked on “Edit page” but I don’t see the Static FBML application there.
   
   If you don’t see Static FBML listed under “Applications” then perhaps you haven’t yet added it to your page. Go to the Static FBML application page, click on “Add to my Page”, click the “Add to Page” button next to your page in the popup window. Then click “Close” and go to your Page. The Static FBML application should now be listed.
3. I created my Static FBML tab, but I don’t see it in my tabs!
   
   You need to edit the application’s settings to include it as a tab:

   Click “Edit Page” and under “Applications” scroll down to locate the tab you have created. Click “Application settings” and, in the popup window, make sure that next to “Tab:” it says “Remove” (this means it’s been added as a tab and the option is then to remove it from your tabs). If it says “Add” then click to add it.
   

4. I want to have 7 tabs on my Page, but after 6 they’re put under the “»”.
   
   Facebook allows a maximum of 6 tabs on Pages. You can re-order the tabs to display your preferred 4 tabs (the Wall and Info tabs can’t be moved or removed), but a total of 6 is all you are allowed.
5. I pasted sample FBML code I found on another website into my FBML box, but it’s not displaying correctly.
   
   When code you’ve put into your FBML box isn’t displaying properly (or not at all), it usually has to do with one of the following:

   1. The text you pasted in includes “formatted” quotes or other non-ASCII characters: If you’ve copied code from this blog (or wherever) and pasted it into your FBML box, you must make sure that the text is in plain-text format, NOT rich text. This is especially crucial with quotation marks; if they’re angled or curly or anything other than straight up and down, they’re not plain text.

      The best way to edit your code is in a plain-text editor like Notepad on PCs and Text Edit on Macs — NOT Microsoft Word!

   2. Your URLs are incorrect: Make sure that the URLs to your images, external stylesheet, Flash, video, whatever, are correct. You can test a URL by copying and pasting it into your browser’s address bar at the top of your browser screen, then hitting the Return key to access the URL directly. If your URL is correct, this will result in the content (video, image, SWF, photo gallery, slideshow, CSS) rendering in your browser. If you get a “file not found” error or the file does not otherwise display, then your URL is probably incorrect.
   3. You didn’t change the example values in the sample code: Make sure you replace my (or anyone else’s) placeholders in their sample code with the actual values (URLs, file and directory names, etc.) for the files you’re pointing to.

      Also, when embedding media such as Flash (video, slideshows & galleries), make sure you modify the dimensions in the FBML tag to be the actual dimensions of your media.

   4. You included HTML tags that should not be included: With the exception of the call to an external stylesheet using the <link> tag (which should be the first code in the FBML box), include ONLY the HTML/CSS that would go between the <body> and </body> tags; DO NOT INCLUDE <html>, <body>, <head> or meta tags. Facebook provides these tags when it renders your Page.
6. I’m trying to have content that only Page fans can see, but I’m seeing content for both the fans and the non-fans.
   

   When using the fb:visible-to-connection FBML tag, which allows you to have Page content that only fans can see, REMEMBER: if you’re an administrator of the Page, you will see the content for both fans and non-fans when viewing the tab while logged in.

   When working with this FBML tag, the best way to test it is to set up a test-user account and log in to that account to view the tab and experiment with liking/unliking the tab.

7. I want my embedded media to begin playing when my tab loads.
   
   Unfortunately, you can’t auto-run JavaScript or Flash in an FBML tab — a user action is required to trigger it, usually a click. This is why the FBML tags for embedding media — eg Flash (fb:swf), Flash video (fb:flv) — requires an “activation” image the user must click to load the video or Flash file.
8. I want my video to start playing after the visitor clicks the activation image.
   
   Try adding “&autoplay=1″ to the URL of your SWF (Flash) file (.swf is the format of many YouTube videos, or all Flash objects except Flash Video) will cause the file to start playing when it loads. (If it doesn’t, it may mean that the file itself is “hard-coded” to not autoplay):

   http://www.youtube.com/v/JOt2Qp0H9G8&autoplay=1
or http://www.someDomain.com/flash-file.swf&autoplay=1


9. My embedded Flash file uses XML to pull in content, but it’s not working.
   
   You should make sure the URLs to the XML files are full/absolute URLs (that they include the “http://”). Facebook doesn’t play the Flash file that’s on your server. Instead, it makes a copy of it which is stored on a Facebook server and it serves that. So any URLs to XML files need to be absolute in order to work.
10. I’m using JavaScript on my Static FBML tab and it doesn’t work.
    
    First, remember that Facebook requires a user action (usually a click) to trigger any JavaScript. So you can’t have JavaScript run when the tab loads without that user action.

    Also, Facebook has its own proprietary flavor of JavaScript — FBJS (Facebook JavaScript) — and you should become familiar with this and use it in your Static FBML. If you’re already comfortable with JavaScript, FBJS should be very easy for your adapt to.

11. I’m making changes to my external stylesheet, but when I re-save my tab, I don’t see the changes.
    

    Facebook does not render the images and stylesheet you call in your code. Instead, it makes a “proxy” (a copy) and stores that on its own servers.

    In order to force Facebook to refresh its stored (cached) version of your stylesheet, you need to append “?v=10.0″ to the end of the stylesheet URL:

    <link rel="stylesheet" type="text/css" href="http://URL-TO-YOUR-STYLESHEET/stylesheet.css?v=10.0" />


    Each time you update your stylesheet, you must increment that number and then re-save your Static FBML tab. Thus, 10.0, then 10.1 … 10.9, 11.0 …..

12. I want to embed an iFrame in my Static FBML tab, but it’s not working.
    
    Facebook does not allow iFrames within Static FBML tabs. You can use iFrames in a canvas application, and even then it requires a user action to actually load it. I’ve seen one hack that facilitates iFrames in Static FBML, but I wouldn’t recommend using it as Facebook will likely soon catch on and it’ll be disabled.
13. I can’t set my Static FBML Welcome tab to be the default tab for fans and non-fans.
    
    Facebook allows you to set a custom tab as the default landing page for non-fans. However, the default tab for fans is the Wall, and this can’t be changed.
14. I put an animated GIF on my Static FBML tag, but it doesn’t animate!
    
    Facebook no longer allows animated GIFs on Static FBML application tabs or canvas applications.
15. My Page looks good in most browsers, but not Internet Explorer.
    
    Internet Explorer, particularly the old-and-in-the-way Internet Explorer 6, are very “buggy” in interpreting CSS. But other browsers have their quirks, as well. Here is a good place to start when debugging your CSS.
16. I can’t add RSS feeds to my Static FBML tab using the usual JavaScript or PHP methods.
    
    In order to import an RSS feed you need to use a scripting language — eg PHP, ASP — and Static FBML boxes cannot parse any scripting languages, period. There are a number of third-party applications for adding RSS feeds, and you can also create a canvas application. Read more in my post on RSS feeds and Static FBML »

See You There Invitations

(shared by Judene McCalla)

• Best Practice: This simple landing page tab welcomes users to the business page and describes the company and its services/products.
• TRY THIS: Your landing page should explain what your purpose is here on Facebook, and encourage people to become a fan by offering some information or community service or even a product of value. Tell us, what is this Facebook Page all about? What value are you offering to your fans?



• BP: A second tab serves as a mailing list sign-up, a great way to add subscribers to your email newsletter list.
• TRY THIS: Keep it simple and combine these two tabs into one. You can add your mailing list email-form to the welcome tab and make it easy for new visitors to get all of the information in one place.




• BP: A share button allows people to spread your content to their friends and network with a simple click.

Learn how to add a Share button to your page with FBML here

• TRY THIS: When linking to your website and other social media sites, make sure that these links are prominent. Use social icons and your company logo to catch the user’s attention visually (rather than simple text links).

Crane Coffee

(shared by Jon Arrington)

• Best Practice: Using multi-page navigation within your landing page (application tab set as default tab for new visitors) is a great way to share an entire website of information without forcing the user to leave your Facebook page, or even the first tab.



• TRY THIS: Make sure that your code is loading properly before adding the tab to visible main navigation on your page (notice how in this image above the text doesn’t all fit in the box at the bottom?)
• BP: Use all of the space you have to create an eye-catching and visually pleasing design that distinguishes your custom tab from the rest of Facebook.
• TRY THIS: You should be designing and developing your FBML pages for the upcoming Facebook change to a 520 pixel width for all FBML application tabs. To avoid this restriction, you can work with canvas applications.

To find out about the changes in Facebook Pages, pertinent for developers, read our blog post on the topic: Facebook Changes. You can also find recent updates on the Facebook Developers site.

• BP: Both of these Facebook Pages have set their custom FBML tabs as landing pages for all non-fans who visit their page. Facebook does not let administrators control where fans land on their page (default is the wall) but you can choose which tab is first seen by a new visitor.

Learn how to set a landing tab for your page here, in our FAQ tutorial post.

Thank you for sharing all of your FBML examples, we hope that we can continue to be of help in all of your Facebook developing endeavors.

Embedding a Photobucket slideshow in your Static FBML tab uses the same FBML tag that’s used when embedding YouTube videos or slideshows, Flash (SWF) or Flickr galleries.

Of course, the first thing you need to do is set up a Photobucket account (free) and then create your slideshow. I won’t go into great detail on that here. But, basically, you need first to create a new Photobucket album, then upload photos to that album, tag them, add descriptions, etc.

Get the Embed Code for the Photobucket Slideshow

Once you have a Photobucket album, here’s the drill:

• Click the “Share” button in the upper-right corner:
  
• On the next screen, click the “Get link code” tab:
  
• In the same screen, next to “Embed album slideshow,” click into the box and copy the content (Mac: Command + C; Windows: Control + C);
• Paste the content into a text editor. It will look like this:
  

Create the FBML embed code for your Static FBML tab

From the embed you copied in Photobucket, use the value for embed “src” (the first red box, above) for the “swfsrc” value in the FBML fb:swf tag. You will use the entire “flashvars” parameter (2nd red box):


<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://static.pbsrc.com/flash/rss_slideshow.swf'
imgsrc='http://www.hyperarts.com/facebook/_img/click-to-play.gif' width='480' height='360'
flashvars="rssFeed=http%3A%2F%2Ffeed567.photobucket.com%2Falbums%2Fss117
%2Fhyperarts%2FGreenland%25202007%2Ffeed.rss"
/>


You will need to create an “activation” image that the user clicks to activate your slideshow (Facebook requires that the user take an action, usually a click, to activate Flash and/or JavaScript).

Your activation image should be the same dimensions as your slideshow (480px x 360px, in the above example), although you can add width and height values in the “imgstyle” parameter to set different dimensions for the activation image. Example:


imgstyle="width:240px; height:180px;"


This would render an activation image that’s exactly half the dimensions of the slideshow when it loads.

This is what your Photobucket slideshow will look like after the user clicks the activation image:

Related Static FBML Tutorials

Tutorial: Embed YouTube Videos and Flash in Static FBML Tabs

Tutorial: Embedding Your YouTube Channel Video Player in a Static FBML Page

Tutorial: Embedding Vimeo Videos in your Facebook Fan Page with Static FBML

Tutorial: Embedding a Flickr Gallery in Static FBML Tab

Other Resources

Facebook Developer Wiki on fb:swf tag

Given this unfortunate (but understandable) fact, how can you add blog feeds, Twitter feeds or other feeds to your fan page? There are basically 3 choices:

1. Third-Party Applications, such as Involver or Social RSS;
2. Facebook’s “Notes” application;
3. Custom canvas page application.

How to add RSS feeds to your Fan Page

Third-Party Facebook App Providers
There are a number of third-party Facebook applications that allow you to add an RSS-feed tab to your page.

Involver
You can add up to 2 Involver apps to your fan page for free. They offer an RSS feed app and a Twitter feed app.

• Go to the Involver website and click the blue Facebook “Install” button under “Free Applications”;
• On the next screen, select the Facebook page on which you’d like to install the app;
• After selecting the page to which you want to install the app, click “Add RSS for pages” button;
• Enter the blog feed URL in the next screen.
• To have a Twitter feed, add the Involver app called “Twitter”, also under “Free Applications” and follow the same drill as above. Instead of a feed URL, you’ll just have to enter a Twitter username;
• You’ll then see detailed instructions for adding the tab.

Social RSS

You can configure this app to automatically pull in updates from any RSS or ATOM feed and display them as posts on your Fan Page, either on a dedicated tab, a wall tab (on the left side) or as part of your core news feed.

• Go to the Social RSS page and click “Add to my page” link under the avatar in upper-left of page;
• In the popup window, select the page to which you want to add the application, the click “OK”;
• Go to the page to which you added the app, and click “Edit page” under the avatar;
• Scroll down to the Social RSS app, and click “Edit”;
• In the Social RSS screen, you can enter one or more feeds, and set additional parameters. If you have multiple feeds, they will be available via a pulldown menu on the “RSS/Blog” tab (the default name which can’t be changed);
• When you’re done, click “Update”.

Import your blog using the “Notes” application:
You can also use the Notes application which is present by default.

• Click on “Edit Page” (under your Facebook avatar);
• Scroll down to the Notes application, and click “Application Settings”;
• Next to “Tab:” it should say “Remove”; if it says “Add” then click “Add”, then “OK”;
• Click back to your page (you can click your avatar at the top of the Edit page);
• Click on Notes, which will either be in your top tabs or under the “>>”;
• Click ;
• At the top right, click ;
• Click “Import a blog” on the next screen:
  
• Follow the instructions, viola!.

Create, or have someone create for you, a Facebook canvas application:
Because the code for canvas apps is not hosted on Facebook servers, there is not the restriction around scripting languages that exists for Static FBML.

You will need to install an PHP RSS parser on the server where you host your canvas application. A Google search on “RSS parser PHP” will provide plenty of options.

And here’s a very helpful tutorial on creating Facebook canvas applications for beginners.

There are a couple drawbacks to using the third-party RSS Feed applications, mostly around branding or ads, as well as limited customization and naming the tabs. And the Notes application only allows the importing of one blog feed.

A custom canvas application is the best solution, but it’s also the most costly. And it’s best to have this done by a professional developer.

If anyone can add to the above information, please do so in the comments. Cheers!

2009 was all about preaching the values of social media. We attended a lot of social “meetups” to meet peers in the industry and learn how people were using social networks in new and interesting ways. We pitched grand social engagement strategies to potential clients.

What did we learn? Convincing people that the social web was the new frontier was not difficult. We had examples, case studies and passion for the cause. But once we had the converts, how could we help them learn to help themselves? I often felt like the proverbial fishing teacher…I wanted to teach my clients to fish on their own, to see them take control of their own online communities and blog with fervor! But at the end of the day, after hearing all of the typical excuses (“we don’t have the time” or “we don’t know what to say”) I was reluctantly handing out the fish.

As those types of clients gradually drifted away, we began concentrating more on our own social media presence. Our blog was becoming a valuable resource for developers and small business owners looking to learn about social media and implement their ideas themselves. We were practicing what we had preached: giving our audience something of value, listening to what they were asking us, and answering their questions. Our Facebook page has blossomed into a large international community of people looking for help implementing Static FBML pages, their blogs and websites, their Twitter accounts and even with social engagement strategies. I started spending more time with clients in social media training sessions, or hourly consulting that would reap huge benefits for them after a mere hour, compared to the clients who used to hire me to manage their networks for them. I was helping people learn to fish!

Someone pointed out to me recently that at HyperArts we seem to be building more than evangelizing. It’s pretty common to see companies claiming to be “social media agencies” out there, but how many of them are actually walking the walk, instead of just talking? That observation stuck with me, and made me proud. Yes, we have stopped trying to convince people with our words. Instead, we are showing them with our behavior and the positive results that social media can really turn your business into a community.

If you are interested in finding out more about our social media consulting services, please give me a call. Sometimes just 30 minutes on the phone can really make a difference. Check out our reviews from previous clients who have benefited from our services.

Analisa
HyperArts Social Media Manager
(510) 339-6084

This article isn’t about that; it’s about get-fans-quick schemes…

NOTE: Do not add any script/code to your fan page that requires users to share or invite friends in order to view content! Check out our “Facebook-legal” code…

Not long after I started posting Static FBML tutorials on our blog, I began receiving the occasional request for a “3-step” fan page script that would force visitors to not only become a “fan” to see content, but also hide that content until the visitor had actually shared the information with their friends or posted it on their profile.

I decided to investigate this further, and it turns out the people using this approach to building up their fan count are doing so primarily as a Multi-Level Marketing (“MLM”) strategy. Unfortunately for those deploying this strategy, it runs afoul of Facebook’s Terms of Service.

Incentivized Fanning, Yes; Incentivized Inviting/Sharing, No!

Facebook is fine with dangling the promise of quality content in front of users, requiring them to “fan” your page to gain access. What Facebook is NOT fine with is putting up additional roadblocks/requirements for those who have fanned your page, such as requiring them to invite their friends to the page or share the page on their profile.

Facebook is okay with “incentivizing fanning” and advises:

As noted in this forum thread, apps are allowed to offer rewards or incentives to get users to fan their Page or Public Profile. Fanning is not considered an application integration point for which incentivizing is restricted [emphasis added].

An Application Integration Point is:

Profile Box, Application Info Section, Application tab, Feed, requests (including invites), Publisher, inbox attachments, Chat, Bookmarks, or any other feature of a user profile or Facebook communication channel in which or through which an application can provide, display, or deliver content directed at, on behalf of, or by permission of a user.

And here are Facebooks policies regarding Application Integration Points:

• You must not incentivize users to grant additional permissions or use Application Integration Points.
• You must not require users to grant additional permissions or add Application Integration Points, and must only request extended permissions at reasonable times when the user engages with features that would require the use.
• You must not prompt users to send invitations, requests, publish a Stream story or use other Facebook communication channels immediately after a user allows access or returns to your application.

Warning to Page Admins: Don’t Violate Facebook’s Terms of Service!

So other than requiring that a user fan your page to gain access to content, pages are disallowed from putting up any additional roadblocks to content. Pages that use scripts to force the sharing or publishing of content before showing content can be, and have been, disabled by Facebook. And once this happens, it’s no picnic trying to get back.

No matter what the purveyor of the script promises, do not install any script on your fan page that requires users to share or invite before granting them access to content!

Investigating the 3-Step Viral Fan Page Script

Multi-Level Marketing encourages multiple tiers of resellers to build up email email lists — and, now, fan-page counts — and then sell their lists to outfits that traffic in these lists, marketing them as “opt-in” even though in most cases those opting were promised that their email address wouldn’t be sold.

Most of these 3-step fan-page scripts lead finally to a “squeeze page” where the whole point is to harvest an email address. Squeeze pages are highly focused and targeted, with an offer and and opt-in form to capture the email address (and, ironically perhaps, a promise not share the email address with third parties), and no links to other pages (thus the “squeeze”). The 3-step process results in the acquisition of both fans as well as opt-in email addresses.

Here is a typical offer for such a 3-step script:

FACEBOOK Viral 3 Step Fan page Script
Go viral with your Facebook fan page with this script.

With this script, you can easily go viral with your Facebook fan pages.

Here is a rundown of the steps
1. Become a Fan
2. Suggest to Friends
3. Click on your link
Step1: They are required to become a fan to move on.
Step2. They are required to invite their friends to move on.
Step3. They are required to click to your link to see the content
This is a superb viral fan page FBML script. Your fan base will grow rapidly.

When user clicks on your link to unlock the content they need to fill a survey! , You can get account from CPAlead.com, and start earning money right away!

CLICK HERE TO SEE LIVE DEMO PAGE

PRICE: only $20

The example the above person provides is the promise of “unseen Jessica Alba pictures,” a typical bait. Something where the user thinks, What the heck. Hot Jessica pics for just fanning the page. Oh, and I guess I have to invite some friends. OK. Whatever. Here’s another example (If you follow the comments thread, you’ll see the seller of the script eventually disappears!).

And another example, which states “This page is designed to get users to fan your page and also to invite all of their friends. Squeeze pages are designed to maximize the amount of fans and users of your particular Facebook page. Using the special code for sale here you are able to gain an increased amount of users and fans due to the interface workflow provided to the user. It’s like your page marketing on auto pilot!”

If you actually visit the Jessica Alba page (or any of the linked pages in the above ads), whatever they had going there no longer works. In fact, Facebook seems to have pretty much shut down this approach to bulking up fan counts, and is quickly disabling fan pages that utilize this technique. Some of the forums offer tips to avoid getting busted by Facebook, but it’s probably a losing proposition.

Cost per Action / Cost per Acquisition Marketing

And what is that CPAlead.com website in the Alba-pics ad? It is one of many websites that offer compensation based on the “Cost Per Action” or “Cost per Acquisition” (“CPA”) model. Wikipedia:

An online advertising pricing model, where the advertiser pays for each specified action (a purchase, a form submission, and so on) linked to the advertisement.

Direct response advertisers consider CPA the optimal way to buy online advertising, as an advertiser only pays for the ad when the desired action has occurred. The desired action to be performed is determined by the advertiser.

Can you have a 3-step process that doesn’t violate Facebook’s Terms of Service?

Yes, you can. As long as you don’t make the viewing of your content contingent on a user sharing your page, you can certainly offer them the opportunity to share your page with their friends before you show your content. You just can’t require it.

The “illegal” TOS-violating scripts are, I believe, created as canvas applications. I have created a basic 3-step fan-page Static FBML script that doesn’t violate Facebook’s Terms of Service. It asks the user to publish to their profile or invite friends, but doesn’t require this to access an offer.

A bug report was opened on the Facebook Developer Wiki Bug Tracker on June 24, 2010, and a number of workarounds have been proposed.

I encountered this error today and decided to try a version of the fix suggested in Comment #14 of the bug report:

This works in IE8 only…

On the “check availability” page, press F12 to activate the Developer Tools feature of IE8

In the Developer Tools window, click on the Find menu and choose “Select Element by Click”

As you move the mouse over the web page, blue boxes will appear for each element you move over

Click on the input box where you would type the desired username and the Developer Tools window will show you the HTML tag for that box which should look like this:

<input name=”page_input” title=”Enter desired username” class=”inputtext DOMControl_placeholder” id=”page_input” …

Change the “class” attribute’s value from “inputtext DOMControl_placeholder” to just “inputtext”

In the Developer Tools window, click on the Outline menu and choose “Clear Outlines” to get rid of the blue box.

The form should now work .

Firefox Inspect Element Fix

I tried something similar in Firefox, using the feature in the Firebug plugin called “Inspect Element”. (UPDATE: Commenters have reported this same fix working in Safari & Google Chrome!)

I right-clicked directly on the text-entry box, and from the contextual menu I selected “Inspect Element”:

In the “Inspect Element” screen that appears at the bottom, you’ll see the CSS class setting for the input box — ‘class=”inputtext DOMControl_placeholder”‘:

I deleted the ” DOMControl_placeholder” so that the only class was “inputtext”…

I then clicked the “Check Availability” button and it worked!

I understand that this might not work for some users and I won’t be able to troubleshoot other peoples’ problems with this Facebook bug.

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.

Although all three offer the ability to create fairly complex forms, this feature alone isn’t what I was looking for. I wanted a service that offered:

• Ease of use;
• Nice styling choices;
• Customized email notifications;
• Form validation (including CAPTCHA);
• Code that could be input into a Static FBML tab and function well.

Of the three services I checked out, Wufoo got disqualified right off the bat, as they just don’t offer a good option to insert the form code into a Static FBML tab. By their own admission, “I’m afraid we’re not working on any complex Facebook embedding or integration anytime soon.”

The good news is that both AllForms and JotForm do offer code that you can insert into the Static FBML tabs and with a number of styling and configuration options that are pretty great.

JotForm & Allforms Tutorials

Depending on which form service you choose, here are tutorials for ones I thought offered the best options for use on Facebook Static FBML tabs:

• Tutorial on using JotForm for your Facebook Static FBML tab »
• Tutorial on using Allforms for your Facebook Static FBML tab »

JotForm Form Builder

I think JotForms offers the best styling options. However, I could not get form validation to work in the Static FBML environment, and was advised in their forum: “Captcha will probably not work so you should probably remove that. You should probably also remove the form validations.”

However, unlike Wufoo, JotForms is at least somewhat aware of the emerging importance of being compatible with Facebook, and even offers a solution to adding a form you create in JotForms to Facebook. And their styling options were far superior to those offered by AllForms, with a number of one-click theme options for your form.

Another cool feature with JotForms is the ability to import forms from an existing Web page or a previously created Jot form, or from a number of form samples they offer. Very useful!

JotForm also offers more configuration options for the email you receive from someone who’s filled out the form, allowing you to have the “from” address be the user’s email and specifying the wording for the subject line.

• JotForm Plans & Pricing

View my sample JotForm email on Facebook.

Allforms — Free Form to Email

Although the styling options of Allforms forms are pretty limited (OK, extremely limited), their form validation will work in Facebook Static FBML tabs, and you can get the data emailed to you in a really nice format (if you choose the “HTML” email option).

Although the form validation works (in fact, not having validation is NOT an option with the free plan), it takes the user to a page where they are informed that they haven’t filled in the required field and they have to use their back button to get back to the form. But, hey, it works, and it’ll reduce spam.

As with JotForm, you can specify a URL to which to redirect the user after they have submitted the form. But you can’t configure the email to have the “from” address be the person who submitted the form.

Allforms lets you create a form processor to handle your existing form!

The feature that I thought really made Allforms a great choice is that you can use your own HTML form and use their service to create a form processor to handle it. So for those who have an HTML form and just need an online form-processing service, Allforms is the choice.

At HyperArts we offer Static FBML templates for sale, some with forms, and the form processing is always where our customers get hung up, in not being able to upload and configure their own form processor. Allforms takes care of this. Awesome!

• Allforms Plans & Pricing

Here is a sample form I created with Allforms for use on Facebook. Although you can get rid of or change the colors, you can’t eliminate those big numbers on the left … you would have to manually remove them from the provided code.

So which online form service is best for Facebook?

For appearance, I would say JotForm, hands down. And it has more email-notification options.

• Tutorial on using JotForm to create a contact form on your Facebook Static FBML tab »

If form validation is important (and it should be), then Allforms is a better choice. And it even offers a CAPTCHA function that works! Their email notification offers lots of information that JotForm’s doesn’t, such as URL of the form and IP address of the sender, as well as a best-guess country of origin.

If you have CSS / HTML skills, you can change the markup of the Allform-provided code to suit your taste. Or you can create your form, and CSS, outside of Allform and just use their form-processing service.

• Tutorial on using Allforms on Facebook Static FBML tab »

Ajax & HyperArts to the Rescue — Ajax-Powered Static FBML Contact Tab!

HyperArts offers a great Ajax-driven form template that includes validation and total flexibility with design and customization. Our form validates the user’s submission (checking required fields) and submits the form without the user ever leaving the form page. After submitting the form, the user is presented with a “thank you” message and the form disappears. The only requirement is that you have access to a hosting server with PHP installed. See it in action on our HyperForms Fan Page »

• Read more about our Static FBML Contact Form Template »

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.

Getting Started with JotForm

• Set up account (free or paid);
• Click New Form
  
  You can create a form from scratch (“Blank Form”), select a form template (for this tutorial I chose “Contact Us”), or import a form from another website or another form previously created on JotForm. After making your selection, click “Continue”…
• “Contact Us” Template
  Assuming, for the purposes of this tutorial, you chose “Contact Us,” you’ll see it has: Name (separate first and last name fields), Email, Message.
• Add Drop Down (aka Pulldown Select)
  
  To add your drop-down options, click the small icon to the right of the pulldown box
• Add Radio Button
  Enter the question, then click the individual options to edit:
  
• Editing Properties (the gear icon)
  
  You can change the size of the field, or change its order in the form (which can also do by clicking and dragging), or delete or duplicate the question.
• Add a Checkbox
  The Checkbox configuration options are the same as the Radio Buttons:
  
• Toolbar
  The toolbar options change depending on which field you’re editing. This is the main toolbar for “Form Style”:
  
• Themes – Attractive one-click theming options. I chose the “Default” theme for its simplicity.
• Clean up
  I got rid of the header and just kept the form.

JotForm Setup & Share

After you have created your form, you then need to set some options for the email that is sent with the form data, as well as generate the code you will need to insert into your Static FBML tab.

• Setup & Share – Email Alerts:
  Click the “Setup & Share” tab to activate these choices:
  
• Click “Notification” to edit Subject of email
  
• Set From address and Recipient
  Click the “Reply-To and Recipient Settings” to set “Sender Name” and “Sender E-mail” (you can set this to the values the user inputs in your form, using {yourEmail} or whatever value the email field has.
  
• Set redirect after form is submitted.
  Click the “Thank You” icon to set what the user sees after submitting the form (Default Thank You page; Custom URL; Thank You message)
  

Generate the code for your Static FBML

• Click “Share Form” (the “globe” icon in the top navigation) to get the code for your Facebook Static FBML tab. In the popup window, click “Advanced Options” at bottom of window:
  .
• Click “Full Source Code” in left navigation. (DO NOT select “Social Networks” — there’s a “Facebook” option there and instructions for adding to Static FBML, but the code provided DOES NOT WORK!); Per a Jotform employee’s comment below, Jotform has now fixed the “Social Network” tab under “Advanced Options” so that the code it generates works in Facebook. But it doesn’t support validation or CAPTCHA.
• Click in the “Full Source Code” field to highlight all the content and copy this to your clipboard (Mac: Command+c; Windows: Control+c).
• Per these instructions provided in the JotForm Forum,
  replace the last 3 or 4 lines at the bottom of the copied source code (between the last </div> and </form>) with “<input type=”submit” value=”Submit” >” so the code will work in Facebook.

HyperArts JotForm Example

Check out our example of a JotForm form on a Static FBML tab.

You can customize the CSS for the form in the <style> tags. I added:


label { font-weight:normal; }
.form-label-top { font-weight:bold; }


to bold just the form field labels, but leave the options normal.

Recipient Email Format

Here’s the HTML version of the JotForm email that is sent to the specified recipient of form data:


If you have questions about using JotForm, rather than ask them here, please use the JotForm Support Forum.

And, please, if your experience differs from this tutorial, let me know!

]]> http://www.hyperarts.com/blog/add-contact-form-to-facebook-static-fbml-tab-jotform/feed/ 9