Facebook Developer Tutorials for Beginners - PART 1


Published on

The presentation is the first one in the series of presentations for developers wanting to work with Facebook API. This reflects my experiences with the API. Hope this helps others in some form.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Facebook is an online social networking service, founded in february 2004 by Mark Zuckerberg, Andrew McCollum, Dustin Moskovitz, Eduardo Saverin, Chris Hughes. Why the name facebook – It is named after a printed directory (known as facebook) consisting of individuals’ photographs and names given in American universities to students at the start of academic year to get to know each other.How it started – Mark also created an unofficial online face book in early 2004 for Harvard University at the website "thefacebook.com", the forerunner of the Facebook service. Later it expanded to other colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities before opening to high school students, and eventually to anyone aged 13 and over. Facebook now allows any users who declare themselves to be at least 13 years old to become registered users of the site
  • These stats are of august 2013:Total number of monthly active Facebook users -1,110,000,000(1.1 10 billion) usersTotal number of mobile Facebook users - 680,000,000 (680 million) users
  • Gender: Men – 42%Women – 58% as of august 2013
  • Average number of friends per facebook user – 130Average time spent on Facebook per visit – 20 minutesPercent of all Facebook users who log on in any given day – 50%
  • Reach – there are more than 1 billion users for facebook, the potential audience for any app built with facebook. This is the reason why more than 10 million apps and websites are built with facebook.Identity – Facebook encourages people to use their real identity while logging in, avoiding the chance of throw away account or fake accounts.Distribution – Building the app with facebook makes it to appear on popular Facebook channels like news feed, timeline and App Center, giving it the high visibility it needs to be discovered by people who want to use it.Tools – Javascript test console, Graphapi explorer etc.,
  • A Facebook Page, sometimes referred to as a "Fan Page," is a single page that you can create off of the Facebook.com domain for anything you want...a particular subject you like: a celebrity, a business or product.Celebrity or business use the facebook pages to engage with their fans.These days, everyone and everything important, famous or notable has a Facebook PageFacebook Pages are important because it can get unlimited fans because of the massive facebook users and also an awesome way to get new people to discover whatever it is you have to offer.How it works: Whenever you like the page you will become the fan for that page, then you will get the update on your newsfeed whatever the public posts that are made by the page.
  • Promoted posts – when you post something on a Facebook Page, it will only reach a fraction of your fans, because Facebook got greedy and started a new "Promoted Posts" feature where you have to pay to have your posts reach more fans. A single promoted post costs a minimum of $5, lasts 3 days, and can reach either current fans or fans + their friends.Pin to top – It will cement that post to the top of your page, and it's a great option if you want to call attention to something specific.Page likes showcase – This shows the list of other pages you have liked(they might be the other pages that you own or your friends)Vanityurl -  It's a short, easy-to-remember URL (like "facebook.com/mypagename"), unlike the default Page URL that looks something like "https://www.facebook.com/pages/My-best-restaurant-for-testing-FB/269266986537144". Promote page – To promote the page it provides the option of inviting your friends.Administration panel – It shows Notifications, Messages, New Likes, Insights
  • Page tab allows totally customizable tab to added to facebook page.Generally we see big corporationscreating page tabs within facebook pages to showcase their own brandings(dell). Or they can be used to showcase their promotions(cococola).
  • A canvas page allows you to display an external website within the facebook environment. Canvas pages are provided with the unique url that is prefixed with your app name space that is configured in your facebook app.What is the need for canvas pages? – Recent studies revealed that the bounce rate is high incase of websites going oustide of facebookappplication and also to target the massive users of the faceboook we can use canvas pages.Canvas pages are shown in the facebook app center to promote your app and to reach the facebook users.
  • Facebook also provides the social channels for promoting your canvas page. Social channels are the ways for people to share with their friends.Social channels include the news feed, requests or automatic channels like bookmarks, notifications, search etc., Automatic channels for the canvas page are taken care by facebook itself.Canvas page – facebook chrome is the top navigation bar which contains facebook home link, notifications etc., canvas section is where the external website loads, actually its an iframe. right side bar contains components such as the bookmarks, ticker and ads.
  • If you already have a website, facebook platform enables you to make your website more social. How can we achieve this, by using the social plugins to add social features and dialogs to share the content.Later we will see the examplesFirst we will see the different types of social plugins that are available.
  • Like Button: It  is a simple plugin that lets people quickly share content on Facebook. It creates a connection in the graph between the content and the person who clicks the button. Displays stories  on that person's timeline and their friends' news feeds and itself displays a count of all the likes and shares.Send Button: lets users easily send content to their friends. People will have the option to send your URL in a message to their Facebook friends, to the group wall of one of their Facebook groups and as an email to any email address.Follow Button: The Follow button lets other people follow your public updates on Facebook.
  • Comments: enables people to comment on your site. Features include moderation tools and distribution.
  • Share Dialog: It enables people can share links on their timeline, in groups, or to their friends via a Facebook Message.Activity Feed: It displays the most interesting recent activity taking place on your site. If you set the recommendations param to true, the plugin is split in half, showing friends activity in the top half, and recommendations in the bottom half.
  • Recommendations Box: shows personalized recommendations to people using your app or website. Since the content is hosted by Facebook, the plugin can display personalized recommendations whether or not people viewing them have logged into your site. 
  • Recommendations Bar: The recommendations bar lets people like content, get recommendations and share what they’re reading with their friends.The recommendations bar is always docked to the lower right or left of the screen.
  • Like Box: enables facebook page owners to attract and gain likes from their own website.See how many people like the Page, and which of their friends like it, too.Read recent posts from the Page.Like the Page with one click, without needing to visit the Page.
  • Login Button: When an app or website displays the login button, it provides people a way to log in and also shows the profile pictures of their friends who have already logged in for the app or site.Registration: Lets people easily sign up for your website with their Facebook account. The registration plugin gives you the flexibility to ask for additional information that's not available through the Facebook API (for example, someone's favorite movie). The plugin also lets people who do not have a Facebook account — or do not wish to sign up for your site using Facebook — to use the same form as those who are connecting with Facebook. This eliminates the need for you to provide two separate login experiences.
  • Face Pile: The Facepileplugin displays the Facebook profile pictures of people who have connected with your Facebook page via a global or custom action.Embedded Posts: Embedded Posts are a way to put public posts - by a Page or a person on Facebook - into the content of your web site or web page. The embedded post will show any media attached to it, as well as the number of likes, shares, and comments that the post has. 
  • Now we will see the different types of dialogs that are available.
  • Feed Dialog: It prompts a person to publish an individual story to a profile's timeline, that is to share the story. Your app can also publish directly to a profile's timeline without interaction on the part of people using your app.Send Dialog: Lets people privately send content to specific friends. They'll have the option to privately share a link as a Facebook message, group post or email.
  • Friends Dialog: Lets your app prompt someone to add a friend. If the friend had previously sent a request to this person, then the dialog allows them to confirm that friend request.Pay Dialog: It prompts users to initiate Facebook Credits orders. Developers integrating this dialog can enable their users to pay for digital goods and to earn virtual currency.
  • Login Dialog: It allows someone to log in to an app using Facebook.Add page Dialog: Itprompts a person to add an app to a Facebook Page that they admin. This does not require any extended permissions.
  • Request Dialog: It can be used to send a Request directly from one person to another or display a multi-friend selector dialog, allowing the sender to select multiple recipients.
  • Eventbrite provides online resources for event management, including registration, ticket sales and event promotion. Its motive is to make as easy as possible for people to host, discover and attend events.EventBrite integrated the Facebook Events API, Facebook Login and Social Plugins, including the Like Button and the Activity Feed to help users learn which events their friends were attending. As a result Gross ticket sales per quarter doubled after Eventbrite integrated Facebook Login.Facebook also became the #1 driver of traffic to the Eventbrite website.
  • Facebook Developer Tutorials for Beginners - PART 1

    1. 1. Facebook
    2. 2. Agenda  History of facebook  Facebook statistics  Why build with facebook  Applications  Case study
    3. 3.  History of facebook  Facebook statistics  Why build with facebook  Applications  Case study
    4. 4. History  Founded in February 2004 by Mark Zuckerberg Eduardo Saverin Andrew McCollum Dustin Moskovitz Chris Hughes
    5. 5.  History of facebook  Facebook statistics  Why build with facebook  Applications  Case study
    6. 6. Facebook stats 1,110,000,000 users 680,000,000 users
    7. 7. Facebook stats 42% 58%
    8. 8. Facebook stats Approximately 130 friends per user User spends 20 minutes per visit 50% users login in a day
    9. 9.  History of facebook  Facebook statistics  Why build with facebook  Applications  Case study
    10. 10. Why Build with Facebook?  Reach  identity  distribution and tools.
    11. 11.  History of facebook  Facebook statistics  Why build with facebook  Applications  Case study
    12. 12. Applications  Pages  Page tabs  Canvas  Websites (using Social plugins and dialogs)
    13. 13. Pages  Also referred as fan page  To promote  Celebrity  Business  Product etc.,  It can get unlimited fans  Cocacola page
    14. 14. Page Categories  Local business or place  Company, organization or institution  Brand or product  Artist, band or public figure  Entertainment  Cause or community
    15. 15. Page Features  Promoted posts  Pin to top  Page likes showcase  Vanity url  My best restaurant for testing FB  Charity House  Promote page  Administration panel
    16. 16. Page tab  To create a customizable tab in a page  Totally customized brand page  Some page tabs are:  Coca cola stories tab  Dell store locator
    17. 17. Canvas  Allows you to display an external website within the facebook application.  Provides a unique url prefixed with http://apps.facebook.com/(appnamespace)  To target the massive userbase of facebook  Canvas pages are shown in the facebook app center
    18. 18. Canvas  It can be also promoted using social channels.  Canvas page is divided as  Facebook chrome  Canvas section  Right side bar  Some canvas pages are:  Adroitent  Friend smash
    19. 19. Websites  Socialize your website  How –  social plugins  dialogs  Example1  Example2
    20. 20. Social plugins  Like button  Send button  Follow  Comments  Share dialog  Activity feed  Recommendations box  Recommendations bar  Like box  Login button  Registration  Facepile  Embedded posts
    21. 21. Like Button Send Button Follow Button
    22. 22. Comments
    23. 23. Share Dialog Activity Feed
    24. 24. Recommendations Box
    25. 25. Recommendations Bar
    26. 26. Like Box
    27. 27. Login Button Registration
    28. 28. FacePile Embedded Posts
    29. 29. Websites  Socialize your website  How –  social plugins  dialogs  Example1  Example2
    30. 30. Dialogs  Feed dialog  Send dialog  Friends dialog  Pay dialog  Login dialog  Add page dialog  Requests dialog
    31. 31. Feed Dialog Send Dialog
    32. 32. Friends Dialog Pay Dialog
    33. 33. Login Dialog Add Page Dialog
    34. 34. Requests Dialog
    35. 35. Websites  Socialize your website  How –  social plugins  dialogs  Example1  Example2
    36. 36.  History of facebook  Facebook statistics  Why build with facebook  Applications  Case study
    37. 37. Case study  EventBrite provides online resources for event management.  It integrated the facebook login, social plugins and dialogs into the website.  Gross ticket sales per quarter doubled after Eventbrite integrated Facebook Login  Facebook is the #1 driver of traffic to the Eventbrite website  Link: EventBrite