How to customize AddThis on Blogger

If you plan to use or are using the AddThis widget on Blogger, you may find that you cannot easily control where to make your AddThis share buttons appear.

When installing AddThis for Blogger, normally you would use its Blogger widget. I find this too bulky as it uses javascript to parse your template to render the buttons. Sure you can modify the script so that you can position your buttons elsewhere but I don't find that solution flexible enough.

Instead of using the Blogger widget, I will show you how to use the AddThis website code on your Blogger template.

In your AddThis account (sign up if you haven't got one), grab the code for the buttons.

Instead of selecting Blogger in the Get AddThis for section, choose A Website

Configure the style and options as you want it then copy the code generated.

Now in your Blogger template, paste the code where you want your share buttons to appear in. Here are some suggested positions:

• After the post title. Paste the code directly before <data:post.body/>
• After the post body. Paste the code directly after <data:post.body/>
• Both. Paste the code before and after <data:post.body/>
• Inside the post footer. This is the area where you can place the labels, author name, timestamp, comment count, etc. Look for the divs having the class post-footer-line. Depending on your template you have more or less 3 post-footer-line divs. Choose whichever div suits you and paste the code inside.

Add the highlighted text to your AddThis Toolbox div (or Button a) as follows:

<div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>

I am using the Toolbox so my code looks like this:

<div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>
 <a class="addthis_button_preferred_1"></a>
 <a class="addthis_button_preferred_2"></a>
 <a class="addthis_button_preferred_3"></a>
 <a class="addthis_button_preferred_4"></a>
 <a class="addthis_button_compact"></a>
 <a class="addthis_counter addthis_bubble_style"></a>
</div>

If you are using the Button, it'll be like so:

<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pubid=XXXXXXXXXXXXXXXXXXX" expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>
 <img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/>
</a>

You can read more about it on the AddThis site.

If you want to customize your AddThis buttons, see this and this.

Some notes:

• If you placed the AddThis script before the </body> tag, you might encounter some problems if you plan to use AddThis on the homepage/list pages (the buttons do not show up but works fine in the single post pages), try moving the <script> tag before the </head>.

So there you have it. If there is anything I missed (or messed up), just let me know! Comments are most welcome!