Murten

The intro:
Let’s say you do not want to incorporate the whole facebook connect as3 lib (check my excellent copy of an excellent post by Steven Van Hissenhoven) in your flash project but do want people to interact with facebook through your website.

For instance, by posting pictures or generated images from within flash. Totally doable and easy, even! Just use facebooks sharer page!


The (javascript) code:
First you need a javascript function that can trigger the sharer. I always go for a popup, but you can ofcourse open the sharer anyway you want. A fairly easy to understand javascript snippet I made that looks like this should be pumped somewhere in your html:

function facebookme(pictid){
	url = "http://www.your-url-here.com/images/" + pictid;
	title = "Add a picture to facebook!";
	window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(url)+'&t='+encodeURIComponent(title),'sharer','toolbar=0,status=0,width=626,height=436');
}

This function can be addressed out of flash by the External Interface class and expects a pictid, basically the name of the image you want to share on facebook. This can be a generated image or one already on the server. Like I said: the function is pretty simple: it only expects an image and will open a sharer popup that will show you the image and the page title.

Now, let’s assume you want to have a description. A little more tricky, but still quite easy: Facebook has certain meta tags that you can use to populate the sharer. It will automatically pick these things up if they are present in your html page:

<meta name="title" content="Your page title here." />
<meta name="description" content="A description here. Can be quite long even and will appear under the title next to the picture if provided." />
<link rel="image_src" href="thumbnail_image" / >

This works great and could be a nice add-on for your website that on top of that is supereasy to do and requires no facebook connect api knowledge at all. All you need to do now is the flash part which is even more easy!


the (flash) code:

import flash.external.ExternalInterface;
 
ExternalInterface.call("facebookme", picture_path_here);

“facebookme” is the name of our javascript function we placed in the html. “picture_path_here” is a variable that holds something like “2.jpg” (or the full url to the image, but then be sure to change the javascript function!). Also don’t forget to import the ExternalInterface class which can be found in the “external” package.


The outro:
Boom, that’s it. It’s a nice step to loads more posts about facebook and flash even if I say so myself. Now go forth once again, young flash vampires!