Jump to Navigation

Me on Twitter

  • RT @scott_kerr: Meanwhile, by Columbus Circle https://t.co/FRzWiCIqfa 1 week 14 hours ago
  • @GregWildSmith Then continue to use it a lot... Maybe it's just that you haven't used it long enough ;-) 2 weeks 1 day ago
  • RT @iceland: Some said an open-world experience this immersive wasn’t possible. But it’s already here. And you don’t even need silly VR hea… 3 weeks 4 days ago
  • RT @okjanelle: I find this @snowden quote relevant. https://t.co/8VCBRbECta 4 weeks 4 days ago
  • Oh. My. God. Thx for this good laughing session 7 weeks 5 days ago
  • Ah ah ah https://t.co/Ou3BoHpLA8 7 weeks 5 days ago
  • on the other hand, @AtomEditor's git GUI is very productive, so it still has my preference over @code 8 weeks 1 hour ago
  • I wonder if #vscode users do use #git... The GUI is just impractical on a daily basis, I always end up switching to command line 8 weeks 1 hour ago
  • Important to know that this exists ! This new technology called a "Speaking Portrait" allows any still photo to be… https://t.co/AP8GVnst2N 10 weeks 1 day ago
  • RT @Thom_astro: Le Vésuve et #Naples. Les montagnes sont toujours plus spectaculaires prises avec un léger angle qu’à la verticale parfaite… 10 weeks 4 days ago

AddThis for Drupal

This small article might help you to figure out quickly how to work with the AddThis module for Drupal.

It is not a substitute to the original documentation : it just provides a concrete view of the configuration process from my experience.

Configure it

Here is an overview of the main steps to get AddThis working on Drupal :

  1. install the module : http://drupal.org/project/addthis
  2. choose in which nodes it appears : page, story, teasers, ...
  3. select which type of widget you want : they are called "button" and "toolbox" in the configure tab
  4. build the widget by adding components to it (only for "toolbox") : components includes popular buttons like facebook like, google +1, tweet, but also custom elements like separator, addthis 'more' button
  5. add a service customization for each component you listed : this step simply provides each component with adequate parameters
  6. customize it more using the numerous other options

Introducing the widget type

There are two types of widget :

  • button : a thin button that will open a popup menu on hover ; not obstrusive : doesn't add too much to your design
  • toolbox : the most configurable ; a sequence of custom buttons

Sample button : AddThis : sample button

Sample toolboxes you could build (from AddThis's website) :

AddThis : sample toolboxes

Building a toolbox

There are 3 states the widget can be :

  1. default, what is displayed with the page
  2. compact menu opened ; i.e. when the user hover the widget
  3. menu expanded ; i.e. when the menu is clicked on

The configuration page of the module simply offers you to define what you put in each state with 3 fields : "Toolbox services" (the default state can only be changed for toolbox), "Compact menu services" and "Expanded services".

In each field, you will enter a comma-separated list of the components (called "service codes") you want in your widget. The list of available "service codes" are printed on the configuration page.

For instance, if you would put facebook_like,tweet,google_plusone,counter_pill in "Toolbox services" on your site, this would display facebook, twitter and google "+1"-like buttons, plus a button to open the AddThis menu on hover : AddThis : nicobo's sample toolbox

In the other states you can change the services you want to include and their order. A lot of them are available...

Customize your services

For each component (a.k.a. "service") added to your widget, you should add a service customization (in the "Customize services" tab) where you will list the options/parameters you want for this button : this is the way you can change the default behavior.

Options are specific to each service so you will have to look at the provider's developer pages, but the module provides links from its configuration page so you will reach the options list of each service within a few clicks.

Some important details :

  • In "service_code", just put the same service code that you used in the "Toolbox services" field (i.e. "google_plusone" or "facebook_like", ...).
  • The options go in the "HTML attributes" field, space separated like if they were added to the HTML tag of the widget. For instance : g:plusone:annotation="none" g:plusone:size="medium".
  • The "HTML classes" field must be filled because as soon as you define an entry here for a service, it looses its default classes and the button does not even shows up on the page (this should really be enhanced in future versions of the module). What I did to get around this was to pick the default classes and put them back in this field. For instance, for google_plusone I put "addthis_toolbox_item addthis_button_google_plusone at300b" (note the space between the 3 classes).
Important : you will have to manually add CSS classes in the "HTML classes" field otherwise the button will not appear. For this, simply try first with no service customization, and copy the default classes from the HTML source in this field.
Few enhancements could be a better alignment of icons, since they're not all same size. This can be fixed by choosing the appropriate widget for each button, and by adjusting their options.
Another limitation is that you can only use one type of widget (button or toolbox) in all nodes. But this is easily patched in the addthis.module file :

function addthis_link($type, $node = NULL, $teaser = FALSE) {
// Check whether AddThis is set to display on this node.
$addthis_widget_type = variable_get('addthis_widget_type', 'addthis_button');
// We force here the type of widget to display in teasers
// The default type chosen in addthis configuration will be used in other nodes (pages)
if ( $teaser ) {
    $addthis_widget_type = 'addthis_button';

Another advantage of this module is that you can add it as a block where you want. This allows for instance to add it in some unique places like once for the front page, instead of once for each article/teaser.

My feeling

After trying several social sharing modules, I'm very satisfied with this one, because it is quite configurable and supports all options for each button.

As far as I've tested, it works just fine on mobile devices.



Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • E-Mail addresses are hidden with reCAPTCHA Mailhide.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>. The supported tag styles are: <foo>, [foo].
  • Twitter-style #hashtags are linked to search.twitter.com.

More information about formatting options

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