Working with Publisher Inline interface

May 16, 2009 at 6:09 AM
Edited May 16, 2009 at 6:17 AM

When a user has added your app they can see a link to your app in the Publisher on their own wall or on their friend's wall.  Whne they click this link button FB makes a call to one of 2 URLs specified in your application settings: one URL for clicks originating on your own wall, and the second URL for clicks from another's wall.  This post will demonstrate how to handle posts from your own wall.  This code can easily be modified to handle the other case as the parameters and methods are all the same, only the content is different as you will see.

The process flows as follows:

Providing the Publisher Interface:

  1. User clicks on app link
  2. FB posts to the callback URL, sending method="publisher_getInterface"
  3. Your app returns a JSON block specifying the interface
  4. FB renders this JSON to create the UI. 

Publishing the Feed Story:

  1. The user interacts with your UI, eventually clicking "Submit"
  2. FB posts to the callback URL sending method="publisher_getFeedStory"
  3. Your app returns a JSON block specifying a Feed Template to be published.



Providing the Publisher interface

Unlike a normal .NET page request, FB is not expecting a web page in response.  It is expecting a very specific JSON block a,d and deviation form it will result in an error.  THe JSON result format is:


     {"fbml" : "Word of the Day<br /><input type='text' value='' name='word' />" ,

       "publishEnabled" : true

     } ,

"method" : "publisher_getInterface" }

  • An unnamed top-level element contaiing two members: "content" and "method".
  • "content" contains 2 elements named "fbml" and "publishEnabled".
  • element "fbml" contains the entire UI FBML markup for the publisher inline interface.  "publishEnabled" indicates the default state of the "Submit" button.

"method" indicates what function FB is invoking.  At this point, it is requesting the publisher interface, so method="publisher_getInterface".  In the second half of this lifecycle, the method will be a value that indicates FB is requesting the Feed Story details.

The fbml markup is the tricky piece here.  I needed a pretty basic ListView with Object Data Source.  5 minutes in a standard .NET web site.   But I need to ahve the client-side markup fully rendered, and escaped correctly to be JSON compatible.  Luckily the FDT has some features to make this a bit easier.

I start by building my UI as a Web User Control. This code includes CSS and javascript that allow for selection of one of the displayed items, and passing that selected ID back with the second postback.  More about that in the second half.  This is really a very simple WUC.


AFTER spending more time trying to format my code for this crappy forum than actually writing the article, I will come back here and post a link to wherever I end up posting this. 





<%@ Control Language="C#" AutoEventWireup="true" CodeFile="wucTreatGrid.ascx.cs" Inherits="wucTreatGrid" %>


.it { margin-left:-40px; }

<font size="2" color="#a31515"><font size="2" color="#a31515">


{display:inline; float:left; border-color:White; border-style:solidborder-width:1px; margin:1px;} style type="text/css">

.selectedListItem { display:inline; float:left; border-color:Red; border-style:solidborder-width:1px; margin:1px; }


<script type="text/javascript">

var selectedID;

function setSelected(selectedDiv) { 

var selectable = document.getElementById("doSelect").getValue(); 

if (selectable != "false") { 

if (selectedID != null) { 

var oldDiv = document.getElementById(selectedID);


"selectedTreatListItem");"treatListItem"); }"ListItem");"selectedListItem");




selectedID = selectedDiv.getId();

var p = document.getElementById("picked");

if (p != null) {p.setValue(selectedID);}

} }


<div class="it">

<asp:ListView ID="ListView1" runat="server"> 


<div style="overflow-y:scroll; overflow-x:hidden; height:300px; width:100%"> 

<ul > 

<asp:Placeholder id="itemPlaceholder" runat="server" /> 





<li class="ListItem">

<div class="ListItem" id="<%# Eval("TreatID") %>" onclick="setSelected(this);return false;" > 

<img alt="<%# Eval("Title") %>" src="<%# Eval("ImageFileName") %>" height="80px" width="80px" /> 




it seems I have reached the post length limit, continued in next post.

May 16, 2009 at 8:30 AM
Edited May 16, 2009 at 8:31 AM

This is much better suited as a wiki article...