UC Irvine Facebook Portlet

Facebook Portlet

It is recommended that you use the new version of the portlet (0.2) that uses the Connect API if you use uPortal 3 or higher. The Connect API version also looks better and has some better functionality.  -- Facebook Portlet (Connect API)

Facebook is a social networking site that students use regularly (most seem to use it multiple times per day). Our motivation behind a Facebook portlet is to make students' lives easier by providing them access to campus information and services while simultaneously allowing them to connect with a social service. We believe that the adoption rate of the portal will increase with the addition of this portlet.

 Technical Information

When the user authenticates, the portlet establishes a session with Facebook that lasts for 24 hours (or forever, depending on what the user would like). The session information is stored in the portal database and is retained until it is timed-out by Facebook. By caching the session in the portal database, the session is tied to the portal & user and not the system/IP being used. A user will remain logged into the portlet regardless of when or where the user logs into the portal (as long as the session is valid).

The user has the option to specify which notifications to view (see the last screenshot), and to remove the Facebook session altogether ("Logout of Facebook").

 Download

 Download Version 0.1 

 Installation & Configuration

FacebookPortletis a simple GenericPortlet with JSP views. For simplicity's sake, the portlet uses the same jdbc context as uPortal. To accomplish this, you need to make that context available to the entire tomcat. See the uPortal wiki for instructions on how to do this.

You will then need to create 2 tables in your PortalDb database (if you use MySQL, just execute the following):

CREATE TABLE IF NOT EXISTS `UPC_FACEBOOK` (
  `UID` varchar(128) NOT NULL,
  `SESSION` varchar(255) DEFAULT NULL,
  `PREFERENCES` text,
  PRIMARY KEY (`UID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE IF NOT EXISTS `UPC_FACEBOOK_PREFS` (
  `UID` varchar(128) NOT NULL,
  `PREF_NM` varchar(128) DEFAULT NULL,
  `PREF_VAL` tinyint(1) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

PostgreSQL

-- Table: "UPC_FACEBOOK"

DROP TABLE "upc_facebook";

CREATE TABLE "upc_facebook"
(
  "uid" varchar NOT NULL,
  "session" varchar,
  "preferences" text,
  CONSTRAINT pk_uid PRIMARY KEY ("uid")
)
WITHOUT OIDS;
ALTER TABLE "upc_facebook" OWNER TO portal;

-- Table: "UPC_FACEBOOK_PREFS"

DROP TABLE "upc_facebook_prefs";

CREATE TABLE "upc_facebook_prefs"
(
  "uid" varchar NOT NULL,
  "pref_nm" varchar,
  "pref_val" bool
)
WITHOUT OIDS;
ALTER TABLE "upc_facebook_prefs" OWNER TO portal;

You will also need to create a Facebook API and "secret" key. If you don't have a Facebook account, create one and then go to the developers sectionto sign up for an API key (it's free). When signing up, make sure you enter the full URL of your portal as the Callback URL and set the Application Type to website.

Once you get your keys, change the values in edu.uci.vcsa.portal.portlets.facebook.FacebookPortlet.java.

Run ant deploy to compile and package.

Deploy to uPortal like any other portlet, ant deployPortletApp -DportletApp=/path/to/dir/build/Facebook.war. Use the Channel Manager to add a new Portlet with ID: Facebook.FacebookPortlet.

You may also want to add 2 CSS classes to your styleshee that are used in the JSPs:

 /* facebook portlet styles */

.fb-image-block {
	clear: both;
	float: left;
	width: 100%;
	display: block;
	margin: 5px 0 5px 0;
}

.fb-image {
	padding: 3px;
	margin: 3px 3px 0 0;
	border: 1px solid #ccc;
	position: relative;
	float: left;
}

 Screenshots

Before logging in:

Associating your Facebook account with your portal account:

Primary portlet view:

Editing preferences:

 Considerations

This portlet has not been thoroughly tested under heavy load and should not be placed into a production environment without doing so first. Enjoy!