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 »

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 http://www.hyperarts.com/blog/add-contact-form-to-facebook-static-fbml-tab-allforms/ http://www.hyperarts.com/blog/add-contact-form-to-facebook-static-fbml-tab-allforms/#comments Thu, 03 Jun 2010 04:38:16 +0000 timware http://www.hyperarts.com/blog/?p=2391 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….


Setting up Allforms

Allforms offers two tiers of service, free and “Plus” (Compare Allform’s Account Features.).

• Register for an account (click “Register” at top right). There are two options: Free and “Plus” (Price comparison);
• After registering, click through to create your first form.
• Options: All the options and styling choices are on the one screen. You add new questions via the left column, and you style the form (just colors) in the right menu (the color options say “For Plus Accounts Only” but these options work in a free account, as well. At least they did for me).
• Name Your Form: Give your form a name, replacing “Sample Form”;
• Add Questions: Use the “Add a Question” in the left nav to add a new question to your form.

Color Options: You can change the hexadecimal color options in the right menu to your taste:

Unfortunately, you can’t get rid of the numbers! (Except by manually editing the HTML code generated.)

• Form Validation – Required Fields: Under “Required Questions” set the required fields.
• Success Page URL: Set the “Custom Success Page” URL to the page where the user is directed after submitting the form;
• Email Recipient: Set “E-mail Addresses” to whomever you want to receive the form data via email;
• Subject Line: Set “E-mail Subject” to the Subject Line for the email you receive from the form submission;
• HTML or Plain Text Email Format: Set “E-mail Format” to HTML for best results, IF your email reader supports HTML email (most do these days);
• CAPTCHA: “Enable Anti-Spam” Validation is mandatory with the free account;
• When you’ve finished adding all your questions and chosen all options, click “Continue”;

Copy the CSS and HTML code for your form

On next screen, under “Putting the form directly onto your website or webpages” copy the code in the box. Paste this code, as is, into your Static FBML box.

You can check out our Allforms example on Facebook.

Allforms Recipient Email – HTML Format



Allforms Support

For further support with Allforms, please check out their support forums and FAQs.

If you find that any information in this tutorial is incorrect, inaccurate or could be improved, please let me know.

]]> http://www.hyperarts.com/blog/add-contact-form-to-facebook-static-fbml-tab-allforms/feed/ 4 http://www.hyperarts.com/blog/facebook-shrinking-images-fan-page-tabs-static-fbml/ http://www.hyperarts.com/blog/facebook-shrinking-images-fan-page-tabs-static-fbml/#comments Thu, 27 May 2010 13:56:49 +0000 timware http://www.hyperarts.com/blog/?p=2251 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.”

Explanation of the problem by Jerry Cain, Facebook software developer:

We noticed that images weren’t being proxied when the application tabs were loading. That means the domains hosting the images are pinged directly every single time the tab is rendered, and that can be used to discern who the logged in user is, what page they navigated from, etc. We pushed the proxying fix this afternoon, but the fix incorrectly introduced downsizing and downsampling when it didn’t have to. The fix I just checked in still proxies the image, but at the original size and bit depth.

The fix for your shrunken images

Even though Facebook is caching and shrinking your images, there’s a way to at least have them at the correct size so that your layout doesn’t break, although they’ll be a bit blurry / fuzzy because you’re basically stretching a smaller image to be larger. But it’s the lesser of two evils.

The fix is pretty easy. You must make sure that you specify width and height parameters for your images, either the old-school way, in the <img> tag, with (and the values shown below are just examples!):


<img src="..." width="520" height="70" />


or assigning the image an ID and then using CSS:


<img src="..." id="myimage">.


Then, in your CSS:


img#myimage { width:520px; height:70px; }


Where this can get tricky is when you’re using background images via CSS and there’s no way to specify the image’s dimensions, particularly if it’s tiling horizontally or vertically.

External Stylesheets to the Rescue!

I had been spooked a month or so ago when Facebook had a glitch and wasn’t pulling in external stylesheets, but made no announcement about it. They eventually began supporting external CSS again, but I decided to just inline the CSS in the <style type=”text/css”> … </style> tags.

Today, in addressing this new shrinking-image bug, I went back to external CSS and then the background images showed up at full size!

As usual, there is some randomness to this, as some of my images that lacked height and width parameters weren’t affected, but many were, and suffered for it!

My advice would be to make sure all images have height and width parameters. If you’re using background images via CSS and inlining them via the <style> tags, and they’re getting shrunk, try using external CSS.

]]> http://www.hyperarts.com/blog/facebook-shrinking-images-fan-page-tabs-static-fbml/feed/ 14 http://www.hyperarts.com/blog/multiple-videos-side-by-side-rows-facebook-static-fbml-tabs/ http://www.hyperarts.com/blog/multiple-videos-side-by-side-rows-facebook-static-fbml-tabs/#comments Sat, 22 May 2010 19:06:13 +0000 timware http://www.hyperarts.com/blog/?p=2208 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:


Displaying multiple videos in a row in Static FBML

In my example, each row will be inside the “multivideos” DIV and contain the two videos, each in a separate DIV. I recommend limiting the width of your videos to 250 pixels so that two can fit inside a 520-pixel container (the anticipated new maximum width of application tabs, such as Static FBML).

If you want more videos in a row, you’ll need to adjust the width of the videos, as well as change the width values of the CSS classes.

As shown in the code below, you need to first create a few CSS classes which you will set in your tab:

.multivideos (contains the individual videos for each row)

.video1 (contains the first video in the row)

.videos (contains additional videos in the row)

.clear (you need a “clearing” DIV after two or more floated elements – .video1 and .videos – in order for the .multivideos containing DIV to expand to accommodate the two floated DIVs inside it).

To get the correct URL for the YouTube video, just navigate to the video’s page on YouTube, then click the “Embed” button, which is below the video:


Copy the value from the embed code:


Setting the videos to autoplay when activation image is clicked

If you want to set your video to autoplay after the user clicks the activation image, add “autoplay=1″ after the “&” at the end of the video’s URL (if there’s no “&”, add “&autoplay=1″), as in my example code.

Of course, you can, and should, choose a different activation image for your video.

The Video Rows Code

Here is the code, which will work as-is if you paste it into the “FBML” box in your Static FBML tab. You can simply change the “swfsrc” value to point to the video you wish to embed.


<style type="text/css">
.videorow { width:520px; clear:both; margin-bottom:5px;}
.video1 { float:left; width:250px;}
.videos { float:left; width:250px; margin-left:5px;}
.clear { font-size: 1px; line-height: 1px; height: -1%; clear:both; }
</style>
<div class="videorow">
<div class="video1">
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/qrO4YZeyl0I&hl=en_US&fs=1&autoplay=1'
imgsrc='http://i567.photobucket.com/albums/ss117/hyperarts/click-to-play.gif' width='250' height='150' />
</div>
<div class="videos">
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/1mB0tP1I-14&hl=en_US&fs=1&autoplay=1'
imgsrc='http://i567.photobucket.com/albums/ss117/hyperarts/click-to-play.gif' width='250' height='150' />
</div>
<p class="clear"></p>
</div> <!-- END videorow -->
<div class="videorow">
<div class="video1">
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/bESGLojNYSo&hl=en_US&fs=1&autoplay=1'
imgsrc='http://i567.photobucket.com/albums/ss117/hyperarts/click-to-play.gif' width='250' height='200' />
</div>
<div class="videos">
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/-7NoOhmVMac&hl=en_US&fs=1&autoplay=1'
imgsrc='http://i567.photobucket.com/albums/ss117/hyperarts/click-to-play.gif' width='250' height='200' />
</div>
<p class="clear"></p>
</div> <!-- END multivideos -->


You can see the above example here. (For an “interesting” experience, I recommend playing all four at once!)

Calculating video dimensions for best display of videos and activation images

Most YouTube videos are either 640 x 385 pixels or 480 x 385 pixels. You will need to scale the width and height values in your fb:swf so that the videos and the “activation” images (imgsrc) aren’t distorted by having the wrong aspect ratio (ratio of width to height).

In my example, I placed the two 640 x 385 videos in row one and the two 480 x 385 videos in row two, for a better visual display.

I also used a generic “click to play” activation image which I uploaded to Photobucket’s image-hosting service. If you don’t have access to a Web server to which you can upload images, Photobucket is a great alternative.

For additional instructions on adding YouTube videos or Flash to Static FBML, check out our tutorial.

]]> http://www.hyperarts.com/blog/multiple-videos-side-by-side-rows-facebook-static-fbml-tabs/feed/ 2 http://www.hyperarts.com/blog/facebook-pages-fbml-tutorial-videos/ http://www.hyperarts.com/blog/facebook-pages-fbml-tutorial-videos/#comments Fri, 21 May 2010 20:00:26 +0000 Analisa http://www.hyperarts.com/blog/?p=2180 We have been asked lots of questions about FBML and developing custom tabs for Facebook Pages. Often they are the same basic questions and we are happy to answer them…But sometimes telling you how to do things is not nearly as effective as showing you!

Here are some videos that show you set-by-step instructions for optimizing your Facebook page and custom FBML tabs with video, music, photos and more:

How to add FBML to your Facebook Page

How to Embed a Flickr Slideshow

How to host and add images to FBML

How to embed MP3s in FBML

How to embed a YouTube video in FBML

]]> http://www.hyperarts.com/blog/facebook-pages-fbml-tutorial-videos/feed/ 39 http://www.hyperarts.com/blog/how-to-add-facebook-like-button-social-plugins-to-wordpress-posts/ http://www.hyperarts.com/blog/how-to-add-facebook-like-button-social-plugins-to-wordpress-posts/#comments Sat, 24 Apr 2010 23:24:46 +0000 timware http://www.hyperarts.com/blog/?p=1999 Facebook’s new Open Graph protocol is now official, having been announced and launched this past Wednesday at the Facebook f8 Conference. It is the successor to Facebook Connect which will be slowly phased out, and it is a big improvement, making it much easier to “socialize” your Web pages into Facebook’s hyper-expanding social network.

I must admit it was hard to sit still at the f8 conference after Mark Zuckerberg made the announcement in his keynote address and I attended a couple sessions that delved deeper into the Social Plugins and the Open Graph protocol. As soon as possible, which happens to be today, I decided to start experimenting by adding some social plugins to my WordPress blog.

I decided I could save others a lot of time if I wrote up a tutorial. So here it is….

Adding the Facebook Social Plugins to your Web Page or Blog — XFBML or iFrame?

Facebook offers two methods to add their social plugins to your Web page or blog posts:

1. A simple iframe which can be easily dropped into the Web page code;
2. The <fb:like> XFBML tag, which requires that your page/post make a call to the JavaScript SDK and that your page be set up as a Facebook application (quite easy).

I decided to go the XFBML route which, although a bit more complicated, is more feature rich than the iframe method. For example, after clicking on your Like/Recommend button, the user can add a comment to the profile post. With the XFBML Like button, the post on the user’s personal profile looks like this (if, and only if, they add a comment):


With the iFrame Like button (or if the user doesn’t add a comment with your XFBML version), the post on a user’s profile shows up like this:


New WordPress Plugins for Facebook Social Plugins

If you’d be happy with the simpler iframe method, there are already several WordPress plugins to add the Like button. And here’s a good post on adding the iframe Like button. But, remember, with the iframe method you can’t use the extended features such as the user being able to add a comment when “liking” your post or blog. There is also a WordPress plugin that will add the XFBML social plugins to your blog, by Otto.

Create an Application – Tell Facebook Your Website, Web Page or Post is an Application

The Web page or blog post to which you will add Facebook’s social plugins or other features that interact with Facebook’s Graph API will be viewed by Facebook as an “application,” which allows the page or post to use the JavaScript SDK. Here is the drill:

While logged in to Facebook, go to Create an Application page. You will see this:


• Enter the “Site name” value — it will be the name of the application. Just give it a short descriptive title (I used “HyperArts Blog”);
• Under the “Connect” tab in your new application, enter the full URL to the website or Web page (I used “http://www.hyperarts.com/blog/” – but individual posts will have a specific URL directly to the post via some PHP code in the Like button code, as described below.)
  NOTE: Make sure the Connect URL exactly matches your site URL
  
• Select the appropriate locale;
• Enter the CAPTCHA characters, and click through, and viola! There’s your application.

The “Application ID” value is the one you’ll want for our purposes in this post. You can always access this “application” by going to the Developer Dashboard:


With your Web page or blog set up as an application with an app ID, you can now use the JavaScript SDK. There are many other things you can do with your application via the Facebook Graph API, but this is outside the scope of this post.

Add Meta Tags to your WordPress Blog Header File

You’ll need to add the meta tags to your “header.php” file located in your theme’s folder (wp-content > themes > [your theme] > header.php).

You’ll need to add a couple new values to the <html> tag of your header:


<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml" <?php language_attributes(); ?>>


And then add the following meta tags (taken from our blog) to your header.php:


<meta property="fb:admins" content="YOUR-ADMIN-ID"/>
<meta property="fb:app_id" content="YOUR-APP-ID" />
<meta property="og:type" content="article" />
<?php if(is_home()) {
?><meta property="og:title" content="Blog" /><?php
} else {
?><meta property="og:title" content="<?php the_title_attribute( $args ); ?>" /><?php
}
?>
<?php if (is_home())
echo '<meta property="og:url" content="YOUR-APP-URL" />';
else echo '<meta property="og:url" content="'.get_permalink().'" />';
?>

fb:admins

Replace YOUR-ADMIN-ID with your Facebook User ID. To easily get your Facebook User ID, you can use another aspect of the social graph: http://graph.facebook.com/timware (substitute your username for “timware”). This will pull up the information that is publicly available for that user. You’ll want the “id” value for our purposes here.

fb:app_id

Replace YOUR-APP-ID with the Application ID assigned to your website when you set it up on Facebook, as described above.

og:title

For the “og:title” attribute, you’ll want this to return the title for your blog post. As you can see from the above example, this simply involves a bit of PHP code that pulls in the post’s title.

og:type

As you see above, I utilized a PHP conditional statement in header.php to have the <meta property=”og:type” content=”blog” /> tag for the home page and the <meta property=”og:type” content=”article” /> for individual posts. This comes by way of Otto who has an excellent blog on WordPress, as well as a Facebook Connect plugin for WordPress. And this approach is also supported in this GitHub post.

As for the implications, in terms of Insights and the display of Pages in your “Home > Ads and Pages” section of your personal profile, we’ll have to wait and see.

You’ll also need to add the <fb:like> XFBML to your index.php file for your theme, as well as the call to the JavaScript SDK. I added it as the first content after the “main-content” DIV. You will then see the Admin Page option next to the Like button.

og:url

I used some PHP to set the URL for our blog’s landing page to the blog URL set in the application (YOUR-APP-URL). On the individual pages or posts, it will fill in the Permalink for the page/post. In “single.php” (for individual blog posts) and “page.php” (for pages), we omit the “href” value in the “Like” button code (fb:like).

og:description

The “og:description” meta tag: If you omit this meta tag, the value will be the “description” meta tag for the post, and that is what will show up as the description on a user’s Facebook profile when they “Recommend” or “Like” your post. (We use the WordPress SEO plugin Headspace which gives you the ability to create custom title and meta tags for each post. Highly recommended!)

og:image

This is simply the full/absolute URL to the image you want to have appear when someone “Likes” your page and it’s added to their personal profile stream. We omit this meta tag so that it uses the lead image from the blog post.

The below image is from my profile after I “Recommended” a blog post:


The green logo is the logo pulled in with the “og:image” meta tag (make sure you make this value the FULL URL to the image!).

The title of the post is linked in blue, and the description meta tag content is the description below the title. The “SEO for 2010 – Easier & Harder!” is the comment I added when I used the “Recommend” link on the post. The commenting feature can be used only if you use XFBML instead of iframes for the Like button, as mentioned earlier in this post.

And that takes care of the meta tags. There are a number of additional social graph meta tags you might want to check out.

Adding the Like Button to your Individual WordPress Posts

The below code includes the call to the JavaScript SDK mentioned earlier and the Like button XFBML code. To add the Like button to each post, you will need to edit the single.php file (wp-content > themes > YOUR THEME > single.php). For our blog’s theme, I put the following code just before the closing tag of the <div class=”postbody entry”> … </div>:


<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:like action='recommend' colorscheme='light'
layout='standard' show_faces='true' width='500'/>


Adding the Like Button to your Individual WordPress Pages

For WordPress Pages, the only difference from the above code is the URL in the <fb:like> tag. Add the Like button to Pages by adding the above code for Posts — but with the below code for <fb:like> tag where the only difference is the PHP code for the “href” value — to the page.php file (wp-content > themes > YOUR THEME > page.php). For our blog’s theme, I put the code just before the closing tag of the <div class=”entry”> … </div>:


<fb:like action='recommend' colorscheme='light'
layout='standard' show_faces='true' width='500'/>


The only thing you need to change in the above code for both posts and pages is YOUR APP ID, to the value you get from your application’s page on the Facebook Developer dashboard, as described earlier.

After saving your changes to the “single.php” file, you should be ready to go.

“Like” or “Recommend”?

For our blog, which contains more how-tos and tutorials than editorial content, I changed the “Like” button to be a “Recommend” button, simply by changing the “action” attribute in the <fb:like> tag from “like” to “recommend”. “Recommend” is also more appropriate when someone wants to share a page on, say an environmental disaster, and clicking “Like” isn’t really appropriate.

I then added, via an iframe, the “Recommendations” social plugin which shows our blog posts that people have recommended via the button, and how many times each post was recommended.

Finally, I added the “Like Box” social plugin which displays a box that displays Fan Page data to select from, including connections (with pictures) and the stream. I just opted for the connections.

If anyone has any more insight into this, please comment….

Facebook Social Plugins Resources

• Otto on WordPress Blog: How to Set Up Your Facebook Connection Application (Excellent!)
• Facebook | Answers to Your Questions on Personalized Web Tools
• Facebook Social Plugins Help Center
• Facebook Open Graph protocol
• Available Social Plugins
• Inside Facebook Reviews Facebook Social Plugins
• Facebook f8 Conference
• Facebook Graph API
• Like Button
• Facebook JavaScript SDK
• Facebook for Web Sites [sic]
• Facebook Platform Showcase
• Create a Facebook Application
• How to Programmatically Administer Off-Facebook Pages with the Open Graph API | Inside Facebook
• More on Open Graph from Inside Facebook
]]> http://www.hyperarts.com/blog/how-to-add-facebook-like-button-social-plugins-to-wordpress-posts/feed/ 113 http://www.hyperarts.com/blog/facebook-fan-pages-content-for-fans-only-static-fbml/ http://www.hyperarts.com/blog/facebook-fan-pages-content-for-fans-only-static-fbml/#comments Tue, 09 Mar 2010 06:26:08 +0000 timware http://www.hyperarts.com/blog/?p=1459 If you want to show content to your fans, and require that a visitor to your Fan Page become a fan in order to view the content, here’s a nice bit of FBML to render content on your Facebook Fan Page only to fans. Easy as pie….

NOTE: It is easy to get confused about whether or not this working when you’re testing. Remember, if you’re an admin of the Fan Page you’re using this FBML in, and you’re logged in, you will see the content whether or not you’re actually a fan of the Page. People get confused about this and think the tags aren’t working.

ALSO NOTE: If you follow the below instructions and it’s not working, try removing the <fb:fbml version=”1.1″> </fb:fbml> tags. I think Facebook may have changed its API.

FINALLY: If you want to copy and paste my code, MAKE SURE you convert all quotes to plain-text (straight up and down) quotes! Otherwise, your code will not work!

Content for Fans Only

First, on your Static FBML page, begin with the following:


<fb:fbml version=”1.1″>


Wrap the content you want to hide from non-fans within these tags:


<fb:visible-to-connection></fb:visible-to-connection>


Then end your page with:


</fb:fbml>


And that’s it! The content contained between <fb:visible-to-connection> and </fb:visible-to-connection> will be visible to fans only.

How to Show Different Content to Fans and non-Fans


<fb:fbml version="1.1">
<fb:visible-to-connection>
Fans will see this content.
<fb:else>Non-fans will see this content.</fb:else>
</fb:visible-to-connection>
</fb:fbml>

Removing the Space above the Non-Fan Content

Many folks complain that before a user becomes a fan, and the “non-fan” content is displayed, the “fans-only” content still takes up the space it would if it were being displayed. To fix this, put paragraph tags (<p> … </p>) around the image or the text for the non-fan content, and set a negative margin on the paragraph tag equal to the height of the fans-only content.

In the example below, the fans-only content is 100px tall:

<fb:else><p style=”margin-top:-100px;”><img src=”[IMAGE URL]“></p></fb:else>

OR

<fb:else><p style=”margin-top:-100px;”>Text content for fans only</p>

If your fans-only image is bigger than your non-fans image, and you find that your image is getting cut off:

Surround the entire <fb:visible-to-connection> … </fb:visible-to-connect> with a <div> tag that includes a style setting the height to the height of the tallest image (600 pixels in the below example):


<div style="height:600px;">
<fb:visible-to-connection>
[content]
</fb:visible-to-connection>
</div>


Troubleshooting

If you aren’t having success implementing this code, it is most likely due to one of the issues described below. PLEASE carefully read this post and the troubleshooting tips below before asking questions via the comments.

• IF YOU SEE BOTH FANS-ONLY & NON-FANS CONTENT: To test whether you’ve implemented this feature correctly, you MUST NOT be logged in as an admin for the page you’re adding this to, or you’ll see both the content for fans and for non-fans. The best way to test is to create a user profile for testing and log in as that user. You can then “Like” the page and “un-Like” the page to test the display of content. To “unlike” a page, click on the Wall tab for the page and at the bottom of the left column you’ll see an “Unlike” link. Click that to unlike the page;
• NO “CURLY” OR “FANCY” FORMATTED QUOTES: Your quotes, whether single or double — and ALL your code — MUST be plain-text. If your quotes aren’t straight up and down, then they’re formatted quotes and should be fixed or your code will NOT work;
• MATCHING QUOTES: Make sure quotes around values are both the same, either single or double, but they have to match!
• HEIGHT SETTINGS: My fix for the extra space above the non-fan content uses an example height. Make sure you set the height value and the “margin-top” negative values for your individual case.
• TEST YOUR URLS: If you can’t access the URL for an image or file directly in your browser, it won’t work in your code. Make sure your URLs are correct;
• URLS must be properly formed: After the domain name (“TLD”), URLs are CASE SENSITIVE. They should also contain NO SPACES or, as mentioned above, no specially formatted characters.

Other Resources

Facebook Developer Wiki – fb:visible-to-connection

]]> http://www.hyperarts.com/blog/facebook-fan-pages-content-for-fans-only-static-fbml/feed/ 63 http://www.hyperarts.com/blog/adding-iframes-to-facebook-application-2010-static-fbml/ http://www.hyperarts.com/blog/adding-iframes-to-facebook-application-2010-static-fbml/#comments Tue, 09 Mar 2010 06:02:18 +0000 timware http://www.hyperarts.com/blog/?p=1419 In early 2010, Facebook made some modifications to the API which made the embedding of iFrames more restricted. Although they are no longer supported in Static FBML tabs, iFrames can still be implemented on application Canvas Pages. However, rather than an iFrame loading automatically — as it previously did on Canvas Pages — a user action — a click — is now required to load the iFrame.

In a PowerPoint that Facebook circulated in late 2009, Facebook explained the upcoming changes:

iFrames
Preserving iFrames (on a custom tab)
If you currently use an iFrame in your page and must preserve the content of one or more of your iFrames: Create a wrapper application that lives on a canvas page. This application can have iFrames since it sits on a canvas page. Have this light weight application include the image of what you want to display, with an “Activate” button. Link the “Activate” button to the canvas page wrapper application. More information here.

And here is that “wrapper application,” written in JavaScript:



<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a>

<div id="outside_location"></div>
<fb:js-string var="link_1">
<fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src="http://URL-TO-OUTSIDE-LOCATION"></fb:iframe>
</fb:js-string>

<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>


There are two flavors of Facebook applications — iFrame and FBML — depending on whether you will render your canvas page in an iFrame or with FBML. Obviously, to embed an iFrame you’ll want to create an “iFrame” application. There are a number of resources on the Web for creating a Facebook application and, actually, it’s really not that hard. Here are several:

• Developing a Facebook App for Absolute Beginners – Emmanuele Feronato
• Facebook Application Basics
• Facebook Developer Wiki – Creating a Platform Application

Once you have created your Facebook iFrame application, you can visit your application page, if you’re logged in to your Facebook account, by going to http://www.facebook.com/developers/apps.php where you will see your application listed in the left column.

Server Requirements for hosting a Facebook Application

• Make sure your Web server supports PHP, preferably PHP5;
• You’ll need FTP access to your server so you can create a directory and add files;
• You need to download the Official Facebook PHP 5 Client Library and upload it to your server (if your server has PHP 5 — if your server has PHP 4 instead of PHP 5, download the older Client Library). Click the “Download Source” button and select either “ZIP” or “TAR” compression option in the popup window:

  

  After unpacking (unzipping) the file, install the folder “src” in a directory you create and name “facebook-platform” (not a required directory name, but a good choice) at the document-root level (eg “httpdocs” or “public_html” or “html” – the name varies) of your server (where the home page file is).

• More info is available on the Facebook Developer Wiki.

In the directory you create on your Web server for the “Canvas Callback URL” for your Facebook iFrame application, you’ll have two files:

• index.php – contains the content that will be rendered in the app;
• appinclude.php – contains some meta info about the app.

For your “index.php” file, you’ll need to render the “wrapper application” referenced above in PHP:


<?php

// File: 'index.php'

require_once 'appinclude.php';

echo '<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let\'s see that iframe....</a>';

echo '<div id="outside_location"></div>';

echo '<fb:js-string var="link_1">';

echo '<iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src="[ABSOLUTE URL TO iFRAME CONTENT]">';

echo '</iframe>';

echo '</fb:js-string>';

echo '<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById("outside_location");
</script>';
?>


For the “appinclude.php”:


<?php
require_once ($_SERVER["DOCUMENT_ROOT"] . '/facebook-platform/src/facebook.php');

// *** Add your Facebook API Key, Secret Key here ***
$appapikey = '[APPLICATION API KEY]';
$appsecret = '[APPLICATION SECRET KEY]';
$facebook = new Facebook($appapikey, $appsecret);
// $user_id = $facebook->require_login();

?>


Regarding the above, replace “[APPLICATION API KEY]” and “[APPLICATION SECRET KEY]” with the ones generated when you create your application, and make sure your have the correct URL to the “facebook.php” file.

The “$user_id” is commented out (with the “//” preceding it) because it will cause the application not to function.

How to Hide the Activation Image or Text After User Clicks

In order to hide the activation image or text once it’s been clicked, you need to add a bit of FBML to the href, the “clicktohide” parameter. See below for how to implement this…


<?php
//
require_once 'appinclude.php';
echo '<div id="iframeLinkDiv"><a clicktohide="iframeLinkDiv" onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;"><img src="ABSOLUTE URL OF IMAGE" border="0" alt="Photobucket" /></a></div>';
echo '<div id="outside_location"></div>';
echo '<fb:js-string var="link_1">';
echo '<iframe height="660px" allowTransparency="true" frameborder="0" scrolling="yes" style="width:760px; border:none" src="ABSOLUTE URL OF IFRAMED PAGE">';
echo '</iframe>';
echo '</fb:js-string>';
echo '<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById("outside_location");
</script>';
?>


External Resources

• Facebook Application Basics
• Facebook Developer Wiki – Creating a Platform Application
• Facebook Developer Wiki – Choosing between an FBML or iFrame Application
• Facebook Developer Wiki – iFrame Applications
• Developing a Facebook App for Absolute Beginners – Emmanuele Feronato
• Tutorial – Bring It On Home

I can only offer very limited support for Facebook app development. But if you post questions here, others may be able to help out.

]]> http://www.hyperarts.com/blog/adding-iframes-to-facebook-application-2010-static-fbml/feed/ 42