Categories
Web Development

HTTPS URL Options for Facebook Tabs and App Canvases

Facebook has made several changes to the structure of the application registration form used to define Facebook apps and page tabs over the past couple of days.

This apparently overlaps with the introduction of the “secure browsing” option for Facebook users, which makes it possible to view pages using the https (SSL encrypted) protocol rather than http. The problem there lies with viewing an IFrame that points to unsecured content within a secured page. Most browsers would issue a warning under those circumstances, but the way Facebook deals with it is to not display tabs containing unencrypted content to those browsing in https mode. I first heard of this as an issue from users of my Facebook Tab Manager plugin who could not view their own pages because they were browsing in secure mode.

Now that users of the secure browsing feature have pulled all their hair out, Facebook has followed up by adding Secure Canvas URL and Secure Tab URL options to the app registration form. So provided you have an SSL encryption certificate installed on your server, you can simply specify the https versions of URLs as alternatives, and Facebook will serve those to browsers visiting the https version of the outer Facebook pages.

The example below is from my consulting work for Caspio, which provides both http and https versions of every application created with its cloud database service.

Secure canvas and tab URLs on the app registration form

On the other hand, this is the error message you get if you attempt to designate an https URL for your page tab without actually having an authenticated SSL certificate associated with the web hosting domain. So better to have site visitors see nothing than see this.

ugly error message
You can't fake SSL

The other change Facebook has made at more or less the same time (although I swear these secure URL options weren’t there when I looked yesterday), was to allow you to designate any URL as the location Facebook will pull from for the content of a business page tab.

Previously, Facebook assumed that a tab was somehow subordinate to an accompanying application. Therefore, it used to be that you had to make the canvas url a directory with an ending “/” and the tab URL had to be either a file name or a subdirectory beneath it. Now, you can have the same URL serve for both the tab and canvas versions of your application. It also becomes easier to use a URL using a query string as either a canvas or tab URL.

See: Facebook iFrame App / Page Tab Registration Just Got Easier

Categories
Web Development

Facebook iFrame App / Page Tab Registration Just Got Easier

I don’t see that this has been announced or documented anywhere, but Facebook has made a change that will make it easier to fit a wider variety of apps into the registration form for Facebook apps and Facebook page tabs (particularly tabs).

The short version, for those who have been following the introduction of iFrame support in Facebook page tabs: you no longer have to define as a subdirectory or a file below the directory specified for your canvas URL.

I stumbled across this while writing some documentation for Caspio, the online database company. I’ve been doing a mix of writing, editing, and web consulting for Caspio, and I had recommended they change (or create an alternate version of) the URL addressing for their cloud database product to fit more neatly into the registration form. Now they don’t have to. I had also wrestled with some of the peculiarities of app/tab setup when programming my Facebook Tab Manager plugin for WordPress.

When you register an application with Caspio, they assign a coded URL with a query string that functions as your “application key.” For deployment to a regular website, you copy and paste a JavaScript snippet that has that URL embedded in it, and the JavaScript widget downloads your form or report.

To turn a Caspio app into a Facebook app, you can simply paste the coded URL into the Facebook Developers form. Facebook lets you invoke an app as an HTML iFrame that retrieves content from the address you specify.

However, after Facebook introduced iFrame support for page tabs in February, I found that registering a tab was not so simple.

It turns out Facebook expected you to structure the relationship between an app and a tab something like this:

Canvas (App version) http://howto.caspio.com/facebook/

Tab http://howto.caspio.com/facebook/index.php

The app would then be available at a URL like
http://apps.facebook.com/caspio-demo-apps/

— and you can see the example “Contact Demo” tab at —
http://www.facebook.com/caspioinc/

To produce this example, I had to create PHP files on howto.caspio.com that included the Caspio JavaScript widget.

The problem with trying to use the Direct from Caspio URL was that there is no way to define a “subdirectory” of a URL like
http://b4.caspio.com/dp.asp?AppKey=5F422000i9f9h4e2i7c9g6c9c3

Last time I checked, the form was structured so that I could only specify the subdirectory or file name, not a full url. So if I put something in that blank, the Facebook platform would apparently try to interpret it as something like —

http://b4.caspio.com/dp.asp?AppKey=5F422000i9f9h4e2i7c9g6c9c3/demo

— not a legal URL, and so my page tab wouldn’t work.

But no longer! As of this morning, the form will now allow me to put the same URL in both the App Canvas and Tab URL blanks, and it works.

new app registration
Facebook App/Tab Registration with Query String

 

Categories
Web Development

Public Speaking

Wordcamp Miami 2011

This photo from my speaking gig at WordPress Miami is courtesy of event participant Alex Harris, from his Flickr stream.

Thanks to the members of Club Awesome Toastmasters in Coral Springs for helping prepare me for opportunities like this.

I’m available to speak on technology trends for big businesses, small businesses, and non-profits, on topics including Internet strategy, email marketing, WordPress, social media, and cloud computing.

Categories
Web Development

Prototype ExpressDB for WordPress Plugin

This is a prototype of an unfinished plugin to promote ExpressDB, a simple and inexpensive data capture service offered by Caspio Inc., the cloud database company.

ExpressDB is popular with web designers who aren’t necessarily database or programming experts. It lets you concentrate on designing the form and mapping out the fields of data you want to record. The online service takes care of actually catching the form post, recording whatever data it contains, and optionally sending you an email notification.

For WordPress users, it occurred to me that it would be nice if you could use a shortcode — a placeholder in your post or page content — to specify the form fields, rather than manually coding an HTML form. The plugin would provide some default formatting, but you could modify it within limits. I’m interested in feedback on whether this approach makes sense.

Here is what I have so far:

A sample form
The shortcode setup in WordPress

You list the fields of data you want to collect as parameters within the shortcode tag. For the action tag, you go through a brain-dead simple two or three step process to register a database on ExpressDB, and the service assigns a coded action tag that you can copy and paste, as shown below.

Getting the action tag from the ExpressDB service

I have some other ideas for letting people modify the form styling that I’m still tinkering with. For a lot of people, this could be a really easy way of creating a contact form event registration form.

Update: Getting read to release this, and I’ve added a Settings Screen that lets you set the default styles to be applied to your forms.

The HTML output for a typical form looks like this:

<form name="expressdb" class="expressdb" method="post" action="http://www.expressdb.com/edp/?AppKey=420CEF8044F20484E049B6213F9BCCXXX" enctype="multipart/form-data">
<table>
<tr>
<td colspan="2" class="labelcell"><label for="First_Name">First Name</label></td>
<td colspan="2" class="fieldcell"> <input class="text" type="text" name="First_Name" id="First_Name" tabindex="1" /></td>
</tr>
<tr>
<td colspan="2" class="labelcell"><label for="Last_Name">Last Name</label></td>
<td colspan="2" class="fieldcell"> <input class="text" type="text" name="Last_Name" id="Last_Name" tabindex="2" /></td>
</tr>
<tr>
<td colspan="2" class="labelcell"><label for="Note">Note</label></td>
<td colspan="2" class="fieldcell"><textarea name="Note" id="Note" tabindex="3" ></textarea></td>
</tr>
<tr>
<td colspan="2" class="labelcell"><label>Options</label></td><td colspan="2" class="fieldcell"> <input type="checkbox" name="Option_1" id="Option_1" tabindex="4" /> <label>Option 1</label></p>
<input type="checkbox" name="Option_2" id="Option_2" tabindex="5" /> <label>Option 2</label></td>
</tr>
<tr>
<td colspan="4"><button id="expdbsubmit" type="submit" tabindex="6" />Submit</button></td>
</tr>
</table>
</form>

You can modify the default styles to be applied to selectors like form.expressdb input through the settings screen. Or you can add tweaks on a one-off basis by including a little bit of code as an enclosure within the shortcode like this

[expressdb textarea=”Note”]button.expdbsubmit {color: red}[/expressdb]

Categories
Web Development

ExpressDB Shortcode Test

[expressdb text=”First Name, Last Name” textarea=”Note” checkboxes=”Option 1, Option 2″ action=”http://www.expressdb.com/edp/?AppKey=420CEF8044F20484E049B6213F9BCC4C81C1A127″]
[/expressdb]

Categories
Web Development

Video: How to add a custom tab to your Facebook page

This was created by John Haydon, one of the people who has been giving me feedback on how to improve Facebook Tab Manager, and gives a good overview of the basics of creating content with the plugin.

Categories
Facebook Tab manager Web Development WordPress

Liked/Not Liked Content Support Added to Facebook Tab Manager for WordPress

Facebook Tab Manager 2.3 lets you specify that content should be shown or not shown depending on whether the viewer has Liked the page that your tab is embedded in.

  • Add like=”1″ to the fbtab shortcode if content should only be displayed to people who have liked the page
  • Add like=”0″ to the fbtab shortcode if content should only be displayed to people who have NOT liked the page
  • You can add an explanation in either of these two cases such as message=”You must like this page before this super-special content will be displayed.”

Update April 2011: Added an fblike shortcode as an alternative to fbtab. Takes all the same parameters, including like=”1″ and like=”0″ but I recommend using fblike to wrap around a block of content such as an image that will only be shown to new people who haven’t yet liked your page. Use fbtab if the content wrapped in the shortcode is JavaScript or other fancy coding (background).

Consider this an experimental function and test it before you use it too aggressively.
Note that when you preview the content on your own website, it will be displayed as in the “not liked” mode because it’s not being viewed from within Facebook.

Update: I added a tab to www.facebook.com/carrcomm to illustrate this better. What you will see there is the equivalent of this content, as recorded in the WordPress editor for FB Tab Manager:

Liked/Not Liked content in Facebook Tab Manager

More info: fbtab shortcode, Facebook Tab Manager home page

 

Categories
Facebook Tab manager Marketing and Publicity Web Development WordPress

How to Pull Blog Content Into a Facebook Page Tab

This is a usage example for the Facebook Tab Manager for WordPress plugin, which lets you create and edit content to be displayed on Facebook from within the WordPress editor.

This is the clippings page tab for my work as a tech journalist:

Facebook screenshot - Facebook Tab Manager
Clippings Page Tab

and here is how it was composed in WordPress

Editor screenshot - Facebook Tab Manager
Page Tab Content in the WordPress Editor

This example uses the fbtab shortcode, which allows me to pull in a category from my blog. I could also just pull in the latest posts, or a single post I wanted to feature.

I set the links to open in a new window, because the full posts won’t display properly within the narrow IFrame of my page tab. I have my template set to execute all the normal wp_head actions, one of which is a Twentyten theme action to set the page background image. I then add a little bit of CSS to provide a different background for my #content div and styling for the links (based on the color of Jupiter’s ruddy clouds).

For a finishing touch, I found a free clip art image of a pair of scissors and changed the icon to be displayed next to my tab using the Facebook Developer utility on facebook.com.

After you download the Facebook Tab Manager for WordPress plugin, there’s more documentation on how to register your content on the plugin homepage and this category of my blog. I’ve also tried to make the UI as self-explanatory as I know how.

Categories
Facebook Tab manager Web Development WordPress

Updates to Facebook Tab Manager for WordPress

I continue to update Facebook Tab Manager aggressively, maybe too much so. I really should have called the first version 0.1, as I’ve now put out so many upgrades and fixes that it’s at version 2.1 — less than two weeks after the initial release.

Facebook Tab Manager lets you prepare and edit content to be displayed on Facebook as just another kind of post within the WordPress editor. When you publish your post, Facebook tab manager displays instructions for registering your content in the Facebook Developer application. This is a good way of maximizing the free resources Facebook provides for sharing your applications and marketing messages through the social media service. The content you display on Facebook can include the output of other plugins, using WordPress APIs such as shortcodes and content filters.

You can now create either a simple page tab, or both a tab and a canvas page (you view a tab embedded within a Facebook page for your business or organization, whereas a canvas is viewed, outside the context of a page).

After some futzing around, and feedback from early users of the plugin, I also figured out how to get rid of the scroll bar, and allow the page tab content to resize, for content that exceeds the default IFrame dimension of 800px tall.

2.0

Fixing template.php display for canvas pages

1.9

Correcting tab/canvas setup code.

1.8

  • Added checkbox option to set resize / auto resize for tabs taller than 800 pixels
  • You can now create both a tab and a canvas page for your application.

1.7

  • Added options page for setting defaults, such as filters to ignore and CSS to apply
  • Clarified documentation for how to fill out the Facebook Developers form
  • Flush Rewrite Rules set to run every time on initialization (not supposed to be necessary, according to the documentation, but seems to work better on some configurations)

1.6

Refinements to shortcode function

1.5

Added  Shortcode documented on the Installation section of this document. Makes it easier to integrate blog content and JavaScript widgets such as Facebook plugins.

1.4

  • Added the ability to deactivate content filters when the fbtab template is displayed. This lets you eliminate plugin content modifications that are not appropriate for your Facebook tab.
  • Updated the instructions for configuration on Facebook.

1.1, 1.2, 1.3

Fixes to default styles handling, directory locations

1.0

First public release February 2011

Categories
Clips Forbes.com Web Development

Forbes.com: Best Buy en Español Profits By Serving the Hispanic Market Better

Hispanic customers who shop on the web are giving their time and money to Best Buy in appreciation of its effort to speak their language. Best Buy offers an almost complete duplicate of its main English language website in Spanish at http://espanol.bestbuy.com/enes/.

As a result, Best Buy finds that users of its Spanish language spend twice as much time on the website and also spend twice as much money per visit. “Latinos are giving us credit in being leaders in the e-commerce space in services to them,” says Ana Grace, global web team product manager. As a Latino herself, whose family moved to the mainland U.S. from Puerto Rico when she was a child, Grace is proud of that result. “It’s definitely a passion point for me.”

Continued: http://blogs.forbes.com/davidcarr/2011/02/17/best-buy-en-espanol-profits-by-serving-the-hispanic-market/

Also available in Spanish (translation courtesy of MotionPoint): http://blogs.forbes.com/davidcarr/2011/02/23/best-buy-en-espanol-obtiene-beneficios-al-atender-mejor-al-mercado-hispano/