facebook integration - wilson man
TRANSCRIPT
Facebook IntegrationFacebook Integration
Wilson ManWilson Man
Agenda
1. Facebook SSO1. Facebook SSO2. Facebook “Like” Button2. Facebook “Like” Button3. Facebook App using Portlet3. Facebook App using Portlet4. Roadmap for Social Network Integrations4. Roadmap for Social Network Integrations
Facebook Single Sign-OnFacebook Single Sign-On
● Liferay has added an additional Single Sign-On option using Facebook Connect
● User can use their Facebook credentials to sign-in to your portal
User can create an account using data pulled from Facebook after user has signed-in.
Facebook SSO DemoFacebook SSO Demo
Facebook SSO - Setup
Facebook SSO - SetupFacebook SSO - Setup
On Facebook Connect Website:- Enter the Connect URL (must start with http://)- Enter the Base URL
- for development, you can enter localhost and port number.
Facebook SSO – SetupFacebook SSO – Setup
Facebook SSO – SetupFacebook SSO – Setup
In Liferay Control Panel:Under your community's Settings page- Go to the Authentication section
- Check the Enable checkbox- Enter your Application ID (not app key)- Enter your Application Secret- Update the Redirect URL to match
Facebook SSO – SetupFacebook SSO – Setup
● In the Signup Portlet, In the Signup Portlet, the Facebook link the Facebook link should appear.should appear.
● Clicking on it will start Clicking on it will start the Facebook SSO the Facebook SSO process.process.
The Facebook SSO Use Case:
1. User enters their credentials on FB2. Facebook authenticates and redirects user to
Liferay Portal with proper tokens3. Liferay asks FB for user's email address4. Liferay then searches database to fi nd user
record
What if no user record found with given email?
Facebook SSO – SetupFacebook SSO – Setup
Facebook SSO – SetupFacebook SSO – Setup
- Liferay Portal will ask user whether they would like to add an account.- If user clicks the Add Account button, Liferay Portal will ask FB for the user's info listed below and add user.
1. Name (fi rst and last)2. Gender3. Email Address (again)4. and whether the FB account is validated
Facebook SSO – Future EnhancementsFacebook SSO – Future Enhancements
- Allow user to link their FB account to existing portal account using IDs and not email addresses- Allow admin to choose (or prioritize) whether SSO should use email address matching, or linking FB user ID to portal user ID- Give Admin more control on what Liferay Portal retrieves from FB for user account creation (with user's permission)- Open up the Facebook Connect Util for developers to make additional calls to access Facebook's Graph API
Facebook SSO – NotesFacebook SSO – Notes
- Currently, this SSO feature interfaces with FB via their OAuth 2.0 web redirect implementation.
- There is also a Facebook-connect portlet plugin in incubation that uses Facebook's JavaScript SDK which is very easy to use and has additional benefi ts.
- For more information, you can go here:http://developers.facebook.com/docs/authentication/
Facebook Like ButtonFacebook Like Button
- Facebook Like Button allows your users to share your content with their friends on Facebook
- The Like button is a front-end component using HTML and JavaScript
Facebook Like Button DemoFacebook Like Button Demo
Facebook Like ButtonFacebook Like Button
How to add Facebook Like Buttons to your site?
1. Add a snippet of HTML and Javascript code provided by FB to your Liferay theme.
a. This either goes right after the start <body> tag or right before the end </body> tag depending on the version you prefer.
2. Then add the <fb:like> tag to your site.
Facebook Like ButtonFacebook Like Button
How to add Facebook Like Buttons to your site?
1. Add a snippet of HTML and Javascript code provided by FB to your Liferay theme.
a. This either goes right after the start <body> tag or right before the end </body> tag depending on the version you prefer.
2. Then add the <fb:like> tag to your site.
Facebook Like ButtonFacebook Like Button
- If you do not supply the href attribute to your <fb:like /> tag, it will just use the current page URL the button is displayed in.
- You can supply an href attribute using a renderURL like this:<fb:like href="<fb:like href="
<portlet:renderURL><portlet:renderURL><portlet:param name=<portlet:param name="struts_action""struts_action" value= value="/message_boards/view_message""/message_boards/view_message" /> /><portlet:param name=<portlet:param name="messageId""messageId" value="<%= String.valueOf(thread.getRootMessageId()) %>" /> value="<%= String.valueOf(thread.getRootMessageId()) %>" />
</portlet:renderURL>" show_faces=</portlet:renderURL>" show_faces="false""false">></fb:like></fb:like>
- For more information, you can go here:- For more information, you can go here:http://developers.facebook.com/docs/reference/plugins/likehttp://developers.facebook.com/docs/reference/plugins/like
Facebook App Using PortletFacebook App Using Portlet
- You can easily create a Facebook App using a Liferay portlet
- Facebook App integration was fi rst introduced in Liferay 5.0.0 for Message Boards
- It is now available for other portlets as well (version 6.0.5 GA)
- The Liferay Message Boards is a portlet that can be exposed OOTB as a Facebook Application
http://apps.facebook.com/liferay-forums/message_boards/http://apps.facebook.com/liferay-forums/message_boards/
Facebook App DemoFacebook App Demo
Facebook App - SetupFacebook App - Setup
- Confi gure your app settings on Facebook website
- In liferay-portlet.xml fi le, set the facebook-integration attribute to fbml for your portlet entry
- Confi gure portlet's sharing settings
- In your JSP, you can check whether facebook is accessing your portlet by calling themeDisplay's method: isFacebook()
- If isFacebook(), then you can use fbml + html
Facebook App - SetupFacebook App - Setup
Facebook confi guration
Liferay Portlet PropertiesMessage Boards portlet as an example
Facebook App - SetupFacebook App - Setup
Facebook App - SetupFacebook App - Setup
Liferay Portlet Sharing Settings
Facebook App - SetupFacebook App - Setup
Example Usage
Future Development for Social NetworkingFuture Development for Social Networking
- Twitter Integration
- FlickrFlickr Integration with Image Gallery
Facebook App - SetupFacebook App - Setup
Q & A
Facebook SSOLike button
Facebook ApplicationFuture Enhancements