...
Facebook Portlet
...
Copyright © 2007 Duke University
Written by Matt Young
Foreword
The Internet Frameworks Services division of Duke University's Office Of Information Technology (OIT) has created a number of portlets used in the student portal, DukePass. We have released the source code for these portlets under the JA-SIG License.
We encourage anyone with an interest to download, install, and use these portlets. Our portal installation uses uPortal version 2.5.3, but we have tried wherever possible to create JSR-168 compliant portlets that should run in any portlet container.
1. About, Prereqs, and Dependencies
...
1.1. Prerequisites
Before you begin, you should know how to deploy portlets into your portal environment. We developed and tested this portlet with uPortal v2.5.3, but it may work with other version of uPortal. If you discover a shortcoming in our code that we can correct to make the portlet more JSR-168 compliant, please let us know.
You will need to have ant and a Java 1.5+ compiler installed.
1.2. Dependencies
Where permissible, all dependencies are included in the /dep directory. These are separated into those dependencies required for runtime, and those required only for building (such as unit testing). Dependant libraries are listed below.
Compile/Test Time
- JUnit 3.x
- Servlet API
- Portlet API
- Spring Mock Objects
RunTime
- Spring Framework 2.x
- Spring Portlet Support
- Commons Logging
- Log4j
2. Configuration, Compilation, and Deployment
2.1. Configuration
Unzip the distribution .zip file to a working directory that will be used to build and configure the portlet. Change to the working directory. All paths referenced below are relative to the working directory.
At minimum, you must obtain an API key and a Secret Key from http://developer.faceboook.com. These should be installed in /src/facebook.properties
This portlet has a Spring-based configuration, so you should be able to change all relevant parameters in text files rather than changing the source code. However, you are welcome to change the source code to suit your needs if you are comfortable doing so.
Facebook requires you to enter the list of IP addresses that are valid for using your credentials. Remember to include the IP addresses of the machines running unit tests, or they will fail because the connection will be denied.
There is no need to modify /resources/portlet/socialnetportlet.xml, the Spring configuration file, to make the portlet work. This is, however, the right place to swap in other view technologies or replace controllers or services where appropriate.
2.2. Compilation
Once the configration is complete, you're ready to compile and create a deployable version of the portlet. By default, the portlet will be compiled in a format readily deployable for uPortal, a pluto-based portlet container. Alternate deployments will require modification of the portlet.xml file, the web.xml file, and possibly the build.xml file.ant buildThis will compile the application, run the unit tests, and generate a .war file that is ready to go into your portal environment.
If the build succeeds, you will find the .war file in /dist/socialnetportlet.war
2.3. Deploying the portlet to Tomcat
Deploying the portlet only requires copying the portlet .war file to your servlet's webapp directory.cp dist/socialnetportlet.war $TOMCAT_HOME/webapps
Installing the Portlet (uPortal only)
Every portlet container has a different method for installing a new portlet once it is deployed as a web application. Instructions are included here for installing the portlet for use with uPortal.
3. Customizing the Portlet
3.1. CSS
This section details the CSS styles used to lay out the portlet. You'll need to change these to match the look and feel of your portal's themes and skins. As the standards evolve in CSS styling for portlets, we'll be converting these specific names to more general CSS classes as defined by the specs.
Here is the section of CSS we use to style the portlet at Duke. We chose to include all of our CSS in one .css file that's downloaded as a part of the portal page's template rather than distribute a .css file with each portlet.
Example 3.1. SocialNet CSS
| No Format |
|---|
div.socialNetwork {}
div.socialNetwork div.stats {color:#FFF; padding:3px; background:#036 url(./slices/drk-blue-med.png) repeat-x left top;}
div.socialNetwork div.stats ul {margin:0; padding:0; list-style:none;}
div.socialNetwork div.stats ul li {display:inline; margin:0; padding:0 8px 0 2px; line-height:1.5;}
div.socialNetwork div.stats ul li span.count {font-weight:bold;}
div.socialNetwork div.stats ul li span.friendReqs {}
div.socialNetwork div.stats ul li span.friendReqs span.count {}
div.socialNetwork div.stats ul li span.invites {}
div.socialNetwork div.stats ul li span.invites span.count {}
div.socialNetwork div.stats ul li span.unread {}
div.socialNetwork div.stats ul li span.unread span.count {}
div.socialNetwork div.stats ul li span.pokes {}
div.socialNetwork div.stats ul li span.pokes span.count {}
div.socialNetwork div.stats ul li a {color:#FFF; margin:0; padding:0;}
div.socialNetwork div.stats span#faceBookMore {}
div.socialNetwork div.stats span#faceBookMore a {display:block; color:#FFF;}
div#ssExtendedContent {clear:both;}
div.snContactRequests {margin:1px 0 0 0; clear:both; padding:0 10px;}
div.snContactRequests span.snContactRequestsTitle {display:block; color:#036; text-indent:5px; line-height:.8; padding:0; margin:5px 0; border-bottom:1px solid #036;}
div.snContactRequests div.contact {float:left;}
div.snContactRequests div.contact a {display:block; margin:5px; padding:5px 5px 0 5px; border:1px dotted #036; background-color:#E1E7EE;}
div.snContactRequests div.contact a:hover {background-color:#C9D4EA;}
div.snContactRequests div.contact a img {height:125px; padding:5px; border:1px solid #036; background-color:#FFF;}
div.snContactRequests div.contact a span.snContactName {display:block; clear:both; text-align:center; padding:0 5px; line-height:2; color:#036; font-weight:bold;}
div.snEventInvites {margin:1px 0 0 0; clear:both; padding:0 10px;}
div.snEventInvites span.snEventInvitesTitle {display:block; color:#036; text-indent:5px; line-height:.8; padding:0; margin:5px 0; border-bottom:1px solid #036;}
div.snEventInvites div.invite {float:left;}
div.snEventInvites div.invite a {display:block; min-width:270px; margin:5px; padding:5px; border:1px dotted #036; clear:both; background-color:#E1E7EE; color:#036;}
div.snEventInvites div.invite a:hover {background-color:#C9D4EA;}
div.snEventInvites div.invite a img {float:left; height:100px; margin: 0 5px 0 0; padding:5px; border:1px solid #036; background-color:#FFF;}
div.snEventInvites div.invite a span.snInviteDescription {display:block; float:left; background-color:#FFF; border:1px solid #036; padding:5px;}
div.snEventInvites div.invite a span.snEventTitle {display:block; font-weight:bold; line-height:1.3;}
div.snEventInvites div.invite a span.snEventHost {display:block; line-height:1.3;}
div.snEventInvites div.invite a span.snEventDate {display:block; line-height:1.3;}
div.snLinks {clear:both; margin:1px 0 0 0;}
div.snLinks span.snLogoutLink {}
div.snLinks span.snLogoutLink a {}
div.snLinks span.snLogoutLink a:hover {}
div.socialNetwork span.snLogoutLink {}
div.socialNetwork span.snLoginLink a {display:block; padding:.5em .5em; color:#FFF;}
div.socialNetwork span.snLogoutLink2 a {display:block; padding:.5em .5em; color:#FFF;}
div.socialNetwork span.snLogoutLink span#facebookLogoutInfo {display:block; clear:both; color:#FFF; border:1px dotted #888; margin:5px 10px; padding:5px;}
|
3.2. JSP
...
v2.0-alpha-1
See Facebook Portlet for information about this portlet.
License
See license.
Source
| Code Block |
|---|
svn co https://source.jasig.org/sandbox/FacebookPortlet/tags/rel-2.0-alpha-1/
|
Configuration
To configure the portlet, change the facebook.properties file to include the Facebook application id and application name. See facebook.properties for more info.
| Code Block |
|---|
cd rel-2.0-alpha-1
emacs src/main/resources/facebook.properties
|
Build
To build, you must be using Maven 2 or possibly 3 and:
| Code Block |
|---|
mvn clean install
|
Deploy
You must follow the instructions for your specific portal to deploy. Deployment alters web.xml. Without the change resulting from deployment, the war does not have what it needs to be recognized by the portal.
Publishing
Follow the instructions that come with your portal.
Styling/CSS
This portlet assumes that all styling for it will be done in the skin. It uses the CSS classes defined in PLT.C in JSR-168/JSR-286 where appropriate.
Troubleshooting
Firebug and the Error Console in Firefox were my friends while trying to get the Javascript working. The only thing done server-side by the portlet is to take the two values in the configuration file and feed them into the Javascript. Everything else is client-side.
Notes
The old one v1 portlet was doing a string ID -> Integer -> string conversion and Facebook IDs now exceed the maximum Integer and the API it used was old/deprecated. Updating to use a newer app id seemed to break it, so after seeing that the Facebook Connect API portlet that was in incubation was not stated to be working with pre-3.x versions of uPortal, we decided to rewrite one that did.
There are some current concerns about 2.0-alpha-1 portlet, even though it works and is being used in production at Duke:
1. Div with id "fb-root" required for the Facebook javascript to work properly. But, perhaps we could change this, as I've not tried to modify it since we started using the javascript script tag injection we got from http://thinkdiff.net/facebook/graph-api-javascript-base-facebook-connect-tutorial/ .
2. portlet.tld is included in source currently, and I can't remember if that is needed for the JSP pre-compilation, but this could probably be easily fixed with a modification to pom.xml and removal from source.
3. There are likely some UI mods needed (default hover CSS style for rows could be included, etc.)
4. FQL queries for the feeds are touchy but they might need to be tweaked to try to provide a feed just like the normal (friends) news feed, if that is possible. Currently they provide newer news than what is displayed in either of my (friends) news feeds in Facebook.
5. Shows "Unknown" picture and user name for messages from likes that aren't friends (which is wrong, but I haven't looked into fixing yet).
6. Doesn't indicate when a post is directed to someone else.
7. There are a number of other types of types posts it could display a little better than it does.
Questions/Feedback
Please post all questions/feedback on the uportal-users list. If you are absolutely sure it is a bug in the portlet, please add a ticket in the Jira project listed on the main page for this portlet.