awe.sm-powered Share Buttons

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

Facebook Share button

Our version of the conventional Facebook sharecount button lets a user share your content on Facebook. When the user clicks the Share button on your site, a pop-up is invoked in which they are asked to compose a comment. If they complete the share from the pop-up, a link story (with a preview image, title, and description in addition to the user's comment) appears in the user's friends' News Feed with a link back to your website.

Our Facebook Share button is an older method of sharing content to Facebook. Instead of just posting a single sentence to the user's wall, a link with a preview image and an excerpt is posted, plus an optional message from the user who shared the link. Some developers prefer it for this reason; others just prefer the look of our button to Facebook's Like button UI.

Pages shared by the Share button will get a thumbnail and excerpt according to Facebook's own rules. You can optimize your page to provide special thumbnails and excerpts; see the Facebook Share button documentation for details and you can use the Facebook Debugger for testing. Learn more at fbShare.me….

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:fbshare></awesm:fbshare>

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="mysharebutton"></div>
<script>
AWESM.onavailable = function() {
    AWESM.fbshare({
        'href': 'http://example.com/my-page.html',
        'awesm_buttonid': 'mysharebutton'
    });
};
</script>

The awesm_buttonid parameter is necessary when using the onavailable method. The href 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/fbshare_button?awesm_key=XXXXXXXXXX"
        style="width:53px; height:69px;"></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.

Configuring your button

The appearance of your button is controlled by just a few parameters:

In addition to these parameters, which are specific to the Facebook Share button, all our buttons accept a common set of awe.sm parameters for advanced tracking.

Examples

1. Share the current page using default badge size, colors and title

Tag:

<awesm:fbshare></awesm:fbshare>

JavaScript:

<div id="button1"></div>
<script>
AWESM.onavailable = function() {
    AWESM.fbshare({
        'awesm_buttonid': 'button1'
    });
};
</script>

IFRAME:

<iframe allowTransparency="true" frameborder="0" scrolling="no"
src="//widgets.awe.sm/v3/fbshare_button?awesm_key=5c8b1a212434c2153c2f2c2f2c765a36140add243bf6eae876345f8fd11045d9" 
style="border:none; overflow:hidden; width:53px; height:69px;"></iframe>

2. Share a given url using a short, wide button with custom colors

Tag:

<awesm:fbshare size="small" href="http://www.example.com/my-page" title="My Example Page" color="000000" bgcolor="FFFFFF"></awesm:fbshare>

JavaScript:

<div id="button1"></div>
<script>
AWESM.onavailable = function() {
    AWESM.fbshare({
        'size': 'small',
        'href': 'http://www.example.com/my-page',
        'title': 'My Example Page',
        'color': '000000',
        'bgcolor': 'FFFFFF',
        'awesm_buttonid': 'button1'
    });
};
</script>

IFRAME:

<iframe allowTransparency="true" frameborder="0" scrolling="no" 
src="//widgets.awe.sm/v3/fbshare_button?size=small&href=http%3A%2F%2Fwww.example.com%2Fmy-page
&title=My%20Example%20Page&color=000000&bgcolor=FFFFFF
&awesm_key=5c8b1a212434c2153c2f2c2f2c765a36140add243bf6eae876345f8fd11045d9"
style="border:none; overflow:hidden; width:53px; height:69px;"></iframe>

3. Share current URL using a short, wide button, custom tool id, campaign and notes

Tag:

<awesm:fbshare size="small" awesm:tool="tW9Nkd" awesm:campaign="my-campaign" awesm:notes="abc123"></awesm:fbshare>

JavaScript:

<div id="button1"></div>
<script>
AWESM.onavailable = function() {
    AWESM.fbshare({
        'size': 'small',
        'awesm_tool': 'tW9Nkd',
        'awesm_campaign': 'my-campaign',
        'awesm_notes': 'abc123',
        'awesm_buttonid': 'button1'
    });
};
</script>

IFRAME:

<iframe allowTransparency="true" frameborder="0" scrolling="no" 
src="//widgets.awe.sm/v3/fbshare_button?size=small&awesm_tool=tW9Nkd
&awesm_campaign=my-campaign&awesm_notes=abc123
&awesm_key=5c8b1a212434c2153c2f2c2f2c765a36140add243bf6eae876345f8fd11045d9"
style="border:none; overflow:hidden; width:53px; height:69px;"></iframe>

Last updated 2012-02-16