Django's template engine and the AddThis plugin with a Twitter template.

I ran into a problem recently that had me stymied for a full day, I was working on a feature ticket for my current project, the ticket requested adding a social media sharing button to each favorite list on the site. Another project had used the AddThis plugin with a lot of success and we decided to use the plugin again. I am not a JS/UI wizard but was able to implement the feature using the AddThis plugin before lunch with little fuss. Pushed the code up, my lead and I hammered at the feature for a while, and then did some polishing. One thing I wanted to do was use a template for formatting the Twitter post, using the AddThis default the link was not being shortened with bit.ly or formatted well in Twitter, and decided to give the template option a try. Like the configuration for AddThis all that was required for using a template with Twitter was the creation of a new JS object assigned to the 'addthis_share' variable.

    var addthis_share = {

          templates: {

                  twitter: 'Check this out! {{url}}'

          }

    };

After adding this I refreshed the browser, clicked the share button and selected Twitter. Checking the outgoing message I notice that the post was 'Check this out! ' without the url. I went over the syntax several times looking for the most minute error and tried a few other options but nothing seemed to have an effect. I then posted my issue to the AddThis forum, put the word out among developers and slept on the problem.

The next day after some discussion I decided to have a look at possible name-space collisions and started pulling out other pieces of the JS for the project to see if that would have any effect. I also started scrutinizing the JS using Firebug and noticed while comparing my project to a mockup page using the AddThis plugin that the JS wasn't getting the '{{url}}' in the template, and that is when I realized what the problem was. This is a python/django site and the django template engine also uses the '{{ VARIABLE }}' token syntax. To test this theory I tried setting the '{{url}}' token in the Twitter template to something I knew django had a value for and sure enough out popped 

 'Check this out! /m/'

The final elegant solution was to construct the AddThis template string

 

 'Check this out! {' + '{url}' + '}'

so that django would leave it alone while rendering the page, allowing AddThis to render the Twitter template with the '{{url}}' token intact.

Many thanks to my friend Brendan McNerney and his co-worker Paul Denya for their help on this, it would have taken me a while to come up with a solution as simple as '{' + '{url}' + '}' if Paul had not suggested it.

The lesson learned here is that two seemingly orthogonal technologies like a JS plugin and a template engine written in python can interact and have unintended side-effects when working within the same context. In this case the common context was the HTML template.