Tip of the Iceberg :: Facebook Like as a custom control

Category xpages

Last week Chris Toohey demonstrated how easy it now is to add a Facebook "Like" button to a site. Here's an implementation of a custom control that allows you to drag and drop this capability onto any XPage:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<div class="fblike">
<iframe
src="#{javascript:var fbUrl:XSPUrl = new XSPUrl(
'http://www.facebook.com/plugins/like.php'
);
var fbParams = {
href:java.net.URLEncoder.encode(
compositeData.url
),
layout:'standard',
show_faces:'false',
width:compositeData.width,
height:compositeData.height,
action:'like',
font:'verdana',
colorscheme:'light'
};
for(var i in fbParams) {
fbUrl.setParameter(i, fbParams[i]);
}
return fbUrl.toString();}"
scrolling="no" frameborder="0"
style="border:none;
overflow:hidden;
width:#{compositeData.width}px;
height:#{compositeData.height}px;"
allowTransparency="true"></iframe>
</div>
</xp:view>

NOTE: the carriage returns above were included for the sake of readability in this context; you may want to get rid of some of the above whitespace in your actual source code.

A couple additional implementation caveats:

The above code assumes that you have defined custom properties for width, height, and url (string should be sufficient as the type for each).
Set the default value for height to 35, width to 450, and url to the following SSJS expression:
return context.getUrl().toString();
Since all the definable properties have defaults, you can override them on any page to which you add the control, but don't need to override any of them; if you don't pass a URL to the control, it will just automatically use the URL of the current page, but if you want to display the button inside a repeat control (or any other context where the object or concept being "liked" is not specific to the current page), you'll want to pass the corresponding "permalink" for each member of the iterated collection.
For bonus points, save a screenshot of the Like button and upload it as an image resource called "fblike.jpg", then in the "Design Definition" section of the control properties, add the following XML (when viewing the Design tab of any XPage containing the control, this will cause Designer to display the image resource as a placeholder for the custom control, making it easier to drag to another spot on the page if you decide you want to move it somewhere else):

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:image url="/fblike.jpg"/>
</xp:view>