Solving Problems Subscribing to Facebook Real-time Updates

Facebook’s Real-time Updates documentation is not very explicit on how to subscribe to a feed, especially when all I am looking for is an example. So after figuring out what OAuthException (#15) "This method must be called with an app access_token" was trying to tell me and fixing the problem, I figured I would share my PHP example here. Hopefully, it will be helpful to you.*There are two parts that you need to set up:

  1. Setup an endpoint for the subscription
  2. Post to Facebook and tell them you are subscribing
    1. Get an access_token
    2. POST to Facebook with cURL

1. Setup an Endpoint

This part is actually pretty easy because Facebook actually gives you example code (yay!). Put that file on a web server somewhere with an external ip so that Facebook can reach it. Replace 'abc' in define('VERIFY_TOKEN', 'abc');. Save this value for later.

2. Post to Facebook

Now comes the part that is not well documented. In order to subscribe you need to first specifically get an access_token, then POST to Facebook.

A. Get an access_token

$app_id = APP_ID;
$secret = APPLICATION_SECRET;
$token_url =    "https://graph.facebook.com/oauth/access_token?" .
        "client_id=" . $app_id .
        "&client_secret=" . $secret .
        "&grant_type=client_credentials";
$response = @file_get_contents($token_url);
$params = null;
parse_str($response, $params);

B. POST to Facebook with cURL

Remember when we defined the VERIFY_TOKEN earlier? Replace VERIFY_TOKEN with that value in this code, and ENDPOINT_URLwith the url of the file from part 1.

$base_url = "https://graph.facebook.com/$app_id/subscriptions";
$url = $base_url . "?access_token=" . $params['access_token'];
$fields_string = '';
$fields = array(
            'callback_url=ENDPOINT_URL',
            'object=user',
            'verify_token=VERIFY_TOKEN',
            'fields=feed'
        );
$fields_string = implode("&", $fields);
//open connection
$ch = curl_init();
//set the url, number of POST vars, POST data
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_POST,count($fields));
curl_setopt($ch,CURLOPT_POSTFIELDS,$fields_string);
//execute post
$result = curl_exec($ch);
//close connection
curl_close($ch);

Once you visit this page successfully, Facebook will call the callback_url defined, verify that the VERIFY_TOKEN in both parts match, and then start sending Real-time Updates to your endpoint.

That was easy.

*By the time you find this post and need help, you can either learn from my example code or, more likely, bang your head against a wall once you realize Facebook has changed its API once again.

Building the Hancock Tower in CSS

Hancock Tower built using CCS3 transforms

CSS Hancock Tower Demo

Still feeling inspired by Building a CSS City, I recreated another Boston building using CSS transforms this weekend: the Hancock Tower. This one was a bit tougher than building the Prudential Tower because it is more than just a few different size boxes stacked on top of each other.

Creating the main body of the building wasn’t too hard, except for the inset parts on the thin sides. The base, on the other hand, was a pretty big pain. Fitting the sides together and sizing a top was a bit of a struggle (and probably mostly unnecessary because no one really notices that part of the building), but I think it turned out pretty well. The roof of the base flickers when spinning around the back of the building in Chrome for some reason, but appears perfectly in Safari.

After getting the building shape together I added the glass window texture and the darker row on the top of the building. Also, I think the coolest part of the Hancock Tower is how it reflects whatever is around it, so I added a cloud photo that rotates as the building moves around.

Originally I though there would be way less DOM elements on this model, but it turned out to be around the same as the Prudential Tower because of all the details:

<div class="wrapper">
            <div class="block floors">
                <div class="side1">
                    <div class="inset left"></div>
                    <div class="inset left-center"></div>
                    <div class="inset right-center"></div>
                    <div class="inset right"></div>
                </div>
                <div class="side2">
                    <div class="inset left"></div>
                    <div class="inset left-center"></div>
                    <div class="inset right-center"></div>
                    <div class="inset right"></div>
                </div>
                <div class="side3">
                    <div class="windows"></div>
                </div>
                <div class="side4">
                    <div class="windows"></div>
                </div>
                <div class="top"></div>
            </div>
            <div class="block base">
                <div class="side1">
                    <div class="inset left"></div>
                    <div class="inset left-center"></div>
                    <div class="inset right-center"></div>
                    <div class="inset right"></div>
                </div>
                <div class="side2">
                    <div class="inset left"></div>
                    <div class="inset left-center"></div>
                    <div class="inset right-center"></div>
                    <div class="inset right"></div>
                </div>
                <div class="side3"></div>
                <div class="side4"></div>
                <div class="top"></div>
            </div>
        </div>

Take a look at the Hancock Tower demo in a webkit browser (Safari looks better than Chrome if you have the option).

Building the Prudential Tower in CSS

CSS Prudential Tower Demo

Last week I saw an awesome post by Matteo Spinelli on Building a CSS City and loved the idea. Since I am somewhat obsessed with trying to build things with 3D transforms (even though they are very impractical at this point), I decided to attempt the Prudential Center. The concept was basically the same as his, except instead of building out I am building up.

The tower is built of 4 blocks stacked on top of each other: the spire, hub, neck and floors. Each block is essentially a cube of a certain size positioned using CSS Transforms and skinned with a texture. The proportions of the building are not quite right, but I couldn’t find them anywhere easily enough.

The markup is pretty simple:

<div class="block spire">
    <div class="side1"></div>
    <div class="side2"></div>
    <div class="side3"></div>
    <div class="side4"></div>
    <div class="top"></div>
</div>
<div class="block hub">
    <div class="side1"></div>
    <div class="side2"></div>
    <div class="side3"></div>
    <div class="side4"></div>
    <div class="top"></div>
    <div class="bottom"></div>
</div>
<div class="block neck">
    <div class="side1"></div>
    <div class="side2"></div>
    <div class="side3"></div>
    <div class="side4"></div>
</div>
<div class="block floors">
    <div class="side1"></div>
    <div class="side2"></div>
    <div class="side3"></div>
    <div class="side4"></div>
    <div class="top"></div>
</div>

And CSS for the main section of the building:

.block {
    margin: 0 auto;
    width:100px;
    height:500px;
    -webkit-transform-style:preserve-3d;
}
.block div {
    position:absolute;
    width:100px;
    height:500px;
    background: url('images/pru-side.jpg');
}
.floors .top {
    height: 100px;
}
.side1 {
    -webkit-transform:rotateY(90deg) translate3d(-100px,0,100px);
    -webkit-transform-origin:0 100% 0;
}
.side2 {
    -webkit-transform:rotateY(-90deg);
    -webkit-transform-origin:0 0 0;
}
.side3 {
    -webkit-transform:translate3d(0,0,100px);
}
.side4 {
    -webkit-transform: rotateY(180deg);
}
.top {
    -webkit-transform:rotateX(90deg) ;
    -webkit-transform-origin:100% 0;
}
.bottom {
    -webkit-transform: rotateX(90deg) rotateZ(90deg);
    -webkit-transform-origin:0 100%;
}

The other sections use similar transforms, just with different sizes and offsets to align them in the center. Take a look at the Final Demo in any webkit browser.

Revisiting the jQuery UI Time Slider

Last year I wrote a post on how to use the jQuery UI slider widget for time ranges. I got emailed a question about it two weeks ago and looking back at the code, I realized there were many things that could be done much better. So I decided to rewrite the code as a jQuery UI plugin wrapping the slider widget and put it on GitHub.

Hopefully the code is now cleaner, more efficient, and easier to understand. You can see the demo here

Slideshow with CSS 3D Transforms Part 2: Playing with Shapes


Cylinder Shaped 3D transform

So there were a couple of issues in Part 1:

1) I was using ‘class’ as an element in the options object and threw an error in Safari.

2) The rest of the page besides the gallery looked really uninteresting.

3) A ring is the only shape that we could make.

Luckily, since then I have fixed all of those things plus added a couple more improvements. Obviously it is nice that this will work for people with Safari and the page is not as terrible looking, but the most interesting part is the new shapes.

Continue reading

Creating a Slideshow using CSS3 3D Transforms

3D Slideshow using CSS3 Transforms

This weekend I was creating a couple fun ideas with Zoomooz.js, an awesome jQuery plugin for zooming to elements on a page, and was bummed to see that it couldn’t handle 3D transforms yet. After seeing Paul Hayes  3D Sphere and the Morphing Power Cubes, I spent a bunch of time playing around with 3D CSS transforms without coming up with anything too practical. But, after some of my Zoomooz experiments, I thought it would be interesting to see if it would be possible to create a scalable 3D slideshow in the model of the Morphing Power Cubes’ ring setup. Unfortunately this only works in webkit browsers because that is the only one that has 3D transform support as of this moment, so I am using Modernizr to test if your browser can preform the 3D Transforms.

Continue reading

Anything you can do, Google does better

Google does a lot of things better than I can. It always knows the best way between two points while I often get lost, it can do unit conversions on the fly while I’m stuck looking for the other side of the measuring cup, and of course it can find pretty much anything as long as you know how to ask. One of the last things I have going for me is the ability to see and process information on the fly. Luckily I can sit on the bus, look at a newspaper and figure out this Sudoku puzzle using just my eyes, my brain and a pen. Oh, Google does that better than I do now too? Great.

Continue reading

Capstone Project

I haven’t had a chance to write about my Senior Capstone project, Numbers Empower, since it finished two weeks ago because I have been busy trying to finish up with the rest of school. However, I wanted to mention that today our project was featured on the front page of Northeastern’s website in the article “As green as you want to be”. Thanks to Greg St.Martin for writing the great article.

If you are interested in learning more about the project, visit our website http://NumbersEmpower.com for more details.