• Choose a category
• All
• Classic-Fiction

Some of you may be using slower servers and may have seen a delay between clicking the button and getting your ice cream, thereby ruining the whole instant-gratification angle. It’s generally considered good practice to implement a loading indicator to show that something is happening, but unfortunately Mock Ajax doesn’t have any built-in methods for doing so. Thanks to the contributors to the Facebook Developers Wiki, we have a handy way to do this (see http://wiki.developers.facebook.com/index.php/Mock_ajax). The first thing you’ll need is some type of spinner animation, which you can build for yourself at the excellent http://www.ajaxload.info. Once you have your image and have it saved to your server, update the FBML just shown to include the spinner in the div for ice_cream_image and set it to be hidden by default:

Now update the FBML on the fb:dialog-button so that it shows the spinner when clicked:

type="submit"

value="For Ice Cream!"

clickrewriteurl="http://facebook.cheshoax.com/cookbook/ice_cream_maker.php"

clickrewriteid="ice_cream_image"

clickrewriteform="ice_cream_flavors"

clicktoshow="spinner"/>

As long as the id specified on the image matches the id specified in the clicktoshow parameter for the button, your image should appear as soon as you submit the form. This method is effective because Facebook automatically overwrites the inner HTML of the element you specify in clickrewriteid, thereby overwriting the spinner when the response comes back from your server. If you want to be really sure to display one, add it in to the final echo in the PHP code just shown so that a new spinner image gets returned with the response and is ready for the next time the button is clicked:

echo '

Photo credit: ' . $credit . '

e;"/>';

The one downside to this method is that it will leave your spinner control visible on the page if your Ajax call fails, since Mock Ajax doesn’t provide any kind of callback capability on failure.

Facebook Share Buttons

Problem

I’d like to include a Facebook Share button in my app to encourage my users to share items on their Profile or to send them to friends.

Solution

Use the fb:share-button tag. The simplest form is:

That will give you the standard Share button, shown in Figure 6-57.

Figure 6-57. Facebook Share button

Clicking on the button shows the Share dialog, with a choice between sending a message or posting to your Profile, as shown in Figure 6-58.

Figure 6-58. Share dialog

If your URL includes content and images, your users will have the option of selecting what they would like to include in the message or post.

Discussion

There are two modes (or “classes”) for the Share button: URL and meta. The URL class is easier and can be either an on- or off-Facebook URL, as seen earlier in this recipe. Meta class requires a little more effort on your behalf, but it also gives you more control over what appears in the Share dialog and in the message or Profile post. As an example, let’s say that you wanted to include a Facebook Share button to this great video of my friend Leo Laporte interviewing my friend Kris Krug (of Raincity Studios) on the Lab with Leo show, talking about this shiny new social network called Facebook (which some of you may have heard of). The video can be found on YouTube at http://www.youtube.com/watch?v=2IIHFEvpszU, which we can use to define a meta-based fb:share-button tag: