Step 1: Setup awe.some powered share buttons

Step 1: Set Up awe.some Powered Share Buttons

Last Updated: Oct 18, 2018 04:49PM PDT

The best way to get started with awe.some is to use our share buttons on your website. These buttons take just minutes to set up, and work with leading social networks like Twitter and Facebook. And best of all, once they’re on your site, we will automatically track every user share that they generate.

Selecting Your Buttons

We currently support tracking user sharing via Facebook and Twitter buttons. If you want to use share buttons for any other social network – like Pinterest, Google +1, or LinkedIn; you can easily do so using our APIs. Here are the buttons we have automatic support for;

Facebook Like Button

The Facebook Like button lets a user share your content with their friends on Facebook. When the user clicks the Like button on your site, a story appears in the user’s friends’ News Feed with a link back to your website.

Facebook Send Button

The Send Button allows users to send content to their Facebook friends, Facebook groups, or to any email address. While the Like Button allows users to share content with all of their friends, the Send Button enables them to send a private message to just a few friends.

Twitter Tweet Button

The Tweet Button is a allows users to easily share your content  to their followers on Twitter, without having to leave your page.

Please note, awe.some share buttons are designed to be deployed on your website. If you would like to enable share tracking in non-HTML based applications, we recommend that you use our APIs.

Setting Up Your Buttons

Setting up awe.some powered share buttons is easy. In fact, if you already have share buttons on your site from another social network, this process will seem very familiar. And because our share buttons look just like the share buttons you have today, your users will not notice a difference in the way your site looks.

Step 1: Deploy the awe.some Conversion Library

You’ll first need to include the awe.some JavaScript library on each page of your site. To do so, copy and paste the code below onto every page in your website. It is designed to work in both HTTP and HTTPS, and will load asynchronously to ensure your page renders as fast as possible.

<script>
var AWESM = AWESM || {};

AWESM.api_key = ‘XXXXXXXXXX’;

(function() {
var js = document.createElement(‘script’); js.type = ‘text/javascript’; js.async = true;
js.src = ‘//widgets.awe.sm/v3/widgets.js?key=’ + AWESM.api_key + ‘&async=true’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(js,s);
})();
</script>

Be sure to replace “XXXXXXXXXX” with your own awe.some API key. Not sure what you API key is? No problem — You can find it on the Project Settings screen.

It is also possible to load the javascript library synchronously, although we discourage using this because it slows down your site.

Step 2. Select Your Share Buttons

awe.some has built in support for several of the most commonly used share buttons from Facebook and Twitter. To use them on your site, simply copy the snippet of code associated with each one below, and paste it into your HTML where you want the button to appear. And remember — you don’t need to keep your old share buttons any more, so be sure to remove them from your site HTML.

<!–Facebook Like Button–>

<awesm:fblike width=”450″></awesm:fblike>

<!–Facebook Share Button–>

<awesm:fblike width=”450″ send=”true”></awesm:fblike>

<!–Twitter Tweet Button–>

<awesm:tweet></awesm:tweet>

Do you want to track user shares on other social networks like Google +1 or Pinterest? It’s not that hard. Check our API documentation on configuring awe.some to track sharing from other social networks.

Step 3. Customize Your Share Buttons

It is possible to alter the look of your sharing buttons so they fit in better with the design of your site. We support most of the customizations that are already offered by Facebook and Twitter; including the ability to change the size, orientation, and even the color of the buttons.

Adding Customizations

To include a customization, simply add the parameter to the awe.some tag. The example below that shows how to change the color of a Facebook Like button:

<awesm:fblike width=”450″ colorscheme=”dark”></awesm:fblike>

This shows how to change a Twitter button to display the Tweet count above the button:

<awesm:tweet data-count=”vertical”></awesm:tweet>

See a complete list of the customizations for Facebook Like buttons, Facebook Send Button, and the Twitter Tweet button.

Step 4. Test Your Share Buttons

Now make sure everything is working correctly. Go to one of your pages, and share it through one of the awe.some powered shared buttons that was just setup. Afterwards, login to the awe.some reporting dashboard. The share should appear on your dashboard within 60 seconds.

If you do not see the share, wait a moment, and try sharing it again. If you run into any problems, please check our FAQ, or contact us and we’ll help you out.

Up Next? Setting Up Conversion Goals

Ok, so now that you’ve finished the basics, how about you go even further? In the next Getting Started Guide, we’re going to show you how to set up conversion goals. These goals will help you understand exactly how user sharing drives meaningful business results like signups, purchases, and revenue.