$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=[[your api key]]&photoset_id=[[your photoset id]]&format=json&jsoncallback=?",
	function(data) {
		console.log(data);
                //prints the data object to the console in a web developer tool like firebug
	);
});

First you will need to obtain an api key which you can apply for here. With your key you can start making calls to the api. In the example above I make a rest request for the contents of a photoset.

I use jQuery’s getJSON method to make the ajax call. This method allows us to communicate with Flickr’s third party domain and automatically captures the json response we have requested. Let’s take a closer look at the URL for the request:

http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=[[your api key]]&photoset_id=[[your photoset id]]&format=json&jsoncallback=?

1. flickr.photosets.getPhotos: This is the api method we are requesting, additional methods can be found in flickr’s api documentation. With this particular method I am requesting the contents of a specific photoset.
2. api key: Change this to your api key.
3. photoset ID: Change this to the ID of the photoset you want the contents of. To find a photoset ID look at the url when browsing photosets on flickr. When using other api methods you will need to pass different attributes and values in this part of the url.

The resulting ‘data’ variable contains the json object returned by the ajax request. In this example I am printing the object to the console so I can see what variables are available to me. To learn more about the using the console check out my previous post. Provided you have experience with javascript objects you can continue developing your web application using this json data.

An important aspect of any programming language is the ability to debug problems that arise during the development process. A popular way to debug problems in any language is to print messages that describe what is happening in a certain troublesome part of your code. You could print the value of a variable after a calculation is made for example.

For many years my primary way of printing these insightful messages was using a standard js alert. It got the job done but has several drawbacks including: disabling all interaction with the browser until the message is dismissed, only capable of printing strings, detrimental user experience if visible to end-users, and potentially hazardous if placed in an infinite loop.

Luckily there is a much more elegant way to achieve this functionality if you’re debugging your front-end code with the Firebug extension for Firefox (as well as other web developer tools such as those built into some webkit browsers like Chrome). Take the following code:

var myVariable = "Hello World!";
console.log(myVariable);

The variable you passed via console.log should appear in the console panel of Firebug:

This method overcomes many of the drawbacks of using alerts. These messages are not seen by end-users, they don’t cripple the page by interrupting the execution of your script, and they can print complex variables like arrays and objects. Here is an example of using console.log with a json object:

var desserts = [
  {
    "type": "pies",
    "items": [
      "pumpkin", "apple", "cherry", "pecan", "lemon meringue"
    ]
  },
  {
    "type": "cakes", "items":
    [
      "red velvet", "chocolate", "carrot"
    ]
  }
];
console.log(desserts);

If you were to alert this variable the string returned would only tell you what type of variable it is. The console panel will give you a full representation of the contents of the variable.

For complex variables like this one you can click on a specific portion of the element to explore it’s values in the DOM panel.

Despite the advantages, there are some caveats to this method as well. It only works with Firebug so it doesn’t help when troubleshooting browser specific issues. It also has the potential to cause js errors in specific browsers like IE so be sure to remove your debug code before deploying your code. When used responsibly console.log can prove to be quite powerful for debugging scripts.

Static FBML 1
Static FBML 2
Static FBML 3
Static FBML 4
Static FBML 5
Static FBML 6
Static FBML 7
Static FBML 8
Static FBML 9
Static FBML 10

Technically this method of creating custom content on Facebook Pages is no longer supported, but if you’re in a pinch and looking for a way to get this familiar app to work these links should do the trick.

To learn more about why this app is being phased out and the “right” way to create custom content on the new Facebook Pages check out their blog post on the new iframe Tabs. I’ll cover methods for creating simple promotions on Facebook pages in an upcoming post.