Creating a content managed facebook app

download Creating a content managed facebook app

of 26

  • date post

  • Category


  • view

  • download


Embed Size (px)


Getting your facebook app up and running with DNN

Transcript of Creating a content managed facebook app

  • 1.Creating a contentmanaged facebook appIntegrating a content managedwebsite with Facebook

2. What you will need to getstarted A facebook account, with either a cell phonenumber or a valid attached credit card. A facebook PAGE for your site (This is no longerrequired) A developer API Key A suitable content management platform (thisexample 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 3. Facebook Account One facebook account is responsible forcreating and logging into the Developer API keyconfiguration. While an individual may own this, it should besomeone whom you trust and who will havelongevity with your company, or it should be ageneric account set up for this specific purpose After the site is created you may add additionaladministrators or content editors to the site.After the app is created your editors will do allthe content editing on the CMS system so theydont need facebook administrator privileges atall to change the app content 4. Facebook Page (This is nolonger required!) The content managed portion of your facebook sitewill be hosted on a Facebook APP (not page) Create the page using the same account you aregoing to use for the API key. If the page is alreadycreated have them add that account as an admin. Its important not to duplicate content between yourapp and the facebook page. Carefully considerwhere you want information to go Get enough friends to like the page that you getyour own vanity URL for it. Create a page here be sure to select the correct category for yourpage. 5. Facebook APP Think of the page as a presence for yournew app which will be your contentmanaged site The app and Facebook site page are nowcompletely separate. You should specifically decide what contentyou want on facebook (timely, updatedfrequently etc) and what you want on theapp (permanent, interactive, etc.). 6. The Developer API Key The developer API key and the APP name are determined whenyou create a developer account in Facebook. Again use thesame facebook profile for this. To create an API key go to: 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 isused to authenticate your app with Facebook, for sharingcomments, and for creating a more interactive experience 7. Where to find your app key 8. Why do you need it Each page in your app needs the following code in itspage header:"/>"> 9. Example (app ID purposefullyaltered) 10. Why the APP ID It tells facebook that this page is owned byyou and its a valid page to be displayedwithin the context of your app. With that meta data you can start to useopen-graph items like comments, likes andnewsfeeds more easily. It allows you to retrieve and customize theexperience for the user with their info. 11. How do I create my app? An app has the followingcharacteristics: Each page must have the meta data forthe app id and login in the header. Each page must be formatted to fit thebox that facebook will frame your sitewithin (2 standard sizes) Within that box, you basically need awebsite that is self contained, or that if it has a link links to a new window. 12. How does a Content managedsystem help? In a CMS we can just load up a skin ortemplate that is the right size to fit therequirements for size In a CMS we can put the meta data in asa parameter in the page definition nocoding required In a CMS we can add/remove/modify anycontent without needing to know orunderstand facebook or its programminglanguage In a CMS we can use Facebooks codewidgets to implement specific features 13. Skin design requirements Besides typical design requirements forlook and feel the skin should have: 520px width (there is an alternate width of 810pxfor wide applications), but 520 is preferred A fixed height at a specific number of PX or afluid height, with the awareness that you will losethe scroll bar on the right side of the screen Some sort of content (either full page, or tabbedwithin the site) 14. Example from Eyes on the Future 15. What should I set my generalsettings to General settings 16. Defining your page tabs On the app page refer to the first page ofyour tabs as the main tab page, chooseEdit Settings on your app and check tabs: 17. Defining mobile app page You can either set the mobile app page tothe same tab if it will work well with touch,otherwise create a custom formatted pagefor mobile and point to it. Choose App/Editsettings: 18. Set the Canvas for your app This page is the default canvas forthe app, where you will locate appevents etc. if using opengraph: 19. Thats it! Those are all the main settings for yourapp. There is a lot more you can do once yourapp is set up with opengraph, showingthe wall on your page, integrating likesand recommendations, and other coolthings. Once this basic setup is done, content onyour pages, and other modifications tothe tabs within your app are all handledinside your CMS 20. Additional CMS advantages Have a registration form? Reformatit to fit the narrower screen anddrop it into your app now peoplecan register from inside FB for yourevent or product Have an ecommerce section? Youcan create link-outs that willadvertise a product on the FB appand link to a place to go buy themin a new window. 21. Additional CMS advantages You can place duplicate modulesfrom your website on the facebookCMS pages so that when youchange content in one place, youchange it in both places Integrate commenting and wallsdeeply into your application toenhance the social experience ofyour site. 22. Advanced topics Adding like buttons Adding a wall to your facebook page Future add-ons opengraph api 23. Likes Likes can be added to any CMS page without anapp, however if you have an app it adds theapp id and associates the likes with the app There is a page to generate the code to insert: Example code:

24. Adding your pages wall You can show comments from your page or app within your apps other pages or onseparate web pages inside your website this improves customer engagement, justadd the following jscript to a text/html element. Facebook generates a channel.html file at this web page which must be uploaded toyour site: In the module or page header In the content where you want the wall

25. Words of wisdom If youre not a designer either buy a custom design from astore, or have someone customize one for you. You must be at least basically familiar with html/jscript tobe able to easily debug these READ THE INSTRUCTIONS, while not CMS specificFacebook actually has pretty good instructions for how todo all this on their help pages Have a professional available, and be prepared toreimburse them for their service, to assist with things likeopengraph and advanced debugging Get a secure certificate for your site these days many ofthe people using your app will be using SSL if you havea secure certificate you avoid having them be forced toauthenticate the unsecure info every time they browse theapp 26. OS-Cubed Experts at Social Media integrationon DotNetNuke platforms Contact info: Phone: 585-756-2444 Twitter @leedrake and @oscubed