Question

I have a question about an app page function on Facebook.

https://www.facebook.com/InternationalDelight/app_481604621851046?ref=ts

in the link above there is the blue stick header, followed by a silver or white bar with four items.

An avitar/icon image
A button that allows a direct link to the owner’s Facebook page attached to a another drop down button.

Now the last button is the one I am curious about. It allows the splash page (in the content area) to be liked then it redirects the person to the offer.

I have my app in sandbox mode, I am wondering:
Is this is an app that I can add
Is it a custom built function
A standard feature that I have not seen because my page is not live.,

How I can duplicate the functionality of the entire bar?

I have dived into Facebook the API and Facebook graph but I honestly don’t know what to look for or what it is called.

On inspection the container div says…’stickeyheader’ probably becasue it is sticking itself to the blue header…or timeline and ‘timelineStickyHeader’ and ‘visible’… but how they got it to behave this way is beyond me.

Anyone familiar with this action/event? Let me know if I need to add more details.

Thanks!

Answer 1

Here is the answer (in case anyone bumps into this down the road). There are a few steps to putting your app on Facebook via and iFrame (basically a application that is hosted somewhere else but that requires some Facebook like button interception.

First you build your application. Creating a landing page (this will be tabbed later). In the header of that page look to intercept the user Facebook date to see if they currently like your page. If they don’t then set up a function that stops them. If they like the post back/processing of the page on the like button click will set the conditions for the user to pass through to the app. This is like-gating.

Now, to develop the application you have to go to developer.facebook.com and create an account. There are two ways you can intercept the like/user date…

Here was my original code (it is in Coldfusion and Javascript):

<cfscript>
//Decode the signed request
fb_str = listToArray(FORM.signed_request, '.');
//Facebook use strtr
fb_str = replacelist(fb_str[2], "-,_", "+,/");
//For some reason their base64 needs padding out to match a base64 length
pad = repeatstring("=", 4-len(fb_str) mod 4);
//Decode it
result = ToString(BinaryDecode(fb_str & pad, 'base64'));
//JSON-ify it
liked = deserializeJSON(result);
//Clean up and release memory
fb_str = pad = result = '';
</cfscript>

<cfif liked.page.liked eq 'YES'>
<script type="text/javascript">

top.window.location = 'http://apps.facebook.com/parentsavvybook/';

</script>
</cfif>

That goes on your Coldfusion page (or other server-side scripting equivalent).

More can be found here: http://www.facebook.com/note.php?note_id=10150169691075844

Then in the developer tools you want to choose web app, then click the button that says create a new app. Fill in the application information, like what the domain is, and the name of the app.

The important stuff is the tab set up.

Add your app URL (where your web app is hosted to point to the page that has the FB script code/redirect stuff.

Once it is created you’ll have an app ID and app URL.

The KEY

The key was this little stupid bit of code.

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

Why was this important. Well the Facebook page might be managed by you, but you will not be able to attach it to the page. You’ll go crazy for days trying to get it linked up.

Fill in the missing parts above and go to the link.

You’ll be prompted with a drop-down that will let you attach it to your page, or a page you manage.

Here is another post that hits the high points.

http://blog.hubspot.com/blog/tabid/6307/bid/26330/How-to-Create-Custom-Tabs-for-Facebook-Business-Pages.aspx

I hope this helps someone who struggled with FB apps and tabs to get the like button and how to interact with it and then finally attach it.