This will save you some major pain.
About a year ago to the day I wrestled with the Facebook API and Shiva. I got something partially working, but it was broken beyond belief in IE. This is because I was relying too heavily on Javascript to do things, and couldn’t safely call Javascript functions from within Shiva when IE was involved.
So every few months I went back to http://developers.facebook.com, grabbed the latest php SDK from github, and tried things out. A pattern emerged. I could usually get a little of the way there (enough to make me feel like continuing) but never enough to work on all the browsers I wanted without breaking.
This time I tried something different! After trying and failing again many times in rapid succession today, I was ready to throw in the towel. But I tried something a little subtler, and then expanded on it. When I got into trouble, I scoured the web for similar solutions I could build on. In particular, I found a nice class structure here: http://johnklingelhoets.com/facebook-api-graph-oauth-class/
I used a good part of this for the wall post and user info stuff.
So.. without further ado, I present to you the Facebook/Shiva Sample Integration. Click to Download the Files
It’s very basic. It will get you authenticated, grab the user’s Facebook info for use inside Shiva (even their profile pic), and give you a way to post to their wall from the app. It uses all php and no Javascript for the Facebook portions. Basically, index.php authenticates the user and asks for certain permissions using the new OAuth format. When permission is granted, the flow returns to this page, and the signed result is stored in a cookie. Control is then passed to the Shiva application page. From within, Shiva makes a call to get the Facebook User Information to fbfunctions.php. It looks at the cookie and uses the token in it to make a call to the Facebook Graph API to grab all the user information we’re interested in. An XML blob is built and sent back to Shiva.
If you hit the wall post button, a simple text message is urlencoded and sent to the fbfunctions.php. You can add a lot more to this, and also use an XML block with lots more data for variety. Please look at http://developers.facebook.com and the Graph API links within to see what else you can do, I can’t help you in that area.
One of the trickiest parts is setting up the new application.
If you go to http://www.facebook.com/developers/ you will probably see a blog post, and on the right hand side is a button which says ‘Set Up New App’. Click it. If you can’t find it, try this link instead: http://www.facebook.com/developers/createapp.php
There are many settings. I pick the defaults for the most part.
At a minimum, you will need two settings in here:
- Facebook Integration->Canvas Page (this is where your app can be found on Facebook)
- Facebook Integration->Canvas URL (this is the full path to your application on your own web server, ie http://mywebsite.com/mygame/fb/)
People get hung up on the canvas url. There are lots of different ways to do things. Facebook requires this url to end with a /
I usually put all my Facebook files in an /fb subfolder with no other subfolders, so I have the main folders to do website stuff with.
So, in my web structure I have:
http://mywebsite.com/mygame/fb
and in that folder are ALL of the files included in the zip file. Facebook is going to be looking for index.php (the default file for the path). I’m not sure if the cert file is needed, I included it anyway.
This should contain:
- index.php (the initial file. Modify this and add your App ID and canvas URL from the Facebook Application Setup)
- gamepage.php (this is really just a basic .html file, but I made it a php file to help it not be cached. It is the normal Shiva web player page)
- fbfunctions.php (this is called from within Shiva, and passed an op parameter to decide what to do. Results are in xml)
- fbclass.php (this is included in fbfunctions.php and has functions for wall posting and other cool things. Not written by me)
You will need to include the FacebookAPI.ste in your Shiva project and change the base site URL in onInit (you’ll get a message about it)
After that, feel free to check out the code. You’ll notice I am not using any of the official Facebook API or SDK stuff from GitHub, feel free to add to this implementation. I am going to be staying away from anything involving lightboxes myself, but be warned that if you want those little boxes to pop up over your Shiva game for things like inviting friends, you’re in for a whole separate ballgame.
I won’t be able to help you too much with problems, everyone’s setup is different and I am NOT a web coder