Tutorial: Custom video player in Facebook streams

Facebook and the Open Graph Protocol allows you to define special meta data on your web pages that defines them in Facebook’s social graph. In this post i’ll show you how to set up the meta tags required for you to embed your custom video player, styled exactly like you want it, in Facebook streams. Pretty cool, huh?

This method will also allow you to have HTML5 fallback for iPhone, iPad etc. which will even work inside the Facebook iPhone app – My example is set up with HTML5 fallback that shows that functionality as well.

Step 1 – Request to have your domain white listed

Facebook don’t trust your domain’s flash(.swf) files by default, so you need to send a request through this form first. This process will take up to a week.

Step 2 – Prepare your flash video player

There are two ways you can go here: Either set up your video player to accept a flashvar with the URL to the video file, or hard code the URL into the source code of the flash player, so that it keeps track of it internally. Naturally, going with flashvars is much more dynamic, as you can use the same video player with different video’s if you have more than one on your website. In my example i’ve used the flashvar “url” to supply the video file URL. Learn how to use flashvars in this video tutorial by Lee Brimelow.

Step 3 – Set up the necessary meta tags in your web page

I’ve put up an example at http://ahrengot.com/playground/circular-scrubbing that has the correct meta tags. If you post the URL to Facebook you’ll see the player embeds correctly. You can view the source and look out for the open graph tags. In my example they are as follows:

The tags are quite self-explanatory, but if you need any help, refer to the documentation.

You’re done!

That’s it – If this was of any help to you, or you have any questions, I’d really appreciate your feedback in the comments. Oh, and if you like the video player in my example it’s available on Envato marketplaces: Video player with circular scrubbing.

Share this post:

Like this:

KONKREET PERFORMER is Redefining music apps

“Konkreet Performer is a music control and performance instrument for the iPad. Its unique and intuitive multi-touch interface reconnects the musician’s actions directly with the music. Use PERFORMER to play your Synth, operate your DAW, or anything that receives OSC or MIDI. Re-explore your favorite music software tools with a whole new way to search, find and perform your sound.”

Share this post:

Like this:

Google Art Project takes Street View into museums

As you’ll see in the video above, Google’s latest project is a cool new discovery tool for art lovers, which enable you to explore the worlds museums in an almost virtual reality kind-of-way.

Google captured the museums using their street view technology, so the navigation is exactly like you’re used to. Google Art Project also features some “Super high-resolution images” of the most famous paintings. These high-res photos will allow you to see the paintings in even more detail than you can with the naked eye.

Like this:

Getting the RSS feed for a Facebook page

Every Facebook page has an RSS feed. You can subscribe to that feed with your RSS reader. You can also embed it or build applications that utilize it and everything else you can do with an RSS feed . The only thing is, finding the URL of the feed can be difficult, so i decided to help a little and write this guide.

Note: If you’re not interested in the URL of the feed but just want it imported in Google Reader, FeedBurner or Firefox simply skip step 1-3.

Step 1 – Getting your page id

Everything on Facebook from users to photos to events has a numeric id. This id is used internally by Facebook to identify different stuff in its enormous database when users request it. So when you request the RSS feed from a page, you’ll need to send the id of the page along with your request. That’s why the first thing you need to do is to find the id of your page. It’s pretty simple.

Like this:

Adobe Project ROME

Welcome to Project ROME – a new software offering by Adobe. The free software preview, available for a limited time, lets virtually anyone create and deliver stand-out print designs, digital documents, presentations and websites using its simple all-in-one content creation and publishing environment. We hope you’ll give Project ROME a test drive, share your thoughts with us, and ultimately, help shape new features and functionality.

This new Air app from Adobe is pretty impressive in the sense that it must have taken a lot of time to build and plan, but honestly, it feels like there are already better tools out there for doing that kind of stuff. I mean, if you want to make presentations, Keynote works a lot faster, smoother and … well … better, and if you want to do cool, customized interactive presentations there’s just no way around it, you gotta learn some HTML/JavaScript/Flash etc.

So, this is supposed to be the next big thing, right? That’s not really news. A lot of websites have organized their content with tags, vocabularies and categories for a long time, but what’s interesting is that we’re really starting to use all this data now, and in some really creative ways as well.

One example is the way some new mobile devices are organizing your contacts and photos. Tagged content like Facebook status updates, tweets, Flickr galleries and so forth is automatically interpreted/identified as relevant and added and to your contacts. All of this is naturally kept up to date and in sync automatically.

The video below is a short documentary explaining all of this in plain english.

Minimalistic 3D image browser (XML based)

Minimalistic XML driven image browser using Papervision3D as the 3D engine rather than that of Flash Player 10(Which can be buggy, isn’t true 3D, reduces quality etc.).

This means that this file also works with Flash CS3 and Flash player 9

No buttons and no preloaders. I cut everything but the bare minimals away to leave you with a minimalistic, clean and very flexible little swf file. It’s built on full object oriented AS3 following best practises for easy implementation in your own flash projects, but is of course just as easy to use as a stand-alone file.

Through the XML you can change the following settings:
# Width and height of the images(yes, you can actually do resizing without having to recomplile the swf.
# Duration of the flip animation
# Amount to sink back in z-space while flipping
# wobble along the x-axis while flipping

The powerful Tweensy engine is used for tweening.

I’m happy to answer any questions you may have :)

* Tweensy and Papervision3D are both free and licensed under the MIT license. All necessary files are, of course, included.