*** SEE THE VIDEOS ***
Part 1 of 3: Using the Feed Preview Console
Part 2 of 3: Creating the feedHandler.cfm page
Part 3 of 3: Creating the form and calling the ajax window
Creating a one line, short story and full story feed for your wall might sound really tough. You have to use json and if you are using ColdFusion, have very little documentation. Well I’m here to change that :).
Really all you NEED to publish a feed on your wall is:
- a registered template bundle id
- a feed handler page
- a form to instantiate your feedStory call
*note: using the feed preview console allows you to register a template bundle id manually. if you wish to create multi-feed posts, you have to use feed.registerTemplateBundle and feed.publishUserAction. this allows you to create multi-feed posts, however, you are limited to 100 registered bundles. before you reach your limit, you may want to call feed.getRegisteredTemplateBundles and feed.deactivateTemplateBundleByID. these two api calls will give you breathing room for bundles you are not using.
Register a template_bundle_id
You MUST use the Feed Preview Console Facebook gives you. http://developers.facebook.com/tools.php?feed
When you get to this screen it can be a bit intimidating but I promise you it’s really simple. The field to look at here is the ‘Sample Template Data’. This field makes the variable {*company*} available in your json response for example. To add a new variable to the flow just do this: {“myage”:”26″}. SIMPLE!
Now you can make a sentence like so, Gavin works for {*company*} in the city of {*city*} and is {*myage*} years old. Where {*company*} = Facebook, {*city*} = Palo Alto and {*myage*} = 26. Now it should start to make sense here.
As you browse over the console you start to see your entire layout for a one-line, short story and full story wall post. I chose not to use ‘Sample Target IDs’ but if you want to incorporate what one user does with another, be sure to leave the Sample IDs Facebook throws in there for you. From here, it should make pretty good sense as to what you should do with the Feed Preview Console. The only other thing to mention is images will only show in the ‘Short Story’ tab and should be utilized as imagery grabs the eye of users.
Click ‘Preview’ and if you like your sample bundle, click Register Template Bundle. This will open an ajax window with your template_bundle_id. You can deactivate any Template Bundles you are not using by clicking on the ‘Registered Templates Console’ tab. (again, it’s a good idea to deactivate non-used bundles as you are limited to 100 registered).
Phew, Now let’s make our feedHandler.cfm page
We need to create a feed handler page in order to output a json value. The ONLY purpose of this page is to return json, nothing else. This will be a typical coldfusion page that can have dynamic values and create dynamic feeds. Lets take a look at some code below:
<cfoutput>
<!— below is your json formatted ‘json’ variable —>
<cfset json = ‘{“content”:
{“feed”:
{“template_id”:#application.template_bundle_id#,
“template_data”:{“company”:”#application.appNameCap#”,
“link”:”<a href=”#application.fburl#”>#application.appNameCap#</a>”,
“here”:”<a href=”#application.fburl#”>clicking here</a>”,
“images”:[{“src”:”#url.photo#”, “href”:”#url.photo#”}]
}
}
},
“method”:
“feedStory”
}’ />
<!— output your json response —>
#json#
</cfoutput>
As I mentioned earlier, the whole purpose of this page is to return the #json# variable. The variable we set simply passes in a template_id, your company name, your facebook url and a photo. Make note that you can use regular HTML in your variable ie. <a href… as I have above. After looking at this we can see this is not too tough and if you go to feedHandler.cfm directly, you will see a format much like this.
{“content”: {“feed”: {“template_id”:29191437598, “template_data”:{“company”:”Humorous”, “link”:”Humorous“, “here”:”clicking here“, “images”:[{“src”:”yourphoto.jpg”, “href”:”yourphoto url”}] } } }, “method”: “feedStory” }
With this output Facebook has almost everything it needs to create your one line, short story and full story ajax window. The only thing left is to call the window through a form. You can call your ajax window with the code below.
Calling Our Ajax Window with a FORM
<form fbtype=”feedStory” action=”#application.faceBookPath#/#application.appNameLow#/feedHandler.cfm?photo=#application.urlPath#/extract/#url.pic#.jpg”>
<input type=”submit” value=”Publish” label=”Publish This Photo to Your Wall” />
</form>
The MOST IMPORTANT part of the form above is fbtype=”feedStory”. You must pass this attribute and use type submit for your submit button. Once you have your registered template, created a feed handler page and put this form in your call page….
YOU SHOULD BE SUCCESSFULLY POSTING FEEDS TO YOUR WALL FROM YOUR APPLICATION!
I just implemented this today in my application and it works beautifully!
I have multiple feeds so my feedHandler.cfm gets passed a “type” variable and I use cfswitch to determine which JSON response to send back (different variables are required for each feed).
Now my app feels complete.
Thanks!
I was able to do all the above, but have a question. I want to use the name of a friend (I have the uid) in my sentence. how do i do that?
Hi Gavin,
Thanks for the great tutorial! I was able to get most of it setup but for some reason my (personal) JSON file returns a Facebook error code I’ve googled and can’t find:
Did not receive valid JSON response.
Received- null
Have you seen this before? Is there a way to troubleshoot this to get some feedback from Facebook about what it is missing? I know if I deliberately corrupt the JSON by not escaping a slash, it complains with a different message so it’s hitting my server for sure.
Any tips appreciated!
Adam
Oh wait – it’s a JSON AJAX call. Diving into firebug to see if I can watch the request and response…
Okay. So firebug was no use. I had an extra set of {} around my template data instead of the value:
{“template_data”:{“myvar1”:123}} so when I copied and pasted a working example JSON packet it worked albeit with a missing_template_vars message so when I added my own it was ready to go. Thanks again for the tutorial!
Thank you for this guide. Your example helped me through the sample data part after several minutes of trying to figure it out on my own.