How to Validate AddThis Code with HTML5 and JavaScript

If you want to pass HTML5 validation using the AddThis code, you will fall into a few issues as some of the ID’s and tags used is invalid in HTML5. Passing the code through the W3C Validation will indicate errors in the code such as “fb:like:layout” “tw:via” etc. Here is an example of our code which validates correctly using HTML5 by replacing these values with simple JavaScript. Use JavaScript to replace the values in your HTML code. See example below:

Main snippet we use to display the AddThis code

Explanation of Code Snippet

Line 3, 4 and 5: We have stripped out all the HTML5 invalid arguments from the code and replaced each link with a unique ID.

Line 4: We have also added a “Style” to Google Plus+ because for some reason the Google+ code horizontal layout is incorrect for us. Adding a style width you can manage the horizontal spacing for each social media icon.

Now to the Java Script component

Line 9: We added var addthis_config. For some reason AddThis was placing a tracking code in the URL which we didn’t like (Even though we unticked “Track when users share by copying your URL”). This disables this option for us. If you want to track your URL’s shared on AddThis, we suggest you delete this line as it’s not needed and replace with var addthis_config = {“data_track_addressbar”:true}

Lines 11 to 14: We now add JavaScript to add values to our Social ID’s. We add the Facebook Button Count, Facebook Width and our Facebook Company Website. Remove the fb:like:href if you want customers to like the page they are currently visiting. Or replace it with your home page. The choice is yours.

Lines 16 and 17: For Twitter, we added the tw:via so that we are mentioned on the tweet and we can easily reply back to the tweet if needed. Makes our lives easy to communicate with our customers.

Lines 19 and 20: For Google Plus, we only added the g:plusone:size which makes the social icon the same size as the other icons. For some reason if you don’t add this, the icon size is defaulted to “Small”.

There are many more variables you can use from the AddThis Support Documentation. Using this method you can add variables to customise and fit your website theme. As you can see you can also add custom CSS for width and styles.

Line 22: The final part of the snippet is to call the Addthis Javascript code. If you want analytics tracked by Addthis, don’t forget the hashtag “#” tag and account information after the addthis_widget.js Example: addthis_widget.js#YOURACCOUNT

Hope this helps to answer some of the questions regarding validating the Addthis code using HTML5.

Comments