Adventures in Facebook’s SDK

Recently I undertook a project for that involved integrating with Facebook. The goal was simple, instead of focusing all our efforts on posting social media (which we still should, but irrelevant), have the players post for us!

This way we can not only get more word of mouth out there, the players get incentives to do so! (Important note, I looked it up in the FB policy page, and our method of incentive is not breaking the rules, take that haters!)

The first step was learning how Facebook interacts with your website. You don’t need much, a basic app and and API key (generated via the developer tools). Basic features like sharing a page, liking a page, etc are built in capable so long as your app doesn’t abuse #them #with #hashtags #and #urls that the user didn’t post.

So my goal was a custom story. This is not a basic thing, you need to get facebook’s approval before you can actually post to an accounts Timeline. Naturally, the first step, is simply log them in. Simple!

window.fbAsyncInit = function() {
        appId : '[YOUR API KEY HERE]',
        xfbml : true,
        version : 'v2.6'
(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); = id;
    js.src = "//";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

That there is simple scripts generated by Facebook’s Graph API to get the version, and inject the script into your page, exposing the `FB` object.

From there, you need a login!

FB.login(function(response) {
    //handle response callback

Wallah! There are additional methods provided by the library which allow you to quickly check for commonly needed requests: Is the user logged in? Has the user already shared this “story”?

Now onto the fun part! Using the graph api. It’s pretty straight forward, first, make an Action. This is the verb used when you see a story “Jordan has –>completed a quest at!” Completed is our verb, and quest is our noun.

Via the graph API tools you associate a verb to a noun, and create a story linking them together. You set the past tense, current tense, multiple action tense, etc in the same page.

Once you have that done, how in the hell do you post a story from your website? I had a hard time figuring this out, between the meta tag properties, and action vs object posting, but I got it boiled down to this snipped (wrapped inside the login function shown above!)

    'me/my-fb-app:object', //post to the object, NOT the action!
    { "quest": {
        'og:title': 'title of the custom story',
        'og:type': 'my-fb-app:quest', //object type!
        'og:image': 'image you wish to have shown on the story', //does not like whitespace! replace with %20 entity
        'og:description': desc,
        'fb:app_id': 'your fb app id here'
    function(response) {
        //post the response id to your server so you can do custom tracking!
        if (!response.error) {
                type: "POST",
                 url: "<?php echo $_SERVER['PHP_SELF']; ?>",
                data: { shareStory : }
            }).done(function(data) {

And there you go. With a little bit of tweaking, and some server code to handle the XHR post, you can post a customized story to a followers timeline (WITH PERMISSION!!!!), and get live statistics of likes, shares, comments, etc. Please follow FB policy when tracking, don’t be a dick. Respect your clientele 😀

Thank you PhantasyRPG for allowing me to post some source code on the topic!


A Lesson Learned

I had a good experience today I’d like to share. As previously mentioned, I was struggling to find a new thing to do outside of my personal development hobbies. Something I could put on a resume and be proud about. Not to say I’m not proud of SourceUndead and PhantasyRPG development, but something else.

I participated in my first hack-a-thon today, dealing with the task of creating the best website revamp. It sounds like a way for a company to get work done, but let’s be honest. They feed you, they have alcohol, and it’s a great way to connect with other developers in the area.

I had a blast! It was a great experience, and I feel like I stepped up and led the team well. Thanks to work, it felt natural. I also presented our final design, and even though the claps may have been obligated, they felt genuine and it felt good to present something after 4 hard hours of work.

The company on the other hand, learned the hard way to get a development server going the next time they host something like this, because we collectively blew up their website. I spent a good 2 hours helping the CEO recover, which involved restoring a snapshot, enabling a database backup (assisting his go-to man because I knew HOW to fix it, I just didn’t have the access).

So not only did I walk away with some money, I also walked away with respect, and the ability to walk in, dazzle some very high end players. I am very much looking forward to my next event, though I hope it involves more code and less design next time. All and all, it was a great event and I’m very grateful for the invitation.

Async/Await Multiple Promise Functions

A few weeks ago I came across a situation in NodeJS that I was new to; asynchronous promises. My goal was to avoid the anti-pattern of nesting “then()”s.

So after a long chat in the Stack Chats about it, I was convinced to use babel to transpile an ES7 feature “async/await”. Promises are terrifying at first — I still have trouble understanding them! Add in an asynchronous nature of NodeJS and a quick loading Redis server? It’s overwhelming at first.

It started when I realized that a part of my game wasn’t working (the waiting room in the lobby), because the method was moving on before Redis was done iterating my key list. Typical async issues.

Then I ran into the promise-anti pattern, which drove me nuts.

let keysAsync = Promise.promisify(client.keys, {context: client});
let smembersAsync = Promise.promisify(client.smembers, {context: client});
keysAsync("*game*").then(reply => { => {
        smembersAsync(game).then(players => {
            response[game] = players.length;
        console.log("after game");
}).then(() => {
    console.log("keys then");

The issue here is that I wasn’t returning the promise, I was handling it inside of another “then” function. So I went into the chats, and got some great advice from Madara Uchiha about using an async defined function.

So after npm installing babel and adding the proper ES2015 presets, he showed me this:

let keysAsync = Promise.promisify(client.keys, {context: client});
let smembersAsync = Promise.promisify(client.smembers, {context: client});
let hgetallAsync = Promise.promisify(client.hgetall, {context: client});
//define async function
async function getOpenLobbies() {
    //await responses from async redis keys method
    const games = await keysAsync("*game*");
    //await response from mapped smembers method
    const players = await Promise.all( => smembersAsync(game)));
    const metakey = await keysAsync("*metadata*");
    const data = await Promise.all( => hgetallAsync(meta)));
    //compile results of awaited methods into object to return
    const combined =, i) => ({
        players: players[i],
        meta: data.filter(d => === game.replace("game-",""))[0]
    return combined.filter(game => game.players.length);
getOpenLobbies().then(data => res.send(data));

Now, while this code looks a bit heavier, note that it is a finished product so there’s more than before. Meta data for the game lobby, etc. But look how much cleaner it looks! By creating the async function, I can await all my promisified Redis calls, compile my results with a map/filter call, and there we go. Simplified Redis (can apply to any async DB like Mongo) mapping and returning with NodeJS.

Thanks Madara!

A Crossroad Developer

There comes a time in a developers life (not just once, but many times) where you feel incompetent in your role. The main four stages I’ve experience in cycles (yes, it repeats!) is the known flow:

  1. Unconscious incompetence
  2. Conscious incompetence
  3. Unconscious competence
  4. Conscious competence

Not only does this apply to your entire career (or hobby) as a whole, it applies with each new skill-set you acquire not only in programming, but in life as well.

I fall somewhere in between unconscious competence, but most prominently, conscious incompetence.

I started programming in 2009, for a text-based game called I had no experience, but a couple of the programmers there were patient with me, and I wouldn’t be where I am today if it wasn’t for one. He not only gave me tips and advice for life and programming, he gave me an exceptional job reference which was the scale tipper for my first job out of college. After a year hiatus from the game, I’m happy to be back working with him again.

I’m digressing. I started coding in PHP, HTML, and MySQL. Once I was comfortable submitting a sticky form to a database, I moved into JavaScript. Verification, simple little UI effects to make a page better.

College taught me more PHP, but I was top of my class (in my head at least) because I already had a year of practical application with PHP and JavaScript at this point. My first year of college development was in Java in 2009.

So then comes graduation. I got a job working at a non-profit charity called RAINN. A wonderful organization dedicated to helping victims of sexual assault. I spent 2 years there developing with ColdFusion and jQuery (We had to support IE7, so it was a no-brainer to use), before transitioning from CFM to Java and Python for my last 6 months.

All this time, StackOverflow is by far, hands down, the most important website to me. I’ve developed into a top 3% contributor there with 12.6k reputation (minuscule in comparison to Jon Skeet!). BUT! It’s not about the reputation; it’s about the learning. By answering questions wrong, I have learned the most.

So then comes the day I thought I was completely screwed — I was let go from RAINN. First thing my mom says on the phone to me was congratulations, it was time to move on anyways. My uncle told something that stuck in my head pretty heavily.

“Stay at your first job 1-2 years. Stay at your second job 2-3 years. And then your third job, you can more or less request a salary and a corner office you’ll be so good.”

So here I am, 7 months into a Software Engineering position at Sierra Nevada Corporation, working with NodeJS, AngularJS, Adruino boards, PHP environments, and now security code (which I know nothing about), feeling overwhelmed, with a brother recruiting for Amazon telling me the best of the best have patents, they are published. I’ve never had a good idea in my life. I’ve never felt innovative. Sure, I can hammer out a program given a set of instructions, maybe have some decent ideas, but the main idea was never mine.

So here I am today, two days of hard thinking later. “What would I patent? I’m nowhere near good enough to publish anything.”

Life story aside, many developers hit this crossroad. I say many people; some are just developers. It’s just a job. It pays the bills. Then there are the developers that go beyond. They have awesome Codepens, GitHubs, StackOverflow accounts. They come home from work and they build things. I want to strive, I want to build things. Which is why I asked to resume coding for PhantasyRPG again, with my time out of work. It’s not my idea, but it’s more innovative than sitting on my ass.

This blog is dedicated to my strive to be a great developer, as I fight through the conscious incompetence phase of my life where I know I’m good at what I do, but I’m drowning in what I don’t know and intend to learn.