Graphic Identity Program

Web Template: Pre-2014

AddThis Add-on

 

Step 1: Get the code

  • Go to https://addthis.com (use "https://" when creating an account)
  • For "Select your service"
    Select "Website"
  • For "Select a button style"
    Select the last option
  • For "Do you want analytics?"
    If you want to track the usage of your share button then you will need to register for an account and select "yes" otherwise select "no"
  • Click on "Get Your Button"
  • A new page should load with your AddThis code:

    <!-- AddThis Button BEGIN -->
    <div class="addthis_toolbox addthis_default_style">
    <a href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4b9e9016068f0c2c" class="addthis_button_compact">Share</a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4b9e9016068f0c2c"></script>
    <!-- AddThis Button END -->


Step 2: Implement the code

NOTE: Not all of the AddThis code will be used

  • Find the toolbar code in your template, example below.
    <div id="toolbar"><ul><li></li><ul></div>

  • Place the orange highlighted AddThis link code, illustrated below, between the <li> and </li> tags in the toolbar.
  • Place the gray highlighted AddThis script, illustrated below, above the </body> tag in your page HTML.
    <!-- AddThis Button BEGIN -->
    <div class="addthis_toolbox addthis_default_style">
    <a href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4b9e9016068f0c2c" class="addthis_button_compact">Share</a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4b9e9016068f0c2c"></script>
    <!-- AddThis Button END -->


Step 3: Remove the icon and apply styles

  • Place the code below above the </body> tag in your page HTML, but below the script you added in Step 2.

    NOTE: In order for the AddThis tool to display correctly, the styles need to load after the AddThis JavaScript.

    <script type="text/javascript">
    var addthis_config = {
    services_compact: 'email, facebook, twitter, myspace, google, more',
    services_exclude: 'print',
    ui_click: true
    }
    </script>

    <style type="text/css">
    .at300bs.at15t_compact{
    background-image:none;
    }
    .at300bs{
    display:inline;
    }
    </style>
  • The AddThis feature should now appear in your toolbar.

 

 

Life is good at WSU.

Marketing and Creative Services, PO Box 641227, Washington State University, Pullman WA 99164-1227, 509-335-7622, Contact Us