Ruby on Rails, iOS, Git...

We spend a lot of time thinking about these things. If we have something helpful to share, we'll put it here.

Request a free RaddOnline® proposal.

iPhone SDK: Using Facebook Connect for iPhone Part 1 of 2

Posted by Tim Stephenson, RaddOnline® on Saturday, March 21, 2009

Sharing with Friends, Now Even Easier

Earlier this week Facebook released Facebook Connect for iPhone, which allows us to connect iPhone apps to the Facebook web site. Facebook Connect for iPhone is a set of classes that can be added to your xCode project and used to ease the process of logging into the site, granting extended permissions and posting status updates to the feed. If you’d like to read more, check out these articles:

The video and information on the Facebook developers page are straight forward and easy to follow. Also, when downloading the SDK, a sample project is included that will help you get up and running. I’ll be using that sample project here.

Missing From the Facebook Documentation

The documentation and the video provided by Facebook assume a certain level of experience creating Facebook apps. The process of creating an App, and creating Template Data for Feed stories was only briefly covered and not explained in their documentation. I’ll provide a little more background on those tasks here in part one.

A Facebook user must grant extended permissions before your app can post a story to the user’s feed. This is a one time task, and Facebook’s example demonstrates it nicely. Because it is a one time task, I want to hide the Get Permission button after permission is granted. This process isn’t covered in Facebook’s example. I’ll cover it in part two.

Getting Started with Facebook Connect

  1. First, download the Facebook Connect for iPhone SDK. Download
  2. Unzip it, and take a look inside the fbconnect-iphone/samples/connect folder. Start with the sample project in this folder. The video describes how to add the classes to your project and how to add the path to the source files in the Header Search Path of the Project info. Be sure you do not select “Copy files into destination group’s folder if needed” when adding this to your own project or you may run into problems.
  3. In the Connect project, the header path was completed by Facebook. Double click the Connect.xcodeproj file to open the project.

Creating a New Facebook App

Before moving on, you need a Facebook app to work with as an example. If you haven’t done so already, sign up with Facebook and login now.

fb-developers

  1. After logging in, go to the Developers Page as seen above.
  2. Click on the Set Up New Application button in the upper right hand corner.
  3. Give the application a name and click Save Changes. After it saves, you’ll see the new application screen with the details including the API Key and API Secret. That’s all you need.
  4. Open SessionViewController.m and add the Application Key and Application Secrect. Replace “YOUR API KEY” and “YOUR SECRET KEY” respectively. Do not leave the <> characters in the string.
///////////////////////////////////////////////////////////////////////////////////////////////////
// This application will not work until you enter your Facebook application's API key here:

static NSString* kApiKey = @"<YOUR API KEY>";

// Enter either your API secret or a callback URL (as described in documentation):
static NSString* kApiSecret = @"<YOUR SECRET KEY>";

Build and run the application. You can login to facebook and grant your application permission. If you click the Publish to Feed button, an Application Response Error returns, because a template bundle and template bundle ID are not yet defined. Look at this method in the SessionViewController.m file:

- (void)publishFeed:(id)target {
  FBFeedDialog* dialog = [[[FBFeedDialog alloc] init] autorelease];
  dialog.delegate = self;
  dialog.templateBundleId = 9999999;
  dialog.templateData = @"{\"key1\": \"value1\"}";
  [dialog show];
}

Create a template and replace 9999999 with the correct value.

Creating Feed Templates in Facebook

Creating a feed template isn’t difficult. However, if you haven’t done it before, there may be a couple of things that cause you problems. Here’s more information about template data. Each template consists of a one line story, a short story and a full story template. I’ll use the Feed Template Console to create them.

  1. In your application’s page in Facebook, look for the link “Create Feed Template” and click it, or for convenience, go to the Template Console
  2. Select your application in the drop down and click Next.
  3. You’ll see the Create a One Line Story template screen. Change the text in the One Line Template field to:
    {*actor*} won the {*contest*} at the {*event*}.
    Be sure to include the asterisks on either side of the variable name.
  4. The Sample Template Data field shows you how to include images. Replace Facebook’s data with:
    {"contest":"Pie Eating Contest", "event":"California State Fair"}
    The “actor” variable isn’t needed in the data. For each variable, include a key and a value. The value is replaced with values you provide from your application at run time.
  5. Click the Update Preview button. If there are no errors, you will see something like, “Tim won the Pie Eating Contest at the California State Fair.”
  6. If you’re happy with the template, click the Next button and create a short story template. This is optional. There are three fields, Short Story Title Template, Short Story Template Body and Sample Template Data. I used these values:
    {*actor*} won {*contest*} at {*event*}.
    {*event*} was a big success and {*actor*} left a thousand dollars richer.
    {"contest":"Pie Eating Contest", "event":"California State Fair"}
  7. Rinse, wash and repeat. Click the Update Preview button and confirm there are no errors.
  8. Click next, and if you want to create a full story go ahead. I clicked Skip on the Full Story screen.
  9. The Create an Action Link screen opens. Using the console, Facebook allows only one action link. Use it wisely. Enter “Visit my site” in the Action Link Text field, and a link to your web site or fan page in the URL field, click Update Preview. The link updates in the preview and you can test it.
  10. When ready, click Next, and click Register Template Bundle. The bundle id is displayed. Copy it into the code, replace 9999999 with the correct id, and change the templatData like this:
- (void)publishFeed:(id)target {
  FBFeedDialog* dialog = [[[FBFeedDialog alloc] init] autorelease];
  dialog.delegate = self;
  dialog.templateBundleId = 9999999;
  dialog.templateData = @"{\"contest\":\"Pie Eating Contest\", \"event\":\"California State Fair\"}";
  [dialog show];
}

I did not enter the template bundle ID in the sample code above, be sure to replace it. Build and run the application. Post the feed to Facebook. Of course when formatting the template data, replace the hard coded values with variables from your application.

Comments

jamey said on Thursday, April 02, 2009:

Thanks so much for the posting. This helped me a bunch. I watched the facebook video and that got me up and running but the Facebook app portion was still unclear.

A couple of questions for you:
1. when creating the template, I could see the image I associated with my Facebook app when I hit "Preview" but not when I actually posted from my iPhone app to Facebook. All i see is the text from my template (filled in of course).
2. Do you know how to control the facebook icon associated with a post? I'd love to simply use the mobile icon FB already uses when you post from the facebook iphone app. No icon is appearing when I post.
3. (last one) do you know, by chance, how to NOT require the user to login into facebook connect every time the app launches? This is a pain...

Again, great post! Thanks for taking the time to put this together.

Jamey

Tim Stephenson said on Thursday, April 02, 2009:

HI Jamey

For the icon, go to the page on Facebook where you edit the basic information for the app. On that page, you can add an icon, and a logo graphic. In my tests, the small graphic that is labeled "icon" appears next to the post on Facebook.

The facebook session can be restored when the app is launched. In the viewDidLoad method call [fbSession resume];. If the session is still active it should not require an additional login. Looking at the resume method in the FBSession.m file, it looks like they save an expiration date to the defaults. If the date is not passed, the session keys get set. I hope this helps.

Best

Tim

Josh Holat said on Saturday, April 04, 2009:

Hey, great post, it helped me out a lot! Just one quick question...

For some reason, the link I set up on the template never shows up on my Facebook feed or on the post preview in the app itself, do you know why this is?

Tim Stephenson said on Saturday, April 04, 2009:

Hi, in my app the Action Link doesn't show up in the preview either. But it does show up in the Facebook feed. It appears to the right of the Comment and Like links below the post. Double check the template. If you go to http://developers.facebook.com/tools.php?templates look on the right side of the page for the action links. You should see your link and you should be able to test it from this page.

Diego Kaplan said on Thursday, April 30, 2009:

Hi Tim,

I have been playing with FB Connect on iPhone for a few days now and your articles have been of some help, thanks!

I have a question: I have used the feed template console to create a template and updated my code to refer to it. However, when I try to post I get a dialog that says "Invalid template bundle id specified". The first time I got this I was able to go to the apps connect page and add the ID, but now I have created a new app, done the same but the ID says its pending approval. I don't see this process mentioned in your description, and I have had the bundle pending approval for more than a day. Do you know anything about this?

Tim Stephenson said on Friday, May 01, 2009:

Hi Diego

I'm sorry, I haven't run into this issue. If you wouldn't mind, please share what you find out as I'm sure the issue will arise.

narendar said on Monday, May 04, 2009:

Here how can I add comments to prepared template as the comment will show up beside the name of the user on facebook home page.
I have found some comment_xid key value but I could abel to use it.??

How can I add a comment???

narendar said on Wednesday, May 20, 2009:

At last I succeeded with adding user message to the feed posted from the iPhone.

Do any one have idea how can we add a share link to the feed posted on facebook so that it can be shared with friends???

Narendar said on Sunday, May 24, 2009:

As the facebook short story template accepts only one action link, and it seems to there we can give any web Url only.How can we make that as fbml share-button so that by clicking it ,it opens a dialog with name share. as many apps doin this???

Dan said on Tuesday, June 02, 2009:

Great job --
Do you know some easy way to see if the user is logged in before trying to do a post? I have been working on session.isconnected but can't seem to get it to work.

ideas?

Thanks.
Dan Ribar

Tim Stephenson said on Monday, June 08, 2009:

Hi Dan

Take a look at the second part of this article. It deals with checking extended permissions. Let me know if that wasn't what you meant.

Joe M. said on Wednesday, July 01, 2009:

Using FBConnect-iPhone, is it possible to upload a photo from your iPhone app directly to the users photo's on facebook?

Joe G. said on Sunday, July 12, 2009:

Thanks for the little intro. What I have been looking for is the correct setup for an iphone only facebook connect app. I just want to be able to have the user publish to the feed that they beat a game. Basically advertising to their friends.

Should the application be a marked as Desktop or Web for an iPhone app? Thanks

Chinmay Bijwe said on Thursday, July 30, 2009:

Very nice post! I should get the FB connect iPhone app up very soon .. thanks to your detailed post :)

lakshmikanthreddy said on Saturday, August 29, 2009:

how can we upload video to facebook using fbconnect in iphone application.

Any help is highly appreciated.

Thank you.

wallmart said on Tuesday, October 20, 2009:

Can not imagine how glad I am that got to your post

Rasheeda said on Thursday, October 22, 2009:

I am getting "Invalid next or cancel parameter specified" error when I request for extended permissions.
I provide my test url from mywebsite which is actually not related to the facebook connect app in anyway.
What would be a valid next and cancel parameter for prompt_permission.php request for a desktop application?

Hardik said on Wednesday, November 25, 2009:

Hello,
I am completely new to face book connect.
I followed the steps for Creating Feed Templates in Facebook and after completing the step 1 I cant get that drop box from where i have to select my application.Please help

ashwin said on Monday, November 30, 2009:

any reply me,
I am new to face book connect.
I followed the steps for Creating Feed Templates in Facebook and after completing the step 1 I can't get that drop box from where i have to select my application.

subhan said on Tuesday, December 01, 2009:

when i am trying to login i got login canceled mesage for that reason i am not able to redirect to publish feed screen can you tell me what is exact problme

Scott said on Sunday, January 10, 2010:

Do you have any idea how to upload an audio file directly from the iPhone?

Jason said on Tuesday, January 19, 2010:

Hi Tim,

Great tutorial!

I would like to have different icons with the post depending on the state of something in my app.

Do you know how to include the icon displayed with the post from the iPhone app using FBConnect?

Thanks

kc said on Wednesday, January 20, 2010:

The template bundle has been discontinued in facebook. Is there any update on new way of publishing news feed?

Nathan said on Sunday, April 25, 2010:

I cannot find the video. Does anyone have it or know of a good URL?

thanks

Joonas said on Monday, April 26, 2010:

<There was an error with application origo. Please try again later.>

API Error Code: 100
API Error Description: Invalid parameter Error Message: next is not owned by the application.

(Text in < rough translation from Finnish>. Everything else is written as is.)

What should be done About this?

Raji Nair said on Monday, July 19, 2010:

How To create template bundleID from feed template console b'coz facebook has discontinued support for feed template console.please suggest alternative for this

prionundproom said on Friday, August 27, 2010:

If admin want promote this forum on web, he should add it for our web cat. We would like forum like this. Don't wait add your site. Probably very people want find it in our web directory.

Visit my web dir:

<a href=http://rosaro.pl>katalog stron</a> Rosaro!

James said on Tuesday, September 07, 2010:

The download link for FB connect for iPhone is dead. :(

Breerveorgany said on Thursday, September 23, 2010:

Hey im new to this. I hit upon this forum I find It quite accommodating and it's helped me out tons. I hope to contribute and help other people like it has helped me.

Thanks, See Ya Around
_________________
<a href=http://www.superiortint.net>tint world</a>

Acultulse said on Sunday, September 26, 2010:

Hey i'm new to this, I came upon this message board I find It vastly accessible and it's helped me alot. I hope to contribute and guide other users like its helped me.

Thank You, See Ya Later.
_________________
<a href=http://www.electriciansinhull.org.uk>electricians in hull</a>

FedeHeleunode said on Sunday, October 03, 2010:

What's Happening every body, excellent site I find It extremely helpful & it has helped me out tons
I hope to be able to give something back and guide other people like this forum has helped me

_________________
<a href=http://workingwhilehome.com>blog hosting</a>

Gil said on Friday, December 31, 2010:

I have an iphone app with a fun page with many followers. i want to add a "like" or "share" button in my app.

If i create a new facebook app, can i merge it with the fun page already exist?

What's the solution?