Facebook Integration

13 Sep 2012

Facebook for Websites

How to integrate Facebook features into your own website. This could for example be a competition microsite that uses Facebook Connect to login and enter the competition and LIKE things.

Facebook Like button

To pop in a standard like button, with or without "send" feature:

http://developers.facebook.com/docs/reference/plugins/like/

To set the image and title used, you need to add opengraph tags in the HEAD eg

	&lt;meta property="og:title" content="&lt;%=Model.Title.HtmlEncode() %&gt;"/&gt;
	&lt;meta property="og:type" content="food"/&gt;
	&lt;meta property="og:url" content="&lt;%=Web.ResolveUrlFull(Model.Auction.GetUrl()) %&gt;"/&gt;
	&lt;meta property="og:image" content="&lt;%=Web.ResolveUrlFull(Model.Prize.Fields.Picture.ImageThumbPath)%&gt;"/&gt;
	&lt;meta property="og:site_name" content="&lt;%=Util.GetSiteName().HtmlEncode() %&gt;"/&gt;
	&lt;meta property="og:description"	content="&lt;%=TextBlockCache.GetPlain("Facebook Like Message", "This site is awesome, check it out!").BodyTextHtml.HtmlEncode() %&gt;"/&gt;

To debug your facebook like button and see what facebook will grab, use this:

http://developers.facebook.com/tools/debug

Facebook Social plugins

Enable you to put LIKE buttons, comment boxes, recommendations boxes, login buttons on your own site.

http://developers.facebook.com/plugins?footer=1

These are all javascript. To embed in Flash it is much more difficult. Here is a rundown of how to add a LIKE button in Flash:

http://labs.byhook.com/2010/08/03/facebook-like-button-in-flash/

Facebook Connect

Enables logging in via Facebook and accessing the user's profile data from your own site.

http://developers.facebook.com/docs/guides/web

Facebook Pages & Apps

How to construct customised pages on the Facebook website itself.

Facebook Pages

You can create facebook "pages" - which I think used to be called "fan pages" - for a business, brand or famous person. These allow you to customise the tabs that are shown - eg Wall, Photos, Activity Stream, Other Bollocks, My Custom Whatever. An example muck round site is the Beweb company page (note: not the Beweb Group).

1. Create a page by going to Advertising, then click on Pages (currently in the middle of the page in the body copy).

2. To get custom tabs you need to add the Application called "Static FBML" to your account.

3. Add a tab with Static FBML and it will let you type in some FBML. You can easily embed Flash and IFRAMEs are possible but I gather they need to be approved by Facebook and involve some spending on facebook advertising.

4. FBML is facebook markup language and reference is easy to find on google.

Facebook Apps

You can also create applications, which have more access for integration.

Building an application on Facebook gives you the opportunity to deeply integrate into the core Facebook experience. By leveraging Facebook's integration points you can make your application feel native to the site, and create a seamless experience as users browse Facebook. Your application can integrate with all aspects of the Facebook user experience, from the profile page to bookmarks and the stream.

http://developers.facebook.com/docs/guides/canvas/

How to add an App to a page tab

You might think it would be easy but in fact it is pretty hard to figure out how to add an app to a tab. The easiest method is to go to this URL in your browser:

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

Optional param: &display=popup

For more info see:

http://www.hyperarts.com/blog/facebook-removing-app-profile-pages-on-feb-1-2012/

How to talk to Facebook API

We have a class BewebFacebook as an optional component in Savvy. This contains C# code to talk to Facebook.

If you need more functionality, the standard Facebook Javascript API may be the best place to start as this seems to provide a complete API. You may need server side code however, so if you do there is also an open source Facebook C# library that you could pull in.

Detecting whether running as a tab iframe or whole page

http://bobbelderbos.com/2012/08/facebook-api-how-to-detect-canvas-page-tab-facebook-page/

How to tell if the user is logged in and has authorised your app

FB.getLoginStatus allows you to determine if a user is logged in to Facebook and has authenticated your app. There are three possible states for a user:

the user is logged into Facebook and has authenticated your application (connected)
the user is logged into Facebook but has not authenticated your application (not_authorized)
the user is not logged into Facebook at this time and so we don't know if they've authenticated your application or not (unknown)

With social application, knowing which of the these three states the user is in is one of the first things your application needs to know upon page load.

https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/

How to tell if the user likes your app?

To tell if a user likes your app you can check the property of the "signed_request" JSON object called jObject["page"]["liked"]

See http://unbound-media.com/blog-php/how-to-tell-if-a-facebook-user-likes-your-facebook-application/

IE8 Cookie Issue - P3P header

Facebook login will not be able to set a cookie on IE8 unless a P3P header is added.

name: P3P

value: CP="NOI ADM DEV PSAi COM NAV OUR OTR STP IND DEM"

http://facebook.stackoverflow.com/questions/5568896/facebook-page-default-landing-tab/7399053#7399053

http://support.microsoft.com/kb/324013

Default landing page tab cannot be set

You can set the default landing page but it will only apply for users who do not like your page. Once you like a page you then go straight to its Wall tab.

http://facebook.stackoverflow.com/questions/5568896/facebook-page-default-landing-tab/7399053

APIs