AddThis.com Social Tools

Demo: https://demo.wocode.com/addthis

Tutorial Video

Setup

This integration widget allows you to easily display AddThis social buttons on your website. The majority of the setup and styling takes place at AddThis.com. Toward the end of these instructions, we’ll work in Architect to complete the integration. Let’s get started!

SETUP AT ADDTHIS.COM

• Go to https://addthis.com
• Click the Dashboard button in the upper right corner of the page.
• If you don’t have an AddThis account, click the Sign Up link.
• If you already have an AddThis account, use one of the various sign in methods.
• If you are a returning user, you will be brought to your analytics page. To create a new tool, click the Add New Tool button.
• If you’ve just signed up, you should be prompted to create a new tool right away.
• There are a variety of tools:
  
• The available tool options with our widget are:
   – Share Buttons: These buttons allow users to share the page that the widget is placed on. – Follow Buttons: These buttons allow users to follow you on your social channels.  – Website Tip Jar: This option allows you to accept donations
• Choose an option from the available options listed above.
• Select a tool type.
  
• Different tools have different available tool types. The Share Buttons tool has the most tool types (shown above). Follow Buttons has two tool types, and Website Tip Jar has just one.
  Note: The “Image Sharing” and “Slider” Share Button tool types are not available with our widget.
• Use the tabs in the tool type options to customize your tool.
  
• There are extensive customization options. Proceed through all available options to customize your buttons to your liking.
• Click the Activate Tool button.

ACQUIRING YOUR ADDTHIS ID

• You will be brought to a page with instructions on how to embed the AddThis code onto a site. You can ignore all of this. All we need is your AddThis ID, which is in the URL at the top of the page.
• Copy the string of characters in the URL. The ID will be at the end of the URL, or near the middle of the URL, depending on whether you’re a new or returning user. The ID usually starts with “ra-…”
  

ACQUIRING YOUR INLINE TOOL ID

Inline tools require an additional ID to be defined in the widget. Inline tools are ones that are placed within the body of your page. Tools that are pinned (such as Floating, Expanding, Popup, etc) will not require an Inline Tool ID.

• When you create an inline tool, you will see an Inline Tool ID noted on the tool display on your Tools page. It consists of 4 characters.
  
• Note this ID so that you can enter it into the widget in Architect. If you click in the box to copy the ID, it will open the tool settings. So it is best to remember the code or write it down.
• The Inline Tool ID can also be found in the URL when you are in the tool settings.
• A good rule of thumb is that the Inline Tool ID will not be provided if it is not needed. For example, if you are viewing the tools on your Tools page, and are using a tool that does not provide an Inline Tool ID, it is not needed.

WIDGET PLACEMENT IN ARCHITECT

• Place the AddThis Social Tools widget in your site.
• You will notice that the widget shows a placeholder on your site, rather than the actual social buttons. The placeholder is used so that you can re-access the widget options as you like. The placeholder will not be seen when your site is published.
• Where you place the widget is dependent on the type of tool you’re using, and on what pages you would like the tools to be seen.
• Some tool types, such as the “Inline” option, will be published where it is placed within your page in Architect. However, note that certain placement elements are defined at AddThis.com.
• If you are using an Inline tool type, place it on each page that you would like the social buttons to be seen.
• Other tool types use a pinned location on the page, such as the “Floating” or “Expanding” Social Button options. For pinned tools, you may place the widget wherever you like. Placement will not impact the pinned location upon publishing.
• If you wish to have pinned social tools appear on all pages, place the widget in the header or footer.
• If you would like to have the social tools appear on some pages of your site, but not others, place the widget in the header or footer. Then define the pages you would like the social tools to be hidden on in the tool options at AddThis.com.
  

WIDGET SETUP IN ARCHITECT

• Paste the AddThis ID in the AddThis ID field. Instructions for acquiring this ID can be found above.
• Select the tool type in the Tool Type dropdown.
  
• These tool types correspond with the first level of options provided at AddThis.com:
  
• Keep in mind that the Share Buttons, Follow Buttons, and Website Tip Jar options are the only tool types compatible with our widget.
• If you are using an inline tool type (these are generally titled “Inline”), enter the Inline Tool ID. Instructions for acquiring the Inline Tool ID can be found above. If an Inline Tool ID is not provided on your Tools page at AddThis.com (it is not provided for tools such as Floating, Expanding, or Popup), leave this field blank.
• That’s it for setting up the widget!

TIPS

• Once you’ve published your site, you may update settings in your AddThis account as you like. For example, if you would like to see what different Share Button options look like (such as “Floating”, “Expanding” or “Popup”), simply publish your site with Share Buttons selected in the Tool Type dropdown. At AddThis.com, activate a tool of choice, then refresh your website. All changes will be seen on your site after changes are made at AddThis.com.
• Only the Inline tool types require the Inline Tool ID to be entered in our widget. The field should not be used with other tool types.
• If you have any trouble seeing your AddThis buttons, try refreshing your published page, along with the Tools page at Addthis.com. If you don’t see the update immediately, just wait a bit.
• Our widget places a bit of code on your site that allows AddThis to find your site and remember your domain. If you wish to view your analytics at AddThis.com, give it a few days to find your site. Your analytics and domain info will be updated automatically.