0
Facebook Connect Future Universal Login?
Getting tired in form registration?
One Time Registration for All Sites A Universal Identity Open ID MySpace ID Google ID Facebook  Connect Who will become th...
What Exactly is FB Connect? <ul><li>Integrate Facebook Platform to your site. </li></ul><ul><li>Seamlessly &quot;connect&q...
User Your Site Facebook 1. User request 2. Your Site’s API request 4. Your Site’s response 3. API callback from Facebook 5...
 
What Can We Get From FB Connect? <ul><li>FB Connect is in coherence with FB privacy. </li></ul><ul><li>FB Connect use the ...
What Can We Get From FB Connect? <ul><li>External sites may retrieve these data: </li></ul><ul><ul><li>User’s avatar, full...
FB Connect with Sites <ul><li>There are several plugins for CMS: </li></ul><ul><ul><li>Movable Type  </li></ul></ul><ul><u...
FB Connect with Widgets <ul><li>There are several social media apps that utilize FB Connect: </li></ul><ul><ul><li>JS-Kit ...
 
Setting Up - Facebook http:// developers.facebook.com /
Setting Up - Facebook
Setting Up - Facebook
Setting Up – Server Files <ul><li>Cross domain policy file (xd_receiver.htm) </li></ul><ul><ul><ul><li><!DOCTYPE html PUBL...
Setting Up – Server Files <ul><li>File to connect to Facebook (for ex: index.php) </li></ul><ul><ul><li>Header: <html xmln...
Setting Up – Server Files <ul><li>In index.php, you can write any XFBML tags (Facebook Markup Language for external sites)...
Facebook Connect Installation for Wordpress
How To? <ul><li>Download Sociable latest version plugin.  ( http://www.e-aula.com/download/fbconnect_1_2_1.zip )  </li></u...
Setting Up
Setting Up
Setting Up
Theming <ul><li>Copy all these files from  /wp-content/plugins/fbconnect  to your theme files, ex:  /wp-content/themes/ [y...
myhome.php userprofile.php usercomments.php
fbconnect_widget.php
community.php
invitefriends.php
Facebook Connect Ideas
FB Connect Ideas For You <ul><li>Make your personal blogs more social. </li></ul><ul><li>Microblogging with FB Connect. </...
 
http://www.temenku.com
http://www.woopets.com
http://www.bewareofthedoghouse.com
http://www.perfectintimacy.com
 
 
Thank You
Upcoming SlideShare
Loading in...5
×

Facebook Connect Integration

3,861

Published on

Integrate Facebook Platform to your site.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,861
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
55
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Facebook Connect Integration"

  1. 1. Facebook Connect Future Universal Login?
  2. 2. Getting tired in form registration?
  3. 3. One Time Registration for All Sites A Universal Identity Open ID MySpace ID Google ID Facebook Connect Who will become the winner?
  4. 4. What Exactly is FB Connect? <ul><li>Integrate Facebook Platform to your site. </li></ul><ul><li>Seamlessly &quot;connect&quot; users’ Facebook account and information with your site. </li></ul><ul><li>Connect and find users’ friends who also use your site. </li></ul><ul><li>Share information and actions on your site with users’ friends on Facebook. </li></ul>
  5. 5. User Your Site Facebook 1. User request 2. Your Site’s API request 4. Your Site’s response 3. API callback from Facebook 5. JS API call to Facebook 6. JS API response from Facebook
  6. 7. What Can We Get From FB Connect? <ul><li>FB Connect is in coherence with FB privacy. </li></ul><ul><li>FB Connect use the same FB API that previously used by FB applications. </li></ul><ul><li>Publish to FB status feed, giving viral effect. </li></ul><ul><li>Comment integration. ( http://developers.facebook.com/news.php?blog=1&story=198 ) </li></ul><ul><li>Photo Sharing. Currently used for iLife’09. ( http://developers.facebook.com/news.php?blog=1&story=188 ) </li></ul>
  7. 8. What Can We Get From FB Connect? <ul><li>External sites may retrieve these data: </li></ul><ul><ul><li>User’s avatar, full name, user’s friends who are also connected. </li></ul></ul><ul><ul><li>Invitation to user’s friends. </li></ul></ul><ul><ul><li>User’s photos, events, groups. </li></ul></ul><ul><ul><li>Comment box. </li></ul></ul><ul><li>External sites may not retrieve these data: </li></ul><ul><ul><li>User’s detailed demographic. </li></ul></ul><ul><ul><li>User’s email address. </li></ul></ul>
  8. 9. FB Connect with Sites <ul><li>There are several plugins for CMS: </li></ul><ul><ul><li>Movable Type </li></ul></ul><ul><ul><li>( http://plugins.movabletype.org/facebook-connect-commenters/ ) </li></ul></ul><ul><ul><li>Wordpress </li></ul></ul><ul><ul><li>( http://www.sociable.es/facebook-connect/ ) </li></ul></ul><ul><ul><li>Drupal – on development </li></ul></ul><ul><ul><li>( http:// www.drupalforfacebook.org / ) </li></ul></ul><ul><ul><li>Joomla </li></ul></ul><ul><ul><li>( http://www.cmsmarket.com/extensions-directory/listings/Social+Networking/Community/JFBConnect ) </li></ul></ul><ul><ul><li>MediaWiki ( http://wiki.developers.facebook.com/index.php/Facebook_Connect_Plugin_for_MediaWiki ) </li></ul></ul><ul><ul><li>VBulletin ( http://www.vbulletin.org/forum/showthread.php?t=198499 ) </li></ul></ul>
  9. 10. FB Connect with Widgets <ul><li>There are several social media apps that utilize FB Connect: </li></ul><ul><ul><li>JS-Kit </li></ul></ul><ul><ul><li>( http://blog.js-kit.com/2008/12/16/js-kit-wraps-up-the-year-with-killer-new-features/ ) </li></ul></ul><ul><ul><li>Disqus </li></ul></ul><ul><ul><li>( http://blog.disqus.net/2008/12/16/disqus-and-facebook-connect/ ) </li></ul></ul><ul><li>Widget developer for 3 rd party sites may not contact Facebook directly. </li></ul><ul><li>Flex AS3 class for FB Connect – on development ( http:// github.com/pierot/fbflashbridge/tree/master ) </li></ul>
  10. 12. Setting Up - Facebook http:// developers.facebook.com /
  11. 13. Setting Up - Facebook
  12. 14. Setting Up - Facebook
  13. 15. Setting Up – Server Files <ul><li>Cross domain policy file (xd_receiver.htm) </li></ul><ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul></ul></ul><ul><ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; > </li></ul></ul></ul><ul><ul><ul><li><body> </li></ul></ul></ul><ul><ul><ul><li><script src=&quot;http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js&quot; type=&quot;text/javascript&quot;></script> </li></ul></ul></ul><ul><ul><ul><li></body> </li></ul></ul></ul><ul><ul><ul><li></html> </li></ul></ul></ul>
  14. 16. Setting Up – Server Files <ul><li>File to connect to Facebook (for ex: index.php) </li></ul><ul><ul><li>Header: <html xmlns:fb=&quot;http://www.facebook.com/2008/fbml&quot; xmlns:fb=&quot;http://www.facebook.com/2008/fbml&quot;> </li></ul></ul><ul><ul><li>Footer: <script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php' type='text/javascript'></script> <script type='text/javascript'> FB_RequireFeatures([&quot;XFBML&quot;], function(){FB.Facebook.init(“ API Key &quot;, “ [domain] /xd_receiver.htm&quot;);}); </script> </li></ul></ul>
  15. 17. Setting Up – Server Files <ul><li>In index.php, you can write any XFBML tags (Facebook Markup Language for external sites). </li></ul><ul><li>More info: http:// wiki.developers.facebook.com/index.php/XFBML </li></ul><ul><li>Demo: http://media- ide.bajingloncat.com/testfacebookconnect/test.php </li></ul>
  16. 18. Facebook Connect Installation for Wordpress
  17. 19. How To? <ul><li>Download Sociable latest version plugin. ( http://www.e-aula.com/download/fbconnect_1_2_1.zip ) </li></ul><ul><li>Copy to your /wp-content/plugins . </li></ul><ul><li>Activate plugin. </li></ul><ul><li>Facebook Connector setting. </li></ul><ul><li>Register a Facebook Developer account. ( http:// www.facebook.com /developers/ ) </li></ul>
  18. 20. Setting Up
  19. 21. Setting Up
  20. 22. Setting Up
  21. 23. Theming <ul><li>Copy all these files from /wp-content/plugins/fbconnect to your theme files, ex: /wp-content/themes/ [your theme]/ </li></ul><ul><ul><li>myhome.php </li></ul></ul><ul><ul><li>userprofile.php </li></ul></ul><ul><ul><li>usercomments.php </li></ul></ul><ul><ul><li>fbconnect_widget.php </li></ul></ul><ul><ul><li>community.php </li></ul></ul><ul><ul><li>invitefriends.php </li></ul></ul><ul><ul><li>fbconnect.css </li></ul></ul><ul><li>CSS and XHTML them up!! </li></ul>
  22. 24. myhome.php userprofile.php usercomments.php
  23. 25. fbconnect_widget.php
  24. 26. community.php
  25. 27. invitefriends.php
  26. 28. Facebook Connect Ideas
  27. 29. FB Connect Ideas For You <ul><li>Make your personal blogs more social. </li></ul><ul><li>Microblogging with FB Connect. </li></ul><ul><li>Brand microsite. </li></ul><ul><li>Hotspot WiFi login. </li></ul><ul><li>FB Connect & Google Maps (realty, classified, neighborhood chat). </li></ul><ul><li>Online games with FB Connect. </li></ul><ul><li>Live chat. </li></ul><ul><li>iPhone Facebook Connect. </li></ul><ul><li>Etc. </li></ul>
  28. 31. http://www.temenku.com
  29. 32. http://www.woopets.com
  30. 33. http://www.bewareofthedoghouse.com
  31. 34. http://www.perfectintimacy.com
  32. 37. Thank You
  1. A particular slide catching your eye?

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

×