Creating a content managed facebook app
26
Creating a content managed facebook app Integrating a content managed website with Facebook
-
Upload
os-cubed-inc -
Category
Technology
-
view
2.734 -
download
0
description
Getting your facebook app up and running with DNN
Transcript of Creating a content managed facebook app
Creating a content managed facebook app
Integrating a content managed website with Facebook
What you will need to get started
A facebook account, with either a cell phone number or a valid attached credit card.
A facebook PAGE for your site (This is no longer required)
A developer API Key A suitable content management platform (this
example uses DotNetNuke) A place to host your website Preferably a secure certificate A skin (or as they are called on other platforms, a
template) Some jscript integration knowhow
Facebook Account
One facebook account is responsible for creating and logging into the Developer API key configuration.
While an individual may own this, it should be someone whom you trust and who will have longevity with your company, or it should be a generic account set up for this specific purpose
After the site is created you may add additional administrators or content editors to the site. After the app is created your editors will do all the content editing on the CMS system so they don’t need facebook administrator privileges at all to change the app content
Facebook Page (This is no longer required!)
The content managed portion of your facebook site will be hosted on a Facebook APP (not page)
Create the page using the same account you are going to use for the API key. If the page is already created have them add that account as an admin.
It’s important not to duplicate content between your app and the facebook page. Carefully consider where you want information to go
Get enough friends to “like” the page that you get your own vanity URL for it.
Create a page here https://www.facebook.com/pages/create.php?ref=tsand be sure to select the correct category for your page.
Facebook APP
Think of the page as a presence for your new “app” which will be your content managed site
The app and Facebook site page are now completely separate.
You should specifically decide what content you want on facebook (timely, updated frequently etc) and what you want on the app (permanent, interactive, etc.).
The Developer API Key
The developer API key and the APP name are determined when you create a developer account in Facebook. Again – use the same facebook profile for this.
To create an API key go to:https://developers.facebook.com/
Click on Apps (far right) Click on Create New App Name your app (this name is how it will appear on your PAGE) App Namespace – use a short name which will be used for opengraph if you
implement it. DO NOT check web hosting Enter your password and Captcha. The system will text you a code or check
your credit card before proceeding
Fill in the form, and the system will generate a key. This key is used to authenticate your app with Facebook, for sharing comments, and for creating a more interactive experience
Where to find your app key
https://developers.facebook.com/apps
Why do you need it
Each page in your app needs the following code in its page header:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"><meta property="fb:admins" content=“<your login id for facebook here>"/><meta property="fb:app_id" content=“<your app id here>">
Example (app ID purposefully altered)
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"><meta property="fb:admins" content="lee.drake"/><meta property="fb:app_id" content=“1111111111">
Why the APP ID
It tells facebook that this page is owned by you and it’s a valid page to be displayed within the context of your app.
With that meta data you can start to use open-graph items like comments, likes and newsfeeds more easily.
It allows you to retrieve and customize the experience for the user with their info.
How do I create my app?
An app has the following characteristics: Each page must have the meta data for
the app id and login in the header. Each page must be formatted to fit the
“box” that facebook will frame your site within (2 standard sizes)
Within that box, you basically need a website that is self contained, or that – if it has a link – links to a new window.
How does a Content managed system help?
In a CMS we can just load up a skin or template that is the right size to fit the requirements for size
In a CMS we can put the meta data in as a parameter in the page definition – no coding required
In a CMS we can add/remove/modify any content without needing to know or understand facebook or it’s programming language
In a CMS we can use Facebooks code widgets to implement specific features
Skin design requirements
Besides typical design requirements for look and feel the skin should have: 520px width (there is an alternate width of 810px
for “wide applications), but 520 is preferred A fixed height at a specific number of PX or a
fluid height, with the awareness that you will lose the scroll bar on the right side of the screen
Some sort of content (either full page, or tabbed within the site)
Example from Eyes on the Future
What should I set my general settings to
General settings
Defining your page tabs
On the app page refer to the first page of your tabs as the main “tab page”, choose Edit Settings on your app and check “tabs”:
Defining mobile app page
You can either set the mobile app page to the same tab if it will work well with touch, otherwise create a custom formatted page for mobile and point to it. Choose App/Edit settings:
Set the “Canvas” for your app
This page is the default canvas for the app, where you will locate app events etc. if using opengraph:
That’s it!
Those are all the main settings for your app.
There is a lot more you can do once your app is set up with opengraph, showing the wall on your page, integrating likes and recommendations, and other cool things.
Once this basic setup is done, content on your pages, and other modifications to the tabs within your app are all handled inside your CMS
Additional CMS advantages
Have a registration form? Reformat it to fit the narrower screen and drop it into your app – now people can register from inside FB for your event or product
Have an ecommerce section? You can create link-out’s that will advertise a product on the FB app and link to a place to go buy them in a new window.
Additional CMS advantages
You can place duplicate modules from your website on the facebook CMS pages – so that when you change content in one place, you change it in both places
Integrate commenting and walls deeply into your application to enhance the social experience of your site.
Advanced topics
Adding like buttons Adding a wall to your facebook page Future add-ons – opengraph api
Likes
Likes can be added to any CMS page without an app, however if you have an app it adds the app id and associates the like’s with the app
There is a page to generate the code to insert: https://developers.facebook.com/docs/reference/plugins/li
ke/
Example code:<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=<yourappidhere>"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
Adding your page’s wall
You can show comments from your page or app within your apps other pages or on separate web pages inside your website – this improves customer engagement, just add the following jscript to a text/html element.
Facebook generates a channel.html file at this web page which must be uploaded to your site:
In the module or page header<script>window.fbAsyncInit = function () {FB.init({appId: ‘<your app id here>', // App IDchannelUrl: '//yourwebsitename/channel.html', // Channel File – must be uploaded from FBstatus: true, // check login statuscookie: true, // enable cookies to allow the server to access the sessionxfbml: true // parse XFBML});// Additional initialization code here};// Load the SDK Asynchronously(function (d) {var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) { return; } js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref);} (document));</script>
In the content where you want the wall<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-comments" data-href="http://yourwebsitehere.com" data-num-posts="3" data-width="300"> </div>
Words of wisdom
If you’re not a designer either buy a custom design from a store, or have someone customize one for you.
You must be at least basically familiar with html/jscript to be able to easily debug these
READ THE INSTRUCTIONS, while not CMS specific Facebook actually has pretty good instructions for how to do all this on their help pages
Have a professional available, and be prepared to reimburse them for their service, to assist with things like opengraph and advanced debugging
Get a secure certificate for your site – these days many of the people using your app will be using SSL – if you have a secure certificate you avoid having them be forced to authenticate the unsecure info every time they browse the app
OS-Cubed
Experts at Social Media integration on DotNetNuke platforms
Contact info: [email protected] Phone: 585-756-2444 Twitter @leedrake and @oscubed
