Saturday, January 31, 2009

Using the Share-button to post multimedia (audio, video and flash) in FBML

I have been frustrated in trying to find out how to add multimedia using the share button. The FBML fb:share-button documentation (http://wiki.developers.facebook.com/index.php/Fb:share-button) provides an example of sharing video, but does not give all of the meta information that you can use if you want to share other media types -- they just link to another page which hides the info -- and it is only revealed if you click on the rather innocuous link: "How do I make sure the Share Preview works?". arghhh...

I had gone to that page numerous times and it was only in desperation I discovered it. Anyway, here is the "hidden" info:

Multimedia Tags

The ideal way for you to connect video and media files to the share link is to make the URL in the link point to an html page that contains the <meta>/<link> tags described above (title, description, image_src) along with some additional <meta>/<link> tags:

Audio (required)

<meta name="title" content="page_title">
<meta name="description" content="audio_description">
<link rel="image_src" href="audio_image_src_url">
<link rel="audio_src" href="audio_src_url">
<meta name="audio_type" content="Content-Type header field">

Audio (optional)

<meta name="audio_title" content="audio_title (eg. song name)">
<meta name="audio_artist" content="audio_artist_name">
<meta name="audio_album" content="audio_album_name">


Video* (required)

<meta name="title" content="video_title">
<meta name="description" content="video_description">
<link rel="image_src" href="video_screenshot_image_src_url">
<link rel="video_src" href="video_src_url">*
<meta name="video_height" content="video_height">
<meta name="video_width" content="video_width">
<meta name="video_type" content="Content-Type header field">

Video (example)

Here is an example Flash Video embed:

<embed src="http://www.example.com/player.swf" flashvars="video_id=123456789" type="application/x-shockwave-flash" width="300" height="200"></embed>

For that video, the appropriate metadata would look like this:

<link rel="video_src" href="http://www.example.com/player.swf?video_id=123456789">
<meta name="video_height" content="200">
<meta name="video_width" content="300">
<meta name="video_type" content="application/x-shockwave-flash"><meta name="video_type" content="application/x-shockwave-flash">

Friday, January 30, 2009

Beware of Facebook documentation and blogs

After working on a Facebook app for some time now I have finally come to the conclusion that you can't trust either the documentation or blog posts on how to make something work. It appears that Facebook changes the way things work on a regular basis -- and don't document them very well -- thus breaking your code or making those easy tutorials you found from last year completely useless. Perfect case in point is how to create infinite sessions :(

Tuesday, January 27, 2009

Facebook-updating a profile box using a cron and using an "infinite session"

I have a profile box that was created for a Facebook app -- one for a narrow page (when the box appears on the left side of your profile page) and the other for the boxes tab. The box displays the most recent blog post and a randomly selected video -- so it needs to be updated every day. The content is the same for everyone so there was no need to grab the users id and loop through a record set and update each one individually.

Anyway, I looked all over to find out how to do this and didn't seem to get any clear answers. The problem was how to run a cron when the server can't log you into Facebook to rebuild the profile pages. This required creating an infinite session -- but Facebook has changed how you do this in the past year and there are many blog posts that contradict each other on it.

After several failed attempts (the cron would work for a day and then fail), I found this recent blog post: http://www.emcro.com/blog/2009/01/facebook-infinite-session-keys-no-more/

I followed his instructions on getting an infinite session and now this is how it now looks:

$appapikey = 'app api key';
$appsecret = 'app secret key';
$infiniteSessionkey = 'app session key';
$facebook = new Facebook($appapikey, $appsecret);
$userid = your userid;

// log into facebook using the userid and infinite session key
$facebook->api_client->user = $userid;
$facebook->api_client->session_key = $facebook_infinite_session_key;
$facebook->api_client->expires = 0;

// how that you're logged in you can call fbml_refreshRefUrl() to reset the contents
$facebook->api_client->fbml_refreshRefUrl("http://www.youyrsite.com/facebook/profile-narrow.php");

You can then just run a cron on your server that calls the page periodically to refresh the profile box:
/usr/bin/wget -O - -q -t 1 http://www.mysiteurl.com/facebook/refresh-profile-apps.php

UPDATE (Feb 3, 2009): It appears that I made it work by pure accident. If you notice the code above (which I had copied and pasted) I set the session_key to be equal to a non-existent variable:

$facebook->api_client->session_key = $facebook_infinite_session_key;

So the session key was being set to nothing. When I changed it to use the infinite session key I went through all the trouble of getting, it said that the session had expired. In fact if you comment out the line entirely it still works. I'm thinking that the trick is the following line that sets the expires to 0:

$facebook->api_client->expires = 0;

I'll have to experiment a bit more with this since its likely Facebook will plug this hole up sooner or later.

Also, a recent comment from a Facebook employee to the blog mentioned above links to a number of docs that were posted to the Facebook Developer blog that deal with what used to be called "infinite sessions" but are now "offline access":

*************************

http://developers.facebook.com/news.php?blog=1&story=116
http://developers.facebook.com/news.php?blog=1&story=130
http://developers.facebook.com/news.php?blog=1&story=132
http://developers.facebook.com/news.php?blog=1&story=135

The initial doc for it (mentioned in those posts):
http://wiki.developers.facebook.com/index.php/New_Design_Platform_Changes#Changes_to_Session_Keys

A FAQ about changes to authentication:
http://wiki.developers.facebook.com/index.php/New_Design_User_Login
http://wiki.developers.facebook.com/index.php/Authorizing_Applications

The easy way to get an “infinite session” is to prompt your users for offline access, as described here (and again, announced in those blog posts):
http://wiki.developers.facebook.com/index.php/Extended_permissions

*************************

Unfortunately, no one updated the official docs when they made these changes, so searching for "infinite sessions" in the Wiki brings up none of this new info...

Saturday, January 24, 2009

Wednesday, January 14, 2009

Nice flex video player

Setting up a video display in Flex is easy but there is no prebuilt controller (not sure why that is...). Anyway, here was a good one for free:

http://www.fxcomponents.com/flex-video-player/

Update (jan 23 2009) this is not consistent scrubber -- as longer videos don't scrub properly...

Expand Flex tree by clicking row

This is cool, useful and easy. It allows the user to opne a tree branch by clicking anywhere in the parent row (not just the arrow icon):

import mx.events.ListEvent;

private function tree_itemClick(evt:ListEvent):void {
var item:Object = Tree(evt.currentTarget).selectedItem;
if (mytree.dataDescriptor.isBranch(item)) {
mytree.expandItem(item, !mytree.isItemOpen(item), true);
}
}

...
itemClick="tree_itemClick(event);" />