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.

Recently I was asked to summarize the parts of a drupal theme. I came up with the following semi-literate guide to my own theme framework, sp0xx6 for Drupal 6. This is not a very technical guide but I think it’s none the less important to document my perspective, especially for newcomers to drupal who are having a hard time with the way information is presented on drupal.org.

Please note: The text below makes reference to a set of theme files for Drupal themes. That theme is sp0xx6. You can download sp0xx6 from google code. For free. To keep. Forever. Drupal rocks! Thanks to everyone on drupal.org that makes my life easier and more interesting.

.info

The .info file registers your theme with drupal along with your theme’s regions (area’s content appears in) your CSS and javascript.

template.php

Your template file allows you to customize practically everything in your theme. You can rewrite the appearance of forms, lists, links, taxonomies and add all sorts of functionality.

node.tpl.php

Unless you have a separate node template defined (as with node-gallery.tpl.php), every content type will use the default node.tpl.php file to render the contentof each page.
The node template is made up of two sections, the teaser and the main template the teaser is usually used in lists and the main template is used when you are displaying the actual page your node is located on.
The teaser section is optional, it simply provides another way to render the shortened layout of your template.

Main $components of node.tpl.php

$teaser — the teaser format of the node, can be customized and manipulated
$title — title of your node
$submitted — user that submitted the node followed by published date
$content — the content of the node body
$terms — taxonomy terms assigned to the node

page.tpl.php

This is a crucial part of the theme, but most of the components of this template are actually quite arbitrary. This is one of the reasons I really like Drupal — you can use plain html/css to do just about anything to a page before you get drupal to load some content in it. To function properly the page template requires the following pieces,

$head — prints meta tags and other important stuff
$styles — prints all styles from your .info file and Drupal modules
$scripts — prints all javascript, including your script.js (see below) and Drupal module scripts
$content — prints node content
$closure — prints everything in the footer of your page (it’s easy to miss so check twice!)

Other notable pieces,

A few custom regions (defined in .info and can be placed into content-type templates),

$left, $right, (left & right are defined by default in drupal) $content, $header, $footer, $precontent, $content, $subcontent, $mainnav, $subnav, $searchbox

page-front.tpl.php (not included in sp0xx6)

Page-front is the default frontpage template for Drupal. This page will automatically override your homepage unless you have specified a different page in your theme settings. sp0xx6 does not include this file, but you can simply duplicate page.tpl.php and rename that file to create your own front page for drupal. After you rename the file you can customize it with whatever markup you like and it will only change your homepage.

script.js

Contains all of the javascript stuff you need for your regular templates. Other js elements can be added on a case by case basis using drupal_add_js (http://api.drupal.org/api/function/drupal_add_js)

search-block-form.tpl.php

An optional template that allows you to modify your search form.

style.css

This is the main stylesheet of your theme and will be included with every template. You can add additional styles to specific templates with drupal_add_css (http://api.drupal.org/api/function/drupal_add_css/6) You can also add other css styles in .info

Custom node template example –

node-gallery.tpl.php

node-gallery.tpl.php is an example of a content type called “gallery” that has an image gallery built into it using CCK image fields and the imagecache module that is presented in lightbox form.

In the template you can see that the field_imagefile cck field is rendered as thumbnails using the gallerythumb imagecache preset.

Sunrise Soya’s new Drupal based site was created by our team at Veratta Technologies. Design by Peter Figasinski.

Taxonomy Quick Find
“This module provides a set of blocks which show ‘related’ content based on a selected term.”

http://drupal.org/project/taxonomy_quick_find

Home Box
“Home box allows your users to have a page that behave the same way as iGoogle, Netvibes or BBC.co.uk.”

http://drupal.org/project/homebox

Autosave
“The autosave module automatically saves a snapshot of your content type form using AJAX. If the user’s browser or machine dies while editing a node; the edits will be presented to the user the next time they return to the node.”
http://drupal.org/project/autosave

Popups API (Ajax Dialogs)
“API for building modal ajax dialogs.”
http://drupal.org/project/popups

Watcher
“Watcher offers your site’s users, registered and anonymous visitors, a way to easily watch nodes for changes and new comments without having to post themselves.”
http://drupal.org/project/watcher

]]> http://atworkinthecloud.com/blog/2009/06/drupal-ajax-plugins/feed/ 0 http://atworkinthecloud.com/blog/2009/06/things-that-have-impressed-me-lately-0-10-2009/ http://atworkinthecloud.com/blog/2009/06/things-that-have-impressed-me-lately-0-10-2009/#comments Thu, 11 Jun 2009 05:32:08 +0000 jim http://roguescience.org/robotoverlord/cloud/ablog/?p=312 Drupal forms are awesome, until they suck and then there’s always
http://www.lullabot.com/articles/modifying-forms-5-and-6

The sugary sweetness of the media temple knowledge base
http://kb.mediatemple.net/

Simon Schama’s A History of Britain documentary series
http://en.wikipedia.org/wiki/Simon_Schama%27s_A_History_of_Britain

A site that catalog’s all of the very best SMS messages that people send
(864): sometimes i wish i was able to text my cat and tell him i miss him and that i’m thinking about him
http://www.textsfromlastnight.com/ (Warning: NSFW) via @creativestable

Open Space has a new Drupal website that make it easy for staff members and volunteers to access information and archives online.

I also redesigned Open Space logo and branding as a part of this process.

These are the basic steps I go through each time I make a Drupal site. They are not a secret. The very fact you’re reading it means it could not possibly be a secret. Nice try, though.

A Drupal site can be made in many different ways, the steps below will lay the ground work for a site that is user friendly and behaves itself. This guide is not intended for hardcore development geeks or first time users – it’s just a blueprint for creating a safe and solid CMS with Drupal.

I’ll be expanding this post and also creating another page for Drupal 6 sometime soon. Keep your pants on. Thanks to Amy Steen for her input on this guide!

PS. There are lots of ways to make a site with Drupal and if you think you have a way I’d love to hear about it.

s3cr3t formula

• Download and install the latest version of Drupal 5
  • Make sure to set the database collation to UTF8_General_ci
• Create some sub directories in sites/all directory (sites/all/modules and sites/all/themes)
• Register your admin account, pick a secure password
• Change user registration settings to “Only site administrators can create new user accounts” (user management > user settings)
• Create writeable files directory (follow alert box) – this directory will hold the files you’ll upload
• Run cron for the first time (follow alert box)
• Configure “clean-urls”, you might need to edit .htaccess (site config > clean urls)
• Install some base modules into sites/all/modules directory:

• Enable extra core modules like uploads, path alias, etc.
• Change default input to full html (site config > input formats) Note: if you’re intending your site to have many users you’ll want to leave the default input format as is
  
• Create “default” role (user management > roles)
• Configure “default” role for fck-editor

And that’s it, at least for now. There’s lots left to do on your way to making a fully functional site, but hopefully this will give you a headstart. I’ll be updating this guide as often as is necessary, please let me know if you’ve got suggestions.

Sp0xx is clean and clutter free. In combination with the awesome Administration menu module users can concentrate on creating and editing content. Using thickbox and jquery the user is given access to a ‘Content Map’ that allows them to easily understand how to syndicate content (via pre-configured ‘Views‘) without having to understand the fundamentals of Drupal’s taxonomy.

Right now I have a beta page set up on Google Code for the Drupal 5 version. Please note that this page is for testing purposes only. Soon we’ll be creating an official Drupal 6 project on drupal.org. My work on Sp0xx is sponsored by Trapeze Communications.

Stratford Hall is a Drupal-based site I built while at Trapeze Communications.

Design by Neil Tran.

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/