Adding the AddThis button to your webpage

AddThis is an easy to use bookmarking and sharing service. Having the AddThis button on your site allows your users to bookmark and share your content. Adding the AddThis button is quick and simple - it can be done in 5 minutes or less!

In this article we will use WebMatrix. WebMatrix is a free tool that allows you to create, customize, and publish webpages. It gives a number of different ways that you can create websites. One of the features is providing existing open sources applications such as WordPress, Joomla, DotNetNuke or Umbraco.

Create a website with WebMatrix

If you need help downloading and installing WebMatrix, it may be a good idea to read Getting Started with WebMatrix. The article provides step by step instructions on installing WebMatrix

After WebMatrix is finished installing, open it. Click "Site from Template" on the WebMatrix welcome screen.

For this example we will use the Bakery template. This template is a full-featured HTML5 site that provides a basic ecommerce presence. This sounds like a perfect site to add our AddThis button to. Click the Bakery template and give your site a name.

Clicking ok will take you to your WebMatrix workspace. This contains information about your local host as well a provides resources on developing your site.

You’ll notice that WebMatrix allows you to move between different workspaces by selecting the buttons on the left hand side. At present the Site button is selected which gives you details on your web site, such as the URL of the site, and other tools that you can use such as monitoring your site requests. You can look into this workspaces as you work but for this article, we will be working with our Files workspace. To get to your Files workspace, click the "Files" tab on the lower left hand of WebMatrix.

Once in your Files workspace you can see all the files that are given to you with the Bakery template. Let's check out our site. Click the "Run" button on your menu ribbon.

Your Bakery site will be open in your default browser.

You can take a look around the bakery site to see everything that WebMatrix has given you. In other articles on this site you’ll explore how to customize the site. For now, let's add our AddThis button.

Get the AddThis Button

To get your AddThis button, go to the Addthis website here.

You can configure your AddThis button right on the AddThis homepage. You can choose the AddThis display setting and if you want your button to use analytics. To get your button, click the "get your button" button.

If you haven't signed in yet, you will be prompted to sign in or create an AddThis account (if you do not already have one).

Once logged in you will be directed to a webpage with the code for your AddThis button.

Copy your AddThis button code. Yours should be similar to this:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
    <a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a>
    <a class="addthis_button_compact"></a>
</div>
<script type="text/javascript">
    var addthis_config = { "data_track_clickback":true };
</script>
<
script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username="></script>
<!-- AddThis Button END -->

Now let's add our AddThis button to your Bakery website.

Add the AddThis Button

Head back to WebMatrix. Open your Default.cshtml page. You may notice that this page does not contain all the code to make a valid HTML webpage (there is not <html>, <head>, or <body> tags). This is because the Bakery template uses a SiteLayout file to render the page. Your Default.cshtml file only contains the code the will be placed within the <body> tags. Using a SiteLayout file gives your site a consistent look and feel.

Let's add our AddThis button to our page. Directly under the <h1> tag with our site's header, add your AddThis button code we got from the AddThis website.

Run your Default page by clicking the run button on the menu ribbon. You should see your AddThis button under the page's heading.

Adding our AddThis button was that simple and quick! In addition to this add this button, we can also customize our button using the AddThis API. Below the box where we got our AddThis button code is a link to the API page.

You can click on this link or go here.

Customizing the AddThis button


AddThis has numerous different ways to customize the AddThis button. You can simply customize what share options are displayed by adding some simple HTML code or you can write JavaScript to render the button. Whichever you choose, the AddThis website offers a great resource on customizing the AddThis button so you can display it on your webpage however you want.

Instead of showing numerous icons showing your users how they can share this page, you can add the "compact" button which shows up as a simple, plus sign icon. When users mouse over the icon, a little tool box will pop up with all the share options they have.

The compact button can be added with a few lines of code. Firstly, remove the AddThis button code that was generated for you from your Bakery website.

Now we need to add our button code. Add this code anywhere to your Default.cshtml page:

<div class="addthis_toolbox" addthis:url="<your site's url">
   <a class="addthis_button_compact"></a>
</div>

Now we need to add the JavaScript code that will make our button work. Part of this JavaScript code is part of the code that the AddThis site generated for you. Add this to your Default.cshtml:

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=yourusername"></script> 

Let's run our file to see how our compact button looks. Since I've added my button directly after the <h1> of our page, the button will appear directly under it.

Mousing over the icon will cause the AddThis toolbox popup to appear where users can decide how to share our page.

With our compact button added, we can configure it. AddThis offers numerous ways to configure this button we've added. This configuration options can be seen under UI Configuration Options here.

Say, for example, we want to exclude certain ways to share our page from the toolbox. We can quickly add this code in a few lines. Add this code:

<script type="text/javascript">
    var addthis_config = { 
        services_exclude : "myspace, google"
    };
</script> 

This JavaScript code will exclude MySpace and Google as sharing options. Run your page and mouse over the AddThis icon to see these services excluded.

You may notice that there are numerous ways to share your page. Instead of excluding numerous services to allow your users to only share with certain services, you can use the compact services configuration instead. Let's do that now.

Instead of choosing which services to exclude, we can now define which services we want included. Replace:

services_exclude : "myspace, google"

With:

services_compact: 'print, email, favorites, facebook' 

Here we have said to include the services of print, email, favorites, and facebook. You can choose whatever services you want. A full list of services and this string names can be found here. This list can be used for services to be excluded as well.

Run your page. Mousing over the AddThis icon will show your toolbox with the services you choose to be included.

Other configuration options can be added just like this. The nice thing about the AddThis Client API page is that it provides the variable name, description, type and default value. This is a great way to help you get started further configuring your AddThis button.

This was just a quick introduction to get you started adding the AddThis button and customizing it. AddThis is easy and quick to add to your webpage. It also let's you easily customize the button so you can display it however you want on your webpage.

Additional Resources

Download WebMatrix http://www.microsoft.com/web/webmatrix/

Learn how to Download and Install WebMatrix http://www.microsoft.com/web/post/web-development-101-part-1-getting-started-with-webmatrix

Learn more http://www.microsoft.com/web/post/Web-Development-101-using-WebMatrix

Create a website with a WebMatrix site template http://www.microsoft.com/web/post/create-a-website-from-a-webmatrix-site-template

Publish your website http://www.microsoft.com/web/post/how-to-publish-a-web-application-using-webmatrix

Learn to download, edit and republish your website http://www.microsoft.com/web/post/download-edit-and-republish-your-website-with-webmatrix

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!