Making Drupal Commons look like facebook - part 1

Acquia Commons is a Drupal distribution that is for building communities within your organization. I have been able to play around with its competitor JIVE and must admit, it stands quite well next to it.

We were approached by Gary Conroy from Specsavers, who have introduced Commons within their organization and needed to do some additional tweaks to make it a bit similar to Facebook. This will be a series of two blog posts, in first we will show how we have made similar functionality to Facebook Like links and in the second how did we change the status form widget.

Specsavers generously sponsored time, to write these upcoming blog posts and make the code available to everyone.

What are we going to do

Changes to the Like widget:
- display the Like link where the links are displayed - so part of the node links array
- when Liked, display “Unlike” text instead
Additional features:
- we want to display who liked the post
- we want to display other users that liked it
- we want to display if the current user liked it
- we want to update this information on the fly when Un/Like link is clicked

The Like widget
Lets remove all the styles that Commons are using, so this will be just a simple routine to override the templates to make the Like button look like link again.

In the gist above you can also see that on the line 15 we are checking whether the user liked the content or not. If they did, it will replace the “Like” (default text) with “Unlike”.

The Like link should be now switching between Like/Unlike when the user clicks on it.

The Who liked this functionality
We have created a simple feature FB Commons that you can download from Github here.

The feature has one view “FB Commons Likes”, which has two Block displays. Although these could be SQL Queries, we have used Views, so you can easily change/extend it if you like.

The first block is being used to get 3 other users that liked the content (there is a limit on how many items to display within the view - you can change this if you want more).

The second block is being used to find out whether currently logged in user liked the post.

These views are being called from “fb_commons_likes” in our feature. It will get the results, compare it, calculate and output in variables.

Second function “fb_commons_prepare_output” will output the right message. Eg. “You liked this.”, “You, Peter, Judith, John and 5 others like this.”. This is where you can go further with what you want to display.

Then thanks to preprocess function “fb_commons_preprocess_node”, you will be able to use a variable “$fb_commons_likes_output” to display who liked the post in your node.tpl.php.

<?php print $fb_commons_likes_output; ?>

If you put the above code in your node.tpl.php file or node--panel--fallback.tpl.php, you should be able to see who liked the post. You should also see, that when you click on Like, it will automatically update who liked the content information.

The rate module allows us to use jQuery bind event on “eventAfterRate”. This makes it possible to run any javaScript code right after someone clicked Like button.

jQuery(document).bind('eventAfterRate', function(event, data) {
  if (data.content_type == 'node' && data.widget_id == 1) {
    jQuery("#node-" + data.content_id + " .content-fb-commons-likes-data-wrapper").load("/fb-commons/ajax/like/" + data.content_id);

The javaScript code will take the content id (node id in our case), finds out whether the widget that has been clicked is the Like link (id 1) and calls our custom callback “fb-commons/ajax/like” with parameter node id via ajax. Whatever comes from that call will then replace content in our data container “.content-fb-commons-likes-data-wrapper”.

Additional tweaks
As you might have noticed, we have placed the Like link also to node links section, so now it displays twice. In node.tpl.php you can add one line on top of your code

<?php hide($content['rate_commons_like']); ?>

This will hide the Commons default Like button.

What next
This little tweak improves user engagement, since most of the people are familiar with facebook like system and also they are now able to see who else likes theirs and others posts.

You can push this functionality further. Lets say prioritize who is going to be displayed first (users that liked the post and are friends with currently logged in user), apply this to comments and other entities, and so on.

Next, we will look at the “update status” form and how to make it look like the one below:

Need Drupal Theming? Hire us