AddThis是目前比较流行的一个收藏分享网站.

通过定制,我们可以支持一个页面响应多个分享信息.

以下信息来自AddThis API文档:

Overview

After gathering your feedback for a year or so, we’ve completely redesigned our API, with the following goals in mind:

• If you’re not a JavaScript wizard, the most common customizations should still be easy
• In fact, most use cases should be covered with as little JavaScript as possible
• But even the most complicated configurations should be possible somehow (for example, multiple buttons on a page behaving differently)
• UI management code in JavaScript shouldn’t be required to actually use the tools

The new API supports global configuration (as with our original API) as well as per-element configuration–every button on a page can behave differently in almost every regard. You might not need to ever go that far. But you could.

The new API also offers a few new ways of rendering buttons. In the past, we distributed code with inline JavaScript. Not only did this lock us in to whatever code we distributed, but often we found users had trouble managing that much code, or even just pasting inline JavaScript into their CMSs. Now we take care of all that for you. You tell us which elements you want to be AddThis buttons (and how you’d like them configured), and we take care of the rest.

Why? We’re big fans of modern JavaScript toolkits like jQuery that separate markup and interactive behavior like this. (If you’re not familiar with the concept of Unobtrusive JavaScript, here’s a few articles.) It’s easier for everyone to manage, and, because it lets us drastically simplify the code we distribute, should even improve load times.

An Illustrative Comparison

<a href="http://www.addthis.com/bookmark.php?v=20"
 onmouseover="return
addthis_open(this, '', '[URL]', '[TITLE]');"
 onmouseout="addthis_close();"
 onclick="return addthis_sendto();"><img src=
"http://s7.addthis.com/static/btn/lg-share-en.gif"
 width="125" height="16" border="0" alt="Share"/></a>

<a class="addthis_button"></a>

Configuration

We support two types of configuration objects: one for configuring our UI tools, and one for specifying what you’re sharing.

UI Configuration

The same object format can be used for specifying global or instance configuration. To specify global configuration, the special name addthis_config must be used.

For example:

var addthis_config =
{
   // ... members go here
}

UI Configuration Options

Supported Services

For use in service_* configuration options.

Sharing Configuration

The same object format can be used for specifying global or instance configuration. To specify global configuration, the special name addthis_share must be used.

For example:

var addthis_share =
{
   // ... members go here
}

Sharing Configuration Options

Templates

Some destinations support more than just posting a link and a link title. Twitter, for example, lets the user post a bunch of arbitrary content. By using a template, you can customize the default post.

Sample template:

    twitter: 'check out {{url}} (from @addthis)'

We’ll fill in a few different tokens for you — you can use all, some or none of them:

• {{url}} – the URL being shared; on destinations that have a length limit (i.e., Twitter), we’ll automatically shorten the URL for you
• {{lurl}} – the URL being shared; even on destinations that have a length limit, this token (short for “long URL”) will never shorten your URL
• {{title}} – the title being shared
• {{html}} – the arbitrary HTML shared (the “content” parameter above)

You can provide one template per destination that supports them (currently just Twitter):

var addthis_share =
{
// ...
    templates: {
                   twitter: 'check out {{url}} (from @example_dot_com)',
               }
}

Section 508 Compliance

You can make your AddThis button Section 508 compliant by using ui_508_compliant.

<script type="text/javascript">
var addthis_config =
{
   ui_508_compliant: true
}
</script>
<a class="addthis_button"></a>

Rendering with JavaScript

You can render the AddThis button anywhere on your page using JavaScript. All of our JavaScript rendering functions take the form:

addthis.function(target(s), [configurationObject], [sharingObject]);

where target(s) can be

1. a classname, specified with a dot: ‘.sharing-button’
2. an id, specified with a hash: ‘#addthis_button_1′
3. an actual HTML element reference
4. an array of HTML element references

If configurationObject is unspecified, global defaults (i.e., the addthis_config object) are used. If sharingObject is unspecified, global defaults (i.e., the addthis_share object) are used. At present, we only support rendering of buttons via JavaScript, but we plan to support inline menus as well in the future.

The Button

Renders a normal AddThis button at an anchor tag. If the tag has no image in it, we load our default image. If the tag has an image in it, that image is used as for the button graphic.

addthis.button(target(s), [configurationObject], [sharingObject]);

Examples

Render a button at a tag:

<a id="atbutton"></a>

<script type="text/javascript">
addthis.button("#atbutton");
</script>

Render a button at every anchor with a certain class:

<a class="sharing-button"></a>
.
.
.
<a class="sharing-button"></a>
.
.
.
<a class="sharing-button"></a>
<script type="text/javascript">
addthis.button('.sharing-button');
</script>

Each “sharing-button”-classed anchor would become a regular AddThis button.

Share many different blog posts:

<a id="blog-post-24"></a>
<script type="text/javascript">
addthis.button('#blog-post-24', {}, {url: "http://example.com/blog/24", title: "The 24th post"});
</script>
.
.
.
<!-- blog content -->
.
.
.
<a id="blog-post-25"></a>
<script type="text/javascript">
addthis.button('#blog-post-25', {}, {url: "http://example.com/blog/25", title: "The 25th post"});
</script>
.
.
.

Render a button at an HTML element passed by reference:

<a id="button-1"></a>
<script type="text/javascript">
addthis.button(document.getElementById('button-1'));
</script>

Render a button at an array of HTML elements:

<a id="button-1"></a>
<a id="button-2"></a>
<a id="button-3"></a>
<a id="button-4"></a>
<script type="text/javascript">
addthis.button([document.getElementById('button-1'),
                document.getElementById('button-2'),
                document.getElementById('button-3'),
                document.getElementById('button-4')]);
</script>

Rendering with Link Decoration

While the JavaScript rendering methods are powerful, in most cases we believe they’re more powerful than what’s actually necessary. Following the principles of Unobtrusive JavaScript as discussed above, you can now create and configure an AddThis button in three simple steps:

• Add plain old anchor tags where you want your buttons to appear
• Add the appropriate CSS classes for the kinds of buttons you want them to be
• Add our JavaScript

Upon loading, our script will look for all our standard classes and render buttons as specified. Here’s some simple examples to demonstrate:

A button:

The code used to generate it: <a></a>

An email button:
The code used to generate it: <a></a>

See where we’re going with this? The links aren’t processed until after the DOM’s ready, so it won’t even slow down your page. (If you don’t want your layout to shift when the images are loaded, however, you should make sure to provide static images or content for all the links.)

Decoration Class Reference

Name	Description	Live example
addthis_button	Standard AddThis button; loads our regular button image if no image is present. Mousing over this button reveals the compact menu. Clicking it opens the expanded menu.
addthis_button_email	Email-only button
addthis_button_service	One-click sharing to a particular service, where service could be the service code of any service we support
addthis_toolbox	Standard AddThis Toolbox (requires child elements)	Share|
addthis_default_style	When set, toolboxes and other buttons will be rendered floating left, per our standard distribution	see above
addthis_button_compact	Same as addthis_button, except only a small + logo is used as a default image.	Share
addthis_button_expanded	Same as addthis_button_compact, except mousing over the button has no effect.	More Services
addthis_separator	Adds a few pixels of padding around a floating separator, for use in toolboxes. Only intended for spans.	LEFT|RIGHT

Note: Class-based configuration trumps global JavaScript configuration objects. For example:

<script type="text/javascript">
var addthis_config = {
    ui_click: true /* normally would disable mouseover behavior */
}
</script>

<div class="addthis_toolbox"></div>
<a class="addthis_button_compact">Share</a>

The compact menu button rendered by this code will have mouseover behavior, as the class-based configuration is considered authoritative.

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: Attribute-based configuration trumps global JavaScript configuration objects.

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_buttons.

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 opening <html> tag. (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">

欢迎发表评论,或者回溯(trackback)