FBML for fan pages by Heather Boone


Published on

from the AIGA Hampton Roads Shameless Self-Promotion panel series

Published in: Business, Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

FBML for fan pages by Heather Boone

  1. 1. Hi.I’m Heather.I design and develop web pages.Some of those web pages live insideof Facebook fan pages.
  2. 2. Fan pagesallow you to publish custom contentby creating a Facebook app.
  3. 3. This appgenerates a coupon for the latest saleand offers ways for the user to sharethe “ticket” on Facebook and Twitter.
  4. 4. This appshowcases weekly promotions.
  5. 5. A gateis a common Facebook app.
  6. 6. This appis for charity awareness.
  7. 7. This appis for fundraising.
  8. 8. This appis for a contest* @carters.*consult an attorney
  9. 9. FBMLor Facebook Markup Language…
  10. 10. FBMLis deprecated and this is a really good thing.
  11. 11. iFrame appsare now required.
  12. 12. iFramesallow you to embed an externalWeb page in your fan page.
  13. 13. Hostingfor an iFrame app is handled by the developer.
  14. 14. An SSLcertificate will be required for all iFramedFacebook content in October.
  15. 15. iFrame appsuse standard HTML, CSS, and JavaScript like any otherWeb page.
  16. 16. This is goodbecause it offers you more control of the content, pagechanges are immediate and you can use best practicesas you would for other development.
  17. 17. 520pxis the width of Facebook’s iFrame.
  18. 18. Installthe developer app @ developers.facebook.com.This is where you will go to create apps and edityour app settings.
  19. 19. Developers is also where you can read documentation about the Facebook API and SDK.
  20. 20. Create an appby choosing the “+ Create New App” button.
  21. 21. Nameyour app and agree to Facebook’s Terms.
  22. 22. Setupyour app’s basic information.
  23. 23. Integrateyour app into Facebook by choosing “On Facebook” fromthe left navigation and input canvas URLs for your page.
  24. 24. Chooseauto-resize* (unless you like scrollbars) andinput page URLs.*You will need some JavaScript for this feature to work on your page.
  25. 25. Add the appto your page by choosing “View App Profile Page” fromthe navigation.
  26. 26. Add the appto your page by choosing “Add to My Page” from thenavigation and then select the appropriate page fromthe pop up window.
  27. 27. View appon your page by navigating to the page.
  28. 28. Free is good.If this development stuff just isn’t for you, andyou want a custom app, check out ShortStack.They allow small fan pages (under 2,000 likes)to publish custom tabs without all the hassle ofhosting and development.
  29. 29. Thanks.Have fun building your own apps.There are some great resourcesand tutorials online. HyperArtsgot me up to speed.Hurry, now! And, if Facebookdoesn’t survive November,Google+ for Business is lookingquite promising.http://bit.ly/oQSfuDhboone@mac.com.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.