How to Add Digg Buttons to Your Typo Blog

Posted by Scott Mon, 05 Mar 2007 01:02:00 GMT

Here is how I added Digg voting buttons to a Rails powered Typo blog. Digg buttons come in several types. You can build out a full-size Digg button, a compact sized one, or use your own image. I’m adding compact buttons.

See here for details on Digg button html code and all the different options. When you have chosen what options you want to use, here’s the code that worked for me.

app/views/articles/read.rhtml

This is the view in Typo rendered when a single article is shown. Because this view is the view to the article, you do not need to tell Digg the URL. (Digg assumes the current URL when the diggthis script is called).

Here’s code that worked for me. Again, review the details on the Digg site for other options. The key for Typo users is that the digg_title can be set to the name of the article. I inserted this code right after the line with author_link(@article).

<script type="text/javascript">
    digg_skin = 'compact';
    digg_title = <%= "'" + h(@article.title) + "'" %>;
    </script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>   

app/views/articles/_article.rhtml

_article.rhtml is a partial used in typo to show an article in the blog’s list of articles. Because each article in the list will have a different URL to send to Digg, you will want to set the digg_url parameter as in this example. In the call to article_url, the false parameter makes sure that the entire path is set in the url. I added this code right before the <%= article.body_html %> line.

<p>
      <script type="text/javascript">
    digg_skin  = 'compact';
    digg_title = <%= "'" + h(article.title) + "'" %>;
    digg_url   = <%= "'" + article_url(article, false) + "'" %>;
    </script>
    <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>   
</p>

Try it out

Now, next time you enter a new article, you’ll have Digg buttons where readers can Digg your writing. Try it out.