awe.sm-powered Share Buttons

What are these?

Twitter and Facebook provide widgets for you to embed on your website to encourage users to share your content on those sites. We can seamlessly add awe.sm tracking to the buttons you're already familiar with. If you don't like the look of the standard Twitter and Facebook buttons, we also provide a set of JavaScript methods to trigger sharing on a variety of social networks.

Facebook Like button

The Like button lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a one-line story appears in the user's friends' News Feed with a link back to your website. Your page will also appear in the "Likes and Interests" section of the user's profile, and you have the ability to publish updates to the user. If the user enters an optional comment after the Like, a larger story will appear in the user's friends' News Feed. Learn more…

Facebook Send button

The Send Button allows your users to easily send your content to their friends. People will have the option to send your URL in an inbox message to their Facebook friends, to the group wall of any Facebook group they are a member of, and as an email to any email address. While the Like Button allows users to share your content with all of their friends, the Send Button allows them to send a private message to just a few friends. Learn more…

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. Learn more…

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…

How do I use them?

There are three ways. See the documentation for each button for parameters that allow you to customize the appearance and behavior of your buttons. The custom tag and JavaScript methods both support global parameters to configure multiple buttons simultaneously.

1. Custom tag method
   • Include the awe.sm JavaScript library
   • Put our special tag wherever you need a button
   • Use if: you want the simplest, easiest implementation
   • Best for most use cases
2. JavaScript call method
   • Include the awe.sm JavaScript library
   • Make JavaScript calls specifying HTML tags to be replaced by buttons
   • Use if:
     • You don't always want the button to show immediately
     • The URL you want users to share is generated by JavaScript
   • Best for dynamically-generated content, JavaScript apps.
3. IFRAME method
   • Put an IFRAME tag wherever you need a button
   • Use if: your configuration does not allow the inclusion of the JavaScript library
   • Not all Facebook functionality is available in IFRAME buttons

Custom tag method

This is the easiest method, and works well on blogs and other content-management systems where you can make simple additions to your templates.

Step 1: include the awe.sm JavaScript library

See the JavaScript library for instructions. You only need to include the library once, no matter how many different buttons are on the page.

Step 2: put a special HTML tag wherever you need it. For example, for the Facebook Like button:

<awesm:fblike show_faces="false" width="450"></awesm:fblike>

See more examples: Facebook Like, Send, Share, and Twitter.

JavaScript call method

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.

Step 1: include the awe.sm JS library

See the JavaScript library for instructions. We recommend loading the library asynchronously for best performance.

Step 2: set a JavaScript callback (asynchronous library)

If you are loading the awe.sm library asynchronously as recommended, you should embed your calls to the AWESM object inside the AWESM.onavailable callback function. This function will be called as soon as the AWESM object is fully ready. The first parameter to the callback function is the user's sessionId, in case you wish to capture that for your own use.

You can only define the onavailable method once. If you are calling multiple buttons, you can put multiple buttons calls inside the onavailable method.

The awesm_buttonid parameter specifies where on the page the button will appear via an HTML ID; the HTML element with that ID will be replaced by the button. If you omit this parameter the library will not know where to put the button, and will log an error to console.

Example using a Facebook Send button:

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

See more examples: Facebook Like, Send, Share, and Twitter.

IFRAME method

If you are integrating into a system that is hostile to third-party JavaScript, you can call awe.sm sharing buttons via an IFRAME tag. Note that you must include your awe.sm API key in the URL as awesm_key. This method does not require the awe.sm JavaScript library to be included.

Some features are not supported in the IFRAME case: * Facebook does not support rendering the Send button in an IFRAME. * Since the awe.sm JavaScript library is not present, pageviews and conversions are not automatically counted.

If you include multiple IFRAMED buttons per page, you should pass the parameter capture_data set to false. Failing to do so can result in double-counting clicks and pageviews. Example using the Tweet button:

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

If you're using WordPress, you can use our Twitter Tweet button plugin or Facebook Share button plugin. A single plugin to add one or more or any of our buttons is coming soon.

See more examples: Facebook Like, Send, Share, and Twitter.

Last updated 2012-02-16