awe.sm-powered Share Buttons

awe.sm Share Buttons work together. Please review how to use them.

Twitter Tweet button

The Tweet Button is a small widget which allows users to easily share your website with their followers without having to leave the page. Promote strategic Twitter accounts at the same time while driving traffic to your website. Learn more from Twitter….

Custom tag method: simplest, easiest

First, include the awe.sm Javascript library (instructions). Then just put our special HTML tag wherever you need it.

<awesm:tweet></awesm:tweet>

JavaScript call method: dynamically-generated content, JavaScript apps, and testing

When created by our custom tag or the IFRAME, buttons are generated at page render time. If you don't always want to show a button, or if the URL you want users to share is generated later on, you may want to generate our buttons on-demand using JavaScript. Developers may also find this method useful when building JavaScript applications.

First, include the awe.sm Javascript library (instructions). Then make a call like these (assuming asynchronous library loading):

<div id="mytweetbutton"></div>
<script>
AWESM.onavailable = function() {
    AWESM.tweet({
        'data-url': 'http://example.com/my-page.html',
        'awesm_buttonid': 'mytweetbutton'
    });
};
</script>

The awesm_buttonid parameter is necessary when using the onavailable method. The data-url parameter in the example above is optional. If not specified, the page the button is loaded into will be shared.

IFRAME method: for performance, and plugin developers

To save the overhead of loading and executing JavaScript on your page, or if you are writing a plugin that is pre-generating markup for a content-management system, you may wish to generate an IFRAME tag directly. Note that you must include your awe.sm API key in the URL as awesm_key.

Note that you must include your 64-character awe.sm API key in the URL as awesm_key.

<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="//widgets.awe.sm/v3/tweet_button?awesm_key=XXXXXXXXXX"
style="width:55px; height:62px;"></iframe>

awe.sm parameters

All these parameters are optional. For more detail on these parameters, see the Create API documentation, but below is a quick summary. Note that when used in the HTML tags, the underscores should be changed to ":", e.g. awesm_campaign becomes awesm:campaign.

Parameter	Description
awesm_key	Your 64-character awe.sm API key (only required for the IFRAME)
awesm_campaign	A campaign to group these shares into, e.g., "slideshow-promo". If you specify a non-existent campaign name, a new campaign of that name will be automatically created.
awesm_notes	Any additional information you wish to attach to links, for example your internal user ID of the sharer, if available. You can also store JSON data structures in this field, up to a maximum of 256 characters.
awesm_tool	[advanced] The tool key for the share. Defaults to a value dictated by which button and button form factor has been specified. You may wish to specify your own tool key if you place multiple buttons in different contexts that you'd like to track independently. For more information on tool keys, see Applications and Tools.

Configuring your button

The easiest way to configure the Tweet button is to use Twitter's official configurator. It will give you some HTML which can be easily converted into the equivalent awe.sm-powered button. For example, the following button code:

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" 
data-via="awesm" data-related="jhstrauss:Co-founder,seldo:Co-founder">Tweet</a>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

can be converted to an awe.sm Tweet button by making the changes shown below:

<awesm:tweet href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="awesm" data-related="jhstrauss:Co-founder,seldo:Co-founder">Tweet<awesm:tweet>

Button parameters

The awe.sm-powered Twitter Tweet button automatically accepts all the same parameters as Twitter's version. The parameters listed below are exactly the same as the ones in Twitter's Tweet button documentation. As Twitter adds new parameters, they are automatically supported, even if they are not listed here.

Parameter	Description
class	The HTML class of the tag, used to locate it. Not technically necessary for an awe.sm button.
data-url	The URL to be shared. Defaults to the URL of the current page.
data-text	The pre-filled text of the tweet. Defaults to the title of the current page.
data-count	Where to include the tweet count for the button. Can be `horizontal`, `vertical` or `none`, defaults to `vertical`.
data-via	A Twitter username that will be mentioned in the tweet, e.g. "(via @myusername)". No default.
data-related	Up to 6 comma-separated account usernames that Twitter will recommend the user follow after tweeting (only 2 are ever shown at a time). No default. A description for each username can be added after a colon.
data-lang	The language in which to render the button UI. Can be `en` (English, the default),`fr` (French), `de` (German), `es` (Spanish), `ja` (Japanese). Note that the choice of language will also affect the size of the button, as the label is longer in some languages.
data-counturl	The URL to be used for the button count (should be the canonical URL to which your data-url resolves).

Note that Twitter will wrap all links in its own "t.co" domain. Users will see a t.co URL in the tweet-composition window. However, their followers will see awe.sm, or your custom domain, when the link is in their timeline.

Examples

1. Share current URL using simplest badge

Tag:

<awesm:tweet href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</awesm:tweet>

JavaScript:

<div id="button1"></div>
<script>
AWESM.onavailable = function() {
    AWESM.tweet({
        'awesm_buttonid': 'button1',
        'data-count': 'vertical'
    });
};
</script>

IFRAME: (absence of class parameter is intentional)

<iframe allowTransparency="true" frameborder="0" scrolling="no" 
src="//widgets.awe.sm/v3/tweet_button?data-count=vertical&awesm_key=5c8b1a212434c2153c2f2c2f2c765a36140add243bf6eae876345f8fd11045d9"
style="border:none; overflow:hidden; width:55px; height:62px;"></iframe>

2. Share specified URL using a more complex badge and a custom campaign