I’ve seen a few people on drupal.org how to implement Facebook Share and asking for modules, etc. However with the share widget provided by Facebook it’s really very easy to implement FB Share at the template level. To make it really easy, use CCK.

Step One: Get the Widget

To start off, FB provides you with this code in their widgets section

<a name="fb_share"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"><!--mce:0--></script>

Which gives you a little widget on your webpage that looks like this,

That’s pretty quick and easy. Using that bit of javascript you’ll get a little FB button that you can stick basically anywhere on a page (or, more precisely in your node.tpl.php file) and when the user clicks it, they’ll be prompted to login to facebook (if they’re not already) and then they can share your link on their wall. FB is pretty good at scraping pages but if you want fine tune control over what image and what text is displayed with your link you need to go a step further.

Step Two: Take Control!

As an example, this is the code I added to my page.tpl.php template right underneath my <title> tag:

 
//

I’ve made references to three variables here; $title is just the title of my page, $node->field_fblink_teaser[0]['safe'] is a CCK field that I’ve created which allows users to specify a meta description of their page and lastly $node->field_fblink_image[0]['filepath'] is an image that user uploads that is used to create a thumbnail for the FB Share wall post. I’ve defaulted this image to 100x100px since that is what FB seems to like. For more info on linking different kinds of media including audio and video, check out this page. Although there are no guidelines given anywhere else, FB does actually have minimum/maximum sizes for images, so if you’re image isn’t showing up try changing the dimensions.

In the end you should end up with a wall post that looks like this,

Disclaimer: I don’t advocate using Facebook. For anything. It’s a popular platform and website, yes. But you should be aware that Facebook likes to change their rules, often without warning. It can be a bit of a nightmare for developers. That said, Facebook Share is relatively low-impact though (all authentication takes place via facebook) and that makes it quick to implement.

Updated on April 4, 2010, plugin update killed my example code.

1. Adhere to drupal best practices from the start. Look forward to your site being around for a long while and set it up correctly. Even the basics, like taking advantage of using the sites/all folder to hold your non-core modules and themes can save you a lot of time down the road.

2. Make the website accessible to a wide range of people. It is easier to plan things like text-size controls, email-to-a-friend and print buttons when you’re in the design stages. Adding them in afterwards can look amateurish.

3. Give yourself time to input content and give it some TLC with proper formatting. Nothing is more boring than the same basic text layout on every page. With CMS’s half the point is having the same frame around your content so that navigation is consistent, etc. – but that doesn’t mean your text and image content has to be the same with every node. Float an image left, float it right, pull out an important quote and give it the bold+italic treatment. Don’t rush through this “final part” of the job – it’s very important.

4. Use some kind of design/development framework. Whatever works for you, but the point is to keep it consistent so that when it comes time to fix something or add a feature you can do it quickly. For most people just starting out with the same basic theme, like Zen, is enough. Later on though you might need to start keeping a folder of your regular modules, pre-configured modules, sample configurations of certain key theme components, and anything else you might need within arms reach. A note of caution though – make sure you check drupal.org for updates of the modules once in awhile.

5. FCKeditor – is the best editor there is, period. A lot of folks swear by tinyMCE but I think they’re just plain wrong. FCK has a built in file manager (that is a pain in the ass to configure but very worth it), a default CSS XML-based stylesheet associated with user-styles that is easy to override,  but most importantly it has a feature tied into the text editor that shows block elements boundaries in your html structure which is of huge benefit to 99% of all users.

http://www.fckeditor.net/

Tags: fixed width, three columns, valid CSS, valid XHTML, white, simple, widgets, widget ready, 3columns, right sidebars, SEO friendly, gravatars, h:over effects, text-only

Download pl00