Facebook Integration - Wilson Man

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


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


● 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?



- 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/

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


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.


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.


- 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

http://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

http://apps.facebook.com/liferay-forums/message_boards/

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 confi guration

Liferay Portlet PropertiesMessage Boards portlet as an example



Liferay Portlet Sharing Settings


Example Usage

Future Development for Social NetworkingFuture Development for Social Networking

- Twitter Integration

- FlickrFlickr Integration with Image Gallery


Q & A

Facebook SSOLike button

Facebook ApplicationFuture Enhancements

Documents

Facebook Integration - Wilson Man