Make your own facebook application for your comic RSS feed
Site Stuff January 31st. 2008Due to the success of my Facebook application, and a growing number of emails from other webcomic owners asking for help making their own I have decided to release the files I used, and write a tutorial on how to make your own Facebook application.
Facebook is growing at an incredible rate, and it is very likely that a lot of your readers have Facebook profiles. Now you can offer them a way to get your comic delivered straight to their profile. The best bit is that their friends all get to see your comic on their profile; they can invite their friends to do the same. This application works by using your RSS feed – if you don’t have an RSS feed, or your comics don’t appear in your feed then this might not work out so great for you.
First Steps
This tutorial assumes you have basic PHP skills, very basic. In the sense that you know that PHP is, you know, a language or something. It also assumes that you have added the Developer Application, oh, and of course, you must have a Facebook account! You should also have some spare hosting space to store the application as Facebook require you to hose your own applications. Before creating your application make sure you have some hosting space. Download this zip, virus scan it first if you don’t trust me. Then feel relieved that I haven’t given you a virus. The zip includes the required from Facebook and a working version of the application – you will need to follow the rest of the tutorial for it to work though.
Setting up the application
Before we make the application, we must first register it with Facebook. This will give us an API Key and a secret which will enable our application to ‘talk’ to Facebook.
To do this go to the Developer App and click on the Set Up New Application link. Fill in the details, I’d use “Latest from yourcomicname” as the Application Name. The Callback URL is where you are hosting the application files, for example: “http://yoursite.com/Facebookapp/” (no quotes). Ensure that you have a trailing slash on your Callback URL otherwise the application won’t work. The Canvas Page URL is the address of your application, for which I’d use your comic’s name.
Make sure Use FBML and Website are selected, and that you answer yes to Can your application be added on Facebook? Fill in a brief explanation of what the application does – it gets the latest posts from your comic. The Post Add URL should be your Canvas Page URL. I’d leave Default FBML blank and select Wide for the Default Profile Box Column. Again, the Side Nav URL should be the Canvas Page URL.
Then Submit. This should give you an API Key and a Secret, which we will now use.
Now go back to the zip I asked you to download. Extract it so you can edit the files.
• In appinclude.php put in your API Key, Secret and Callback URL.
• In Canvaspage-template.php at around line 15, switch “your comic site” to, well, your comic site.
• In conf.php fill in your API Key and Secret and replace all instances of “yoursite.com” with… you guessed it, yoursite.com. Also, add the URL of your comic RSS feed.
• In invite.php, around line 17, change your comic to, your comic and change the url to that of your application.
• In links.php exchange the http://apps.Facebook.com/yourappURL/ for the address you choose for your Canvas Page URL.
• Edit title.php to what you want to appear at the top of your application.
Okay, that should be it. Upload your files to your host. Now it’s time to test the application. Add the application by clicking on “View About Page” and then add application. There is a developer mode you can set so that only you, and other developers of your app, can see the application once it’s added. This means you can play around with it on your profile and no one will know.
Once you’re happy with how everything is working you can submit your application to the product directory, meaning people can add your application directly from the directory. However, people are still able to add your application before hand; in fact, you will need five users to have added it before your application will be approved.
Using the Application
To update your comic simply visit your application when you have updated the site and the application will update for all users. This is dependant on your RSS feed, you can only update the application after your feed has been sent out, this can vary between site, ranging from a few minutes to an hour or two.
Afterwards
Building the application is all very well, but you have to tell people about it too. Even if you get accepted into the directory you may not get many adds, unless you are a hugely popular comic of course!
I would recommend writing a news post about the application, including a link to it in the post. Encourage people to add the app, and even ask them to invite their friends to do the same. But don’t make every post sounds like you are begging people to add the application, remember, Facebook profiles are people’s personal space – if they don’t want to see your comic there they just won’t add it. But here’s a tip – you can become a fan of an application without actually adding the application itself – you could encourage those that don’t want to full blown app to become a fan of it instead, showing their support in that way.
Support
This tutorial was really intended to give those in the web community an easy way into the world of Facebook applications, especially those people who either don’t have the technical knowledge to, or, the time to build an application from scratch. Hopefully you’ve found it useful. If you have run into trouble I’ll try my best to help, but being a university student I can’t promise immediate support, so if I don’t get around to solving your problem I do apologise. Please leave any support questions in the comments so that my inbox doesn’t get flooded and I’ll try to get back to you.
There is a link back to my site included in the application. It’s quite small and doesn’t appear on the profile page at all, just on the bottom of the canvas page. If you really want to delete it you can, it’s in canvas-rss.php file. If you’ve found this tutorial and sample application help, I’d love it if you could mention my comic when you tell your fans about your brand spanking new application, just as a way of saying thanks Or even an email with a link to your new application. That, or bid on my project wonderful adds, heh.
Best of luck with your comics,
Mike
February 1st, 2008 at 3:17 am
This was so nice of you! You are really amazing!
I think i’m a little in love with you :P
really thank you so much!!
February 10th, 2008 at 4:24 pm
nice tutorial i did everything u wrote but i get an error when i go to my application it says error loading application can u pls help me out ??
February 11th, 2008 at 1:03 am
Ok course, but you’ll need to be more specific about the error.
February 11th, 2008 at 8:03 am
man can u add me on facebook ?? i ll make u developer in my application and u ll be to understand it better
February 11th, 2008 at 1:45 pm
Being a developer of your application doesn’t really allow me to see anything, especially not anything that could really help. What I recommend is checking through this thread and seeing if the solutions provided help:
Solutions include:
i. ensuring the variables are inputted correctly
ii. making correct use of www
iii. checking to see if your host runs php 5
If none of that helps, shoot me an email and I’ll see what I can do.
February 11th, 2008 at 2:14 pm
Yea i my web host does support PHP5 i was able to run the basic ( user id identification ) applications without any troubles.. i ll cehck the rest and come back to you.. another thing :-what’s ur facebook id lol i m gona add YOU!
February 11th, 2008 at 6:42 pm
Oke doke, let me know if the fixes don’t work. I can be found lurking on the book of faces here: http://soton.facebook.com/profile.php?id=286106241
February 12th, 2008 at 1:22 pm
i sent you a request add me lol ….what should i add in the $feed url ?? in the conf.php file
February 13th, 2008 at 12:33 am
$rss_url is the location of the rss.php on your server, from the files I zipped
$feed is the url of your rss feed
Confusing I know, I should have choosen better variables
February 13th, 2008 at 7:21 pm
Thanks for making this. I’ve been sending everyone I know to your comic.
I checked everything, but am getting a
Parse error: syntax error, unexpected T_VARIABLE when the facebook.php beings.
Can’t find what it want to be there first.
February 13th, 2008 at 11:27 pm
Hi Jameson, this error normally occurs when you are missing a } or ; or ”
Ensure that when you put in your details, you made sure they were surrounded with ‘ marks and that the end of the lines still have ;
February 14th, 2008 at 11:19 am
hey dude i finally bought a domain and online space but i cant uundertand how i should configure the ftp lol
February 15th, 2008 at 6:41 am
Great work on the app, thanks for posting it! Most things seem to be working well for me, but when I click on the name of my app from the sidebar or the about page, it tries to load apps.facebook.com/bunnykiwi and gives me the following error:
Errors while loading page from application
Received HTTP error code 404 while loading http://www.bunnykiwi.com/Facebookapp/
If I try to just open that URL on my website, it gives me:
Unknown action
No action responded to Facebookapp
My site is running on Ruby on Rails and I think it’s trying to use /Facebookapp as a rails command. If I load bunnykiwi.com/Facebookapp/index.php, it comes up with the canvas. Is that what should be displaying when it’s just looking for the /Facebookapp url? What should actually be displayed on the apps.facebook.com/bunnykiwi page? Thanks!
February 15th, 2008 at 10:18 pm
Amulya, I’m not quite sute I understand what you mean…
February 15th, 2008 at 11:27 pm
I figured out my problem. I just had to change my .htaccess file so /Facebookapp would bypass the automatic Rails routing. One other question I had, though, was what url goes in the invite.php file? Thanks!
February 16th, 2008 at 1:33 am
i managed..thxs
You got experience working with database based applications as well ? i mean i have an application(sample facebook) which asks for “db host” what should i fill in there ? should i add the website domain or something else ?
February 16th, 2008 at 5:54 am
@Phil Sorry I missed your firstquestion, glad you got it sorted. The url in invite.php is the url to add your application. You can find this by visiting your about page not having added the application, there will be a “Add this button” Right click and get the url.
@ Amulya I’m afraid I’ve no experience with database type applications, but at a guess, it would be the host your mysql is hosted on, most people can get away with ‘loaclhost’ but I suspect it’s a little different with fb apps. Email your host, or check their FAQ, they’ll tell you the address.
February 16th, 2008 at 8:57 am
thxs…i used “localhost”
next question lol( i’m gona fill this forum page of yours!!)
ou got any idea how i can convert a flash application to a facebook application
February 16th, 2008 at 8:02 pm
I’m pretty sure you can just include a normal flash file on a canvas page or profile box? I mean they even have a fb:swf tag in fbml. Why would you need to convert it? Unless you mean like a game, or something that stores data. In that case you’d need to change the way it save data, but I have to admit, that’s really not my area of expertise.
February 17th, 2008 at 12:21 pm
yea i m trying to find out some one who can explain how i can store the high scores in my database
February 21st, 2008 at 9:04 pm
all i get is a box with a question mark in it. what did i do wrong?
February 22nd, 2008 at 12:24 am
Thanks for taking the time to share this with us…
I’ve tried to follow your tutorial but get the following error when installing the application:
Parse error: syntax error, unexpected ‘{’ in /home/lacuisin/public_html/princessmango/Facebookapp/appinclude.php on line 17
Any help would be very appreciated!
February 22nd, 2008 at 10:59 am
Hi again,
Ignore my previous question, switching to PHP 5 sorted it out.
I now have the following error:
Warning: array_slice() [function.array-slice]: The first argument should be an array in /home/lacuisin/public_html/princessmango/Facebookapp/canvas-rss.php on line 20
Warning: Invalid argument supplied for foreach() in /home/lacuisin/public_html/princessmango/Facebookapp/canvas-rss.php on line 22
Thanks for any help!
February 23rd, 2008 at 6:37 am
Hey Mike — this is a great tutorial, thanks! Question: I got the syntax error “unexpected “{” in ../appinclude.php on line 17″. I don’t know anything about PHP but the { at the end of line 19 looked weird so I replaced it with a ; and then got “unexpected T_IF in ../appinclude.php on line 19″
Any thoughts?
February 26th, 2008 at 8:03 pm
Mike this is great, I’ve been trying to build my own FB comic app for the longest time. Thanks.
March 26th, 2008 at 9:43 am
Is there any way to get it so the webcomic doesn’t look stretched out when it’s displayed?
April 5th, 2008 at 4:29 am
you guys suck and this web sucks too!
April 8th, 2008 at 3:43 am
Hi, first of all, thanks for sharing your app.
I followed your instructions, and have successfully created my Facebook app.
The only problem I have is the Facebook App window width. My comic strips are mostly 900 pixel wide and it doesn’t fit in the app window of Facebook. Do you have any suggestions or solutions? Much appreciated.
Victor
April 9th, 2008 at 4:40 am
Mike: This is really great; thanks for sharing your knowledge!
I’ve almost got it, but still a problem. When I go to the new app, I see only a clickable headline and some text below the comic that is not clickable (though in RSS feed it is). So the app isn’t showing the image (comic). Here’s the feed I’m using:
http://feeds.feedburner.com/TechgrlComics
On my FB profile page I’ve installed the app (developer-only mode). What I see there is: “No content to display. This box will not be visible to people who view your profile until this application adds content to it.”
Any suggestions? Is it a feed setting issue that I can tweak on Feedburner? I played around with that a bit but can’t get it to work. Thanks if you can steer me in the right direction. I’m so close to making it work!!
April 9th, 2008 at 10:52 pm
Follow-up of my previous message. I still can’t see comic images, but the text portion of the feed is now showing on my profile page in the app’s window. So I’m no longer seeing “No content to display.”
April 25th, 2008 at 12:25 am
@ Steve, all te application does it to take the post from the feed, and post it in the application, the fact that it is taking the text section, suggests to me that the application is working correctly and that it is something with the feed. It may unfortunately be the case that the feed type you are using just isn’t compatible, but I doubt this is the case as I know other people are successfully using feedburner feeds.
@Victor - the application should automatically shrink the comic for you, as the image is uploaded to facebook and facebook shrinks it for you. It does with all of the other comics I have used the application for. You could play around in the app settings and try and force a width I guess.
@Hello, er, thanks?
@Scott, as mentioned, the comic is uploaded to facebook when the application updates, and facebook stretches it to fit. You could try and force it not to byu changing the width settings in the app files.
@jon, it sounds like you haven’t entered some details correctly, my advice is to go through the tutorial again, and make sure you have correctly put in your information in the fields.
April 30th, 2008 at 4:37 am
Thanks for sharing the code Mike! I’m curious about the profile page. Did you solve facebook’s profile cache so that rss entries automatically appear on the profiles of users who have the app installed? I’ve been reading about using an infinite session and facebook’s ref handle to update profiles but am curious if it was a problem you faced. Thanks again!