Facebook Integration Facebook Integration

electricianpathInternet και Εφαρμογές Web

13 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

93 εμφανίσεις

Facebook Integration
Facebook Integration
Wilson Man
Wilson Man
Agenda
1. Facebook SSO
1. Facebook SSO
2. Facebook Like Button
2. Facebook Like Button
3. Facebook App using Portlet
3. Facebook App using Portlet
4. Roadmap for Social Network Integrations
4. Roadmap for Social Network Integrations
Facebook Single Sign-On
Facebook 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 Demo
Facebook SSO Demo
Facebook SSO - Setup
Facebook SSO - Setup
Facebook 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  Setup
Facebook SSO  Setup
Facebook SSO  Setup
Facebook 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  Setup
Facebook 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 FB
2. Facebook authenticates and redirects user to
Liferay Portal with proper tokens
3. Liferay asks FB for user's email address
4. Liferay then searches database to fi nd user
record
What if no user record found with given email?
Facebook SSO  Setup
Facebook SSO  Setup
Facebook SSO  Setup
Facebook 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. Gender
3. Email Address (again)
4. and whether the FB account is validated
Facebook SSO  Future Enhancements
Facebook 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  Notes
Facebook 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 Button
Facebook 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 Demo
Facebook Like Button Demo
Facebook Like Button
Facebook 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 Button
Facebook 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 Button
Facebook 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/like
http://developers.facebook.com/docs/reference/plugins/like
Facebook App Using Portlet
Facebook 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 Demo
Facebook App Demo
Facebook App - Setup
Facebook 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 - Setup
Facebook App - Setup
Facebook confi guration
Liferay Portlet Properties
Message Boards
portlet as an example
Facebook App - Setup
Facebook App - Setup
Facebook App - Setup
Facebook App - Setup
Liferay Portlet Sharing Settings
Facebook App - Setup
Facebook App - Setup
Example Usage
Future Development for Social Networking
Future Development for Social Networking
- Twitter Integration
-
Flickr
Flickr
Integration with Image Gallery
Facebook App - Setup
Facebook App - Setup
Q & A
Facebook SSO
Like
button
Facebook Application
Future Enhancements