Creating gallery for displaying Flash content inside Facebox

Recently I had to display a gallery of flash movies. I used to do that by loading an url from within the facebox which turned out to be extremely slow. That’s why decided to preload the content and just pass it to the flash on-demand.
In the original app the flash pulled json data from javascript array but for the purpose of the tutorial I’ll try to make it as simple as possible and will just use YouTube videos.

  1. What are we going to use
    • jQuery – I doubt you can find may sites these days not using this great library. It is also a requirement for facebox
    • swfobject – a library for easy embedding of flash content
    • facebox – a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages

    Read the rest of this entry »

1 Comment

Posted by on 15 Feb 2012 in 31DBBB, JavaScript


Tags: , , , ,


Today I found an interesting read: 31 Days to Build a Better Blog. It’s not that I ever wanted to be a serious blogger but I’ve always liked challenges and self-improvement. For this reason I’m going to give it a shot and see how it ends. 🙂

Let’s hope I finish it 😛

Day1: Blog title and slogan changed. Also added the About page
Day2: That was really hard 🙂 Creating gallery for displaying Flash content inside Facebox
Day3: Quite a fun with that one. Promoting on social networks was not that hard. For now I’ll stick to it. Later on if I find an opportunity will try to promote with other bloggers.

Leave a comment

Posted by on 13 Feb 2012 in General


Tags: , ,

Vertical align of Facebox inside Facebook apps

It might not be the best way but at least it works 🙂

Find line 113 in facebox.js:

    top:    getPageScroll()[1] + (getPageHeight() / 10),
    left:    $(window).width() / 2 - ($('#facebox .popup').outerWidth() / 2)

and delete it.

Into your page code add:

$(document).bind("loading.facebox", function() {
  if(typeof(FB) !== "undefined") {
      function(info) {
        $("#facebox").css("top", (Math.floor((info.clientHeight) / 2) + info.scrollTop)-350).css("left", 17).show();

The idea is to overwrite the default facebox behaviour and prevent flickering. Those 350 and 17 values can be overwritten with your settings.

1 Comment

Posted by on 03 Feb 2012 in Facebook, JavaScript


Tags: , , , ,

Publishing streams on friends’ walls in Facebook

One of the frequent functionalities of the Facebook applications is the possibility of posting streams on friends’ walls. This is accomplished very easy thanks to the PHP SDK 3.0 framework of Facebook.

This article expects that the SDK is installed and included.

The first thing to do is create the application instance.

$facebook = new Facebook(array(
   'appId'  => FB_APP_ID,
   'secret' => FB_APP_SECRET,
   'cookie' => true,

You will have to request extended permissions for posting on the wall by setting 'scope' => 'publish_stream' in the authorization link.

If you don’t know how to do it I suggest to read the “Authorizing a Facebook application” article first.

Using FQL the friends list of the user:

   $fql = "select name,username,pic_square,uid from user where uid in (select uid1 from friend
           where uid2=" . $user.") order by name";
   $param  =   array(
      'method'    => 'fql.query',
      'query'     => $fql,
      'callback'  => ''
   $friend_list   =   $facebook->api($param);
catch(Exception $o){
   error_log ($o);

Once we have the list we’re only a loop away from sending the stream to the friends:

$attachment =  array
  'message' => 'The message from the user - probably a submitted <textarea>',
  'name' => 'Name of the link',
  'caption' => 'Caption',
  'link' => 'the url to your application or whatever you wish',
  'description' => 'our description',
  'picture' => 'url of the image preview - required for flash',
  'type' => 'flash',
  'source' => 'the url to the flash file',

foreach ($friend_list as $friend){
   try {
   $statusUpdate = $facebook->api('/'.$friend.'/feed', 'post', $attachment);
   catch (FacebookApiException $e) {
The published stream

Example of publishing stream on a friend's wall

It’s worth a notice that there are several types of media which you can send. They are specified in the ‘type’ parameter and can include link, video, music.

For a full reference of all the POST parameters check the official documentation which might not be that great but’s still better than nothing. 🙂

Happy streaming!

Leave a comment

Posted by on 17 Jun 2011 in Facebook


Tags: , , , , ,

%d bloggers like this: