The document summarizes Facebook's APIs and tools for integrating Facebook features into other websites and applications. It provides an overview of Facebook's history and platform, describes key APIs like the Graph API and FQL, and covers authentication methods, social plugins, and tools for user engagement like the Like button and comments. It also discusses Open Graph for integrating web pages and recommends using Facebook's APIs to create personalized social experiences on mobile and the web.

1. Facebook API Build the social and personalized web Desislava Hinkova, Mohammod AshifAkhtar Peash, Nur Al-Huda Hamdan , Simona Dakova, Vlatko Lukarov Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/11

2. Overview History Interesting facts and showcases Core Facebook API & SDKs Social Plugins & Single Sign On Open Graph Protocol Mobile Web Demo Video Summary Web Technologies

3. History 2005 - Facebook officially started 24 th May 2007 - Facebook Platform launched Framework for software developers Create applications that interact with core Facebook features Offer an engaging, personalized experience for the users Web Technologies

4. Some interesting facts More than one million developers from more than 180 countries More than 550,000 active applications More than one million websites have integrated with Facebook Platform More than 150 million people engage with Facebook on external websites every month Web Technologies

5. Showcases Web Technologies

6. Core Facebook API Facebook Markup Language (FBML) REST API / Graph API Facebook Query Language (FQL) Facebook JavaScript to enrich the user experience Set of client programming libraries for desktop, web and mobile application development Web Technologies

7. FBML Fancy HTML with fb-prefix Examples Turn into an img tag for the specified user's or Facebook Page's profile picture <fb:profile-pic uid=&quot;12345&quot; width=&quot;32&quot; height=&quot;32&quot; linked=&quot;true&quot; /> Emulate the look of a wall environment <fb:wall> <fb:wallpost uid=&quot;12345&quot;> This is a wall post from uid 12345 </fb:wallpost> </fb:wall> Web Technologies

8. Old! REST API Interact with Facebook web site programmatically via HTTP requests Wrappers for more sophisticated FQL interactions with the Facebook back end https://api.facebook.com/method/ method_name ? access_token= oauth_access_token & arg0=value0& arg1=value1 Example: https://api.facebook.com/method/users.getInfo?uids=4&fields=name&access_token=... Web Technologies

9. Graph API (since April 2010) Replaces the old REST API Turns into primary server-side API Both built on the same foundation and infrastructure Simple, consistent view of the Facebook social graph Web Technologies

10. Social Graph A term coined by Mark Zuckerberg The global mapping of everybody and how they are related Set of objects and connection https://graph.facebook.com/ID - access the properties of an object https://graph.facebook.com/ID/CONNECTION_TYPE - examine the connections between objects Response - JSON object Examples https://graph.facebook.com/19292868552 https://graph.facebook.com/me/ friends ?access_token=... Web Technologies

11. Authentication Uses the OAuth 2.0 protocol for authentication and authorization Applications interact with the Graph API on behalf of the users, their credentials stay on Facebook side Via user's ID access his general information For other parts of the user's profile - extended permissions Web Technologies

12. Facebook Query Language (FQL) Enables you to use a SQL-style interface to query the data exposed by the Graph API Advanced features not available in the Graph API, including batching multiple queries into a single call Example: https://api.facebook.com/method/fql.query?query=QUERY „ format“-property: specify response type - XML or JSON QUERY = SELECT name FROM user WHERE uid = me() Web Technologies

13. FBJS (Facebook JavaScript) Facebook's solution for developers to use JavaScript in their FBML applications Not recommended for new developers INSTEAD: make use of iframes, the JavaScript SDK and social plugins for client-side integration with Facebook services Web Technologies

14. SDKs JavaScript SDK PHP SDK Python SDK iOS SDK for iPhone and iPad Android SDK Blackberry SDK Web Technologies

15. Social plugins Embeddable social features, integrated in the HTML code of the personal site Varieties of social plugins in the FB API: Like button Recommendations Login Button Comments Activity Feed Like Box Facepile Live Stream Web Technologies

16. Like Button Lets a user share your content with friends on Facebook The liked page/content linked to the person’s interests in his FB profile Two possible implementations XFBML (more dynamic and versatile) and iFrame Requires the Facebook Javascirpt SDK! Web Technologies

17. Comments Enables your users to comment on your site's content Share the comment on Facebook on the Wall and in friends' streams Example: <div id=&quot;fb-root&quot;></div> <script src=&quot;http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1&quot;></script> <fb:comments numposts=&quot;5&quot; width=&quot;300&quot; publish_feed=&quot;true&quot;></fb:comments> Web Technologies

18. Login Button Shows profile pictures of the user's friends signed up for the site in addition to a login button Example: <div id=&quot;fb-root&quot;></div> <script src=&quot;http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1&quot;></script> <fb:login-button show-faces=&quot;true&quot; width=&quot;200&quot; max-rows=&quot;2&quot;></fb:login-button> Web Technologies

19. Single Sign On (Facebook Connect) Remove the registration process for your site User logged in to your site as long as is logged in to Facebook Example: <div id=&quot;fb-root&quot;></div> <script src=&quot;http://connect.facebook.net/en_US/all.js&quot;></script> <script> FB.init({appId: ' your app id ', status: true, cookie: true, xfbml: true}); FB.Event.subscribe('auth.sessionChange', function(response) { if (response.session) { // A user has logged in, new cookie saved } else { // The user has logged out, and the cookie has been cleared } }); </script> Web Technologies

20. Open Graph Protocol Enables to integrate your web pages into the social graph Designed for web pages representing real-world things Including Open Graph tags on your Web page, makes your page equivalent to a Facebook Page What to do? add Open Graph protocol <meta> tags and the Like button Web Technologies

21. Mobile Web same authorization endpoints as normal Web applications https://graph.facebook.com/oauth/authorize? client_id=...& redirect_uri=http://www.example.com/callback& display= wap/touch Web Technologies

22. Summary Facebook platform Offers many APIs and tools for integrating Facebook into your website Creates unique user experience by integrating the social graph within your application Available for web, desktop and mobile development Web Technologies

23. Learn to do it the right way! Web Technologies

24. Literature Books Graham, W. , 2008, Facebook API Developers Guide, Apress Links http://developers.facebook.com/docs/ 1 Introduction