Tutorial #14
Add Sharing buttons using AddThis Basic   2013-11-07

Introduction

Pretty much every site that you visit has a row of Share icons that make it easy for you to create a post to Facebook, Twitter, etc. that links back to the page you are on.

Personally I find them distracting but they are ubiquitous. You could write your own code to implement this but there are services that let you generate the code in just a few clicks.

This tutorial shows you how to use the AddThis service to generate an icon bar like this:

Screenshot of the demo for this tutorial


Step by Step

1: Go to AddThis, click on the Get the Code menu and select Share Buttons

2: In the Options panel select Get sharing buttons for for a Website. Choose your preferred style of buttons from the 5 alternatives shown. I chose the second one with large icons in a horizontal row.

Screenshot of the demo for this tutorial

3: The Add to your site panel is grayed out with a dialog that asks you to Sign In. You don't need to do this. Below the Sign In is a link marked Don't want analytics?. Click this and the dialog disappears.

Screenshot of the demo for this tutorial

Update - March 2014 - the site now requires that you create an account

4: Click Grab It to copy the code your clipboard and then No, thanks in the popup window that appears.

5: Paste the code into your web page, save and reload.

Clicking on the Facebook button, for instance, will bring up a Facebook window in which you can enter text that will appear in your Timeline along with the link. They should all work as you expect. The Plus Sign button brings up a menu that contains even more sites that you might want to share this page with.


Understanding the Code

The div contains a placeholder link for each button. Note that these do not have a target URL.

The script looks at which placeholder links are present and generates the real buttons and links.

The class names in the div define the style and layout of buttons that will be used.


Code for this Tutorial


Share this tutorial



Comment on this Tutorial


comments powered by Disqus