How to add Addthis to your Ashop Website

19 Aug

How to Add Social Bookmarking to Your Website with Addthis

Addthis is a popular one stop social bookmarking tool that integrates all social networking sites to one interface. The service is completely free and if you register for the service, they e-mail you click statistics periodically.

If you decide to integrate another social book marking tool, or a website button twitter’s or facebook’s, you will still find the implementation steps useful.

Step 1: Decide where to place Addthis button

Think about your design, and find a suitable place where your customers will easily spot the tool. In the implementation step we will go over Widget Sections,
Product Listing Pages, Header.

Step 2:  Choose A Button Design.

Below Designs are offered by Addthis. You changing the botton design, and modifiying the services offered in it later on.


Bookmark and Share
Bookmark and Share

Step 3: Get the Addthis code from your Addthis.com

For “Select your service” choose Website (the first available option). Choose your button style, if you want analyrtics select that and press “Get your button”. On the next page you will see a code that looks the codes below. Copy the code and paste it into a text editor. (If you don’t want the analytics service you can use the codes below as well)

<!– AddThis Button BEGIN –>

<a class=”addthis_button” href=”http://addthis.com/bookmark.php?v=250&amp;username=xa-4c107fd731f6d808″&gt;

<img src=”http://s7.addthis.com/static/btn/v2/lg-share-en.gif&#8221; width=”125″ height=”16″ alt=”Bookmark and Share” style=”border:0″/></a>

<script type=”text/javascript” src=”http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c107fd731f6d808″></script&gt;

<!– AddThis Button END –>

<!– AddThis Toolbox BEGIN –>

<div class=”addthis_toolbox addthis_default_style”>

<a href=”http://addthis.com/bookmark.php?v=250&amp;username=xa-4c10a13931d5f773&#8243; class=”addthis_button_compact”>Share</a>

<span class=”addthis_separator”>|</span>

<a class=”addthis_button_facebook”></a>

<a class=”addthis_button_myspace”></a>

<a class=”addthis_button_google”></a>

<a class=”addthis_button_twitter”></a>

</div>

<script type=”text/javascript” src=”http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c10a13931d5f773″></script&gt;

<!– AddThis Toolbox END –>

Step 4: Implement the code To implement the code as a widget;

  1. Go to your Store Admin then Layout / Widget Layouts
  2. Choose the widget Layout that you want to edit.
  3. Select The Section or the column that you want widget to appear.
  4. Select Add New Content To “..” for the section that you have selected and Add a Text Field
  5. On the Pop Up menu that appears, select the “source” on the rich text editor
  6. Paste the code
  7. Select the Pages that you want the code to appear (Default option has all Pages selected)
  8. Press Add to close the Pop Up
  9. Press Save to Save the changes you made

To Implement on the Header

  1. Go to your Store Admin then Layout / Themes
  2. Choose the widget Theme you want to edit.
  3. Under General Settings Tab, Choose the display sub tab.
  4. Select Header/Footer Edit Content
  5. On the Pop Up menu that appears, select the Header Content tab and “source” on the rich text editor.
  6. Paste the code
  7. Press Apply & Close

To Implement the Code on Product Pages:

  1. Go to your Store Admin then Layout /Product Detail Page Design
  2. Choose the Product Detail Page Design that you want to edit
  3. Select the HTML tab
  4. Find a place that you want the code to appear, and paste the code.

(Suggestion: one great spot is right under the product price box. By default Ashop has placed a Share with a Friend at that spot. To remove that text and add the Addthis code. Delete the code below and paste the addthis code instead. <td><img border=”0″ src=”/resources/01/1/picture/02/770.gif” width=”13″ height=”9″></td> <td>[EmailToFriend]</td>

Options For Customazing Your Addthis Button Customizing Header color Add the code below to the beginning of your Addthis code

<script type=”text/javascript”> var addthis_config = { ui_header_color: “#ffffff”, ui_header_background: “#000000” } </script>

Changing the Design for Button Style Upload an image to your online store or find an image online that you want to use. Get the image location address and replace it with the bold part of the code below. Depending on the size of your image you might want to modify the size parameters in your code (also bold in the code) (example: http://s7.addthis.com/static/t00/logo100100.png)

<!– AddThis Button BEGIN –> <a class=”addthis_button” href=”http://addthis.com/bookmark.php?v=250&amp;username=xa-4c107fd731f6d808″&gt; <img src=”http://s7.addthis.com/static/btn/v2/lg-share-en.gifwidth=”125″ height=”16″ alt=”Bookmark and Share” style=”border:0″/></a> <script type=”text/javascript” src=”http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c107fd731f6d808″></script&gt; <!– AddThis Button END –>

Bookmark and Share

Chaning the Design for Toolbox Style

Changing the icons for Toolbox items is similar to changing the button style. See the below sample code and the example for a demonstration. For Adding and removing services, you can multiply or delete the code line below as many times you want

<a class=”addthis_button_*service name here*”><img src=”*image address here” width=”60″ height=”60″ alt=”*description here*” /></a>

You can customize the presentation with CSS like below as well;

<style>

.addthis_toolbox .custom_images a

{

width: 60px;

height: 60px;

margin: 0;

padding: 0;

}

.addthis_toolbox .custom_images a:hover img

{

opacity: 1;

}

.addthis_toolbox .custom_images a img

{

opacity: 0.75;

}

</style>

<div class=”addthis_toolbox”>

<div class=”custom_images”>

<a class=”addthis_button_twitter”><img src=”http://mysocialbuttons.com/socialicons/twitter.png&#8221; width=”60″ height=”60″ alt=”Twitter” /></a>

<a class=”addthis_button_facebook”><img src=”http://mysocialbuttons.com/socialicons/facebook.png&#8221; width=”60″ height=”60″ alt=”Facebook” /></a>

<a class=”addthis_button_myspace”><img src=”http://mysocialbuttons.com/socialicons/myspace.png&#8221; width=”60″ height=”60″ alt=”MySpace” /></a>

<a class=”addthis_button_digg”><img src=”http://mysocialbuttons.com/socialicons/digg.png&#8221; width=”60″ height=”60″ alt=”Digg” /></a>

</div>

</div>

Twitter
Facebook
MySpace
Digg

Changing the Contents of an Button

Add the Javascript Below to the beginning of your Addthis Code. You can enter any service that is available at Addthis between the brackets. For full list of services please refer to http://addthis.com/services/list

<script type=”text/javascript”>

var addthis_config = {

services_compact: ’email, facebook, twitter, blogger, googlebuzz, googlereader, delicious, digg, friendfeed, linkedin, messenger, more’,

services_exclude: ‘print’

}

</script>

—————

For Further information check the help section of Addthis.

http://addthis.com/help

List of All Addthis User Interface Configurations

http://addthis.com/help/menu-api#configuration-ui

For More information on all available services

http://addthis.com/services/all