Adding the AddThis Widget to Graffiti Posts

Author wayne on March 26, 2008

I'm playing around with Grafitti a bit and figured I'd add the Add This widget to each post. I didn't see anything inherent in the application to do this, so I thought I'd do it manually. If you are not familiar with Add This, you're in good company. I just signed up for the service myself and I'll use it to replace the Insert Bookmarking Tags add-in for Windows Live Writer.

Add This comes in two flavors, one for users to bookmark posts to their favorite social bookmarking site, the second is for providing a way for users to obtain your feed. This post will focus on the former. Perhaps a post on the feed widget will soon follow.

Graffiti is a CMS that grew out of Telligent's purchase of the old Dozing Dogs CMS (as I understand it). The application provides a complete theme methodology, and the theme files are where we are going to make our changes to include the Add This widget.

Within your selected themes files, find post.view and open it for editing. I'm going to add my instance of the Add This widget to the bottom left of each post. Because we are editing post.view, the component will only render when a user actually views the post. That seemed a bit redundant, but anyway, on with the show.

Install the Code

Here is the code I used for my install that I obtained from AddThis.com (truncated (...) due to length):

<!-- ADDTHIS BUTTON BEGIN -->
<script type="text/javascript">
  addthis_pub = 'TPU';
  addthis_brand = 'TPU';
</script>
<a href="http://www.addthis.com/bookmark.php" 
onMouseOver="return addthis_open(this, '', '[URL]', '[Title]')" ...
  <img src="http://s9.addthis.com/button1-bm.gif" width="125" height="16" 
  border="0" alt="" />
</a>
<script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>
<!-- ADDTHIS BUTTON END -->

You'll notice the [URL] and [Title] placeholders are where you need to inject the current post's information. How are we going to do this? Easy.

Replace the [URL] tag with: $macros.FullUrl($post.Url)
And the [Title] tag with: $post.Title

I'm not terribly familiar with the conventions being used with the macros mind you. I'm still digging into the system and understanding it. But I do know that simply putting $post.Url will only yield a relative Url, which is what I did the first time through. The documentation states that $post.Url will return the absolute Url, but it doesn't, it returns the relative Url. You need to wrap that within the FullUrl (macro method???) method to get the fully qualified Url (absolute Url) to the current post. Otherwise we are only spinning our wheels since your users will be posting Urls like /blog/dotnet/my-new-post.aspx. That wouldn't help anyone find the post again, much less a social bookmarking site.

Now that we have modified the code, we need to place it within post.view. I happen to be using the Stylized theme, so this may be a little different for you. It isn't that hard to trial and error this stuff to completion either in case this doesn't fit your scenario exactly.

Add the Add This widget code after the following:

<div class="footer">
        <small>$!macros.TagList($post.TagList)</small>

I decided that I wanted my post tags to be right on top of the widget, so I added a break and then the widget.

The completed code

<div class="footer">
    <small>$!macros.TagList($post.TagList)</small>
<br/>

<!-- ADDTHIS BUTTON BEGIN -->
<script type="text/javascript">
  addthis_pub = 'TPU';
  addthis_brand = 'TPU';
</script>
<a href="http://www.addthis.com/bookmark.php" 
 onMouseOver="return addthis_open(this, '', '$macros.FullUrl($post.Url)', '$post.Title')" ...
  <img src="http://s9.addthis.com/button1-bm.gif" width="125" height="16" 
   border="0" alt="" />
</a>
<script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>
<!-- ADDTHIS BUTTON END -->