Facebook Social Widgets In Drupal

Posted by:
Coby
on 04/23/2010

UPDATE: Since writing this post I have joined the growing ranks of internet citizens who feel that the changes to Facebook's privacy policies are not acceptable. I am deleting my Facebook account. This post will remain as a matter of history.

Geek Warning: If you do not do web development and/or work with Drupal you can probably skip this post.

The weather yesterday was crap, so I decided to stick inside and work in the studio. I was trying not to acknowledge the paper overflowing my inbox and otherwise minding my own business when some friends on Twitter post about Facebook's new Social Widgets. The next thing I know it's past my bed time, and I am sending incoherent tweets about how much IE sucks. But I had managed to completely ignore office work (like I am doing now), and get a few of Facebook's new widgets integrated into the site. Overall, it really was not too hard, but there were a few gotchas I'll cover.

First, I am not going to go into intricate detail about all the modules involved. I am still working on a few posts that will cover the details of planning/building this site, as I think it's important for the creative arts community to get a feel for the process/level of effort required of a portfolio site of this kind (read non-Flash content management with social media integration). So, on to the important crap.

Requirements

I had never messed with any of the Facebook API prior to yesterday, so if you smart geeks out there see something I did wrong please flame away.

I was not crazy about running a bunch of iFrames so the first thing I did was went and applied for a Facebook Application so I could get an app ID to stick in the Javascript SDK initialization function. I picked the XFBML way over iFrames just because I think it will give me better performance and flexibility. For one thing I can load this asynchronously and not have it slow up the other elements of my site if (and no doubt when) the FB servers get hammered. It took me about five minutes to apply for an app and I kept it sandboxed as it's not really serving any purpose at this point other than providing me with an ID. This feels like it is either an area I screwed up or something that FB needs to fix. It seems like it should be more like applying for an API key with Google, rather than applying for an application just to get an ID. Anyway, it's working for me. Here's the asynchronous init function, which I dropped into my page.tpl right after the body tag:


<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

And this seemed to work really well. Until I tested it in IE 8. It did not want to render. No errors, just not showing up. Turns out the strict doctype and the fact that I had not declared the fb namespace was not good for IE. So make sure you add this inside your html header:


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
</html>

The Like Button

The site Like Button in a block was easy. I just grabbed the XFBML produced over at Facebook's little widget factory and dropped it into a Full HTML filtered block. The block is set to display on just the front page. This is the Like Button for the entire site (main URL). Now I was getting greedy and decided to add a Like Button to blog posts.

This site is running on Display Suite with Node Displays. I am just learning some of the power of DS and I like it overall. It does take a bit more CSS to tweak some of the fields and node regions, but I think that comes with the flexibility it offers with node display. One of the features DS/ND offers is the ability to "Add new code fields". It feels a bit like CCK Computed Fields. And I am sure there are differences, but for adding a Like Button this worked for me. I added a new code field using a bit of PHP to check node types and then the bit of XFBML required to add the button


  global $base_url;
  $path_alias = drupal_get_path_alias("node/$object->nid");
  $node_path = $base_url . "/" . $path_alias;
  print "<fb:like href=\"$node_path\" layout=\"button_count\" show_faces=\"false\" width=\"100\" action=\"like\" font=\"verdana\"

The Comments Widget

Adding the Comments Widget was just a matter of adding another block and setting it to display in the content bottom region of the theme I am using. I also added a bit of PHP to check for the right content types along with the code from the FB Widget site.

Overall it was pretty painless. I am sure it will need some tweaks and there are bound to be changes to the new FB API, but I think it will be worth keeping up. The next step is to figure out the best way to output some RDFa to support the new Open Graph protocol. That's the tasty icing on this social cake.

Comments

by Anonymous - 07/10/2011 - 06:41

Would it be okay with you if

Would it be okay with you if I linked to this page from my website? Just asking since some people don't allow linking to their sites if you don't take their permission.Engineers who would like to have careers in management positions should seriously think about getting the PMP certification so that they can learn how to manage projects effectively. Getting the certification is a matter of passing the PMP exam which can be done with a bit of online PMP certification training.

by Anonymous - 10/03/2010 - 03:42

Thanks for this post. Like

Thanks for this post. Like button is one of the most useful indeed.
//Eric

Joomla Facebook Extensions

by Anonymous - 09/18/2010 - 12:07

I thank the writer friend for

I thank the writer friend for his writings on your site. I read all of it and i need to read new writings anymore. For the time being, i watched this type of topic on facebook and i liked it so much. In addition, it's one of the rare topics on the site.

See you at a new topic...

Post new comment

By submitting this form, you accept the Mollom privacy policy.