AddThis Academy

An ever-growing library of resources to help you become a better online marketer.

Attribute-Based Configuration

So you’ve probably noticed that the JavaScript-based configuration and the decoration-based rendering only work together for global configurations. If you want different configurations for each button, you can’t pass a JavaScript configuration object in to the default renderer. You can, however, specify parameters as custom attributes on the anchors themselves. All the parameters described above are available, with the prefix addthis:. Let’s look at some examples:

To specify a custom URL and title:

<a class="addthis_button" addthis:url="http://example.com" addthis:title="An excellent website"></a>

To specify a hover delay:

<a class="addthis_button" addthis:ui_hover_delay="200"></a>

Note: Configuration parameters described as “global” here are still global when using attribute-based configuration (e.g., services_compact can only be specified once meaningfully on a page). Any non-global parameters specified in a global configuration object will, however, be overridden by attribute-based configuration items.

Configuration Inheritance

Configuration is inherited by the elements nested within toolbox divs. This way, you could easily customize an entire toolbox without having to add configuration attributes to every single button. For example:

<div class="addthis_toolbox" addthis:url="http://example.com/blog/post/2009/05/01" addthis:title="Hooray!">
  <a class="addthis_button_compact">Share</a>
  <a class="addthis_button_email"></a>
  <a class="addthis_button_facebook"></a>
  <a class="addthis_button_buzz"></a>
</div>

Each of the buttons in this toolbox would share the URL specified at the toolbox level.

There are two exceptions.

1. Configuration isn’t inherited by children of arbitrary elements.

In this example, neither button would share “http://example.com”. The parent div must be an addthis_toolbox.

<div addthis:url="http://example.com">
  <a class="addthis_button_email"></a>
  <a class="addthis_button_print"></a>
</div>

2. Configuration isn’t inherited by regular addthis_button’s.

Because addthis_button is intended to stand alone, it does not inherit from a toolbox parent.

<div class="addthis_toolbox" addthis:url="http://example.com">
  <a class="addthis_button"></a>
</div>

Valid XHTML

If you’re using XHTML, the custom attributes will not pass validation. To make your XHTML technically valid, you’ll need to add a custom namspace declaration to your openingtag. (Note that the W3C validator does not take custom namespaces into account.)

Change:

<html xmlns="http://www.w3.org/1999/xhtml">

To:

<html 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:addthis="http://www.addthis.com/help/api-spec">

But I really need my documents to validate!

Theoretically, you could just add the custom attributes as inline extensions to your DTD. For example:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
  <!ATTLIST a addthis:url CDATA #IMPLIED>
  <!ATTLIST a addthis:title CDATA #IMPLIED>
]>

This passes validation, but most browsers render the trailing ]>in the page itself. There’s two options, at this point: you can code your page to only show the custom DTD to the W3C validator, or you could download the actual XHTML DTD (from http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ), add the custom attributes, and host it yourself. Unfortunately, the W3C validator will not validate non-standard DTDs.

See this List Apart article for more discussion of these techniques.

« The addthis_share Variable

URL Parameters »

Attribute-Based Configuration
2 (40%) 1 vote

Was this article helpful to you?