Add Digg, Reddit, and Del.icio.us to Blogger

After searching the web for a comprehensive tutorial on adding digg, reddit, and del.icio.us to your Blogger blog, I decided to write my own. I eventually found the tutorials for each respective site, but wanted to add in my own comments, as well as use the actual Blogger variables for setup. Keep in mind that this post is specifically for Blogger. I can't guarantee that it will work with Wordpress, as I don't know what variables they use. Enough of the disclaimer, lets code!

Digg

Firstly, you'll have to get the javascript from digg.com. You can go to www.digg.com/tools/integrate to get it. You do not want to use the first option, as it will not keep track of diggs for each individual post. The second option, "When the URL you wish dugg differs from the current webpage" will work perfectly for us. Copy the script from that section.

The next step is to add the link to your blogger template. Logg into blogger and click the 'Template' tab. This will allow you to edit the html on your blog. Keep in mind that the page uses XHTML, therefore all coding rules apply. i.e. all lowercase tags, make sure all tags are closed, case sensitive, etc.

Scroll down the the <-- begin .post --> section of the code. Below this, you will see a tag that says <$BlogItemBody$> Below this is where you will want to put in your code. I found that using a table to maintain structure gave me the appearance I wanted. It also left room for additional links in the future. I used the tag.

<table width="100%">
<tr>
<td width="25%">
</td>
<td width="25%">
</td>
<td width="25%">
</td>
<td width="25%">
</td>
</tr>
</table>

In between the first set of tags you'll want to add the script for digg. Paste the <script%gt; tags there.

Next, change the digg_url = 'WEBSITE_URL' variable to: digg_url = '<$BlogItemPermalinkUrl$>' This will automatically copy the individual posts direct url to the digg button. When the script calls the diggthis.js script on digg's server, this is the variable it will pass.

All you need to do now is save all the changes and republish your blog. After doing so, you should see that you now have a fresh digg button under each posts. Now you can successfully connect to the digg network and get traffic to your site!

Reddit

You'll follow the same techniques listed above to install the reddit button onto your blog. To find the script to copy go to www.reddit.com/buttons. You'll be given a list of different buttons you can use to hook reddit up to your site. Personally, I like style 2 because it maintains the same style as the digg tag. Nothing brings style out like consistancy. This type of button is also beneficial because you can see how many people have dugg or redd your site. Anyway, back to the task at hand.

Copy the <script> tags under whichever style you wish you use. You must include the green text in order to connect each individual post to your blog. Paste this text in it's entirety between the second set of td tags listed above in the digg section.

All you need to do now is change the script variables. Change the script so it reads as follows:

<script>reddit_url='<$BlogItemPermalinkUrl$>'</script>
<script>reddit_title='<$BlogItemTitle$>'</script>
<script language="javascript" src="http://reddit.com/button.js?t=2"></script>

Where t= the style number you wish to use.

Save, re publish, and presto! You now have an active reddit link on your blog!

Del.icio.us

I've found that adding a link to your del.icio.us profile could be useful to some. As such, I'd like to explain how to hook it up to your blog. Unlike the digg and reddit buttons, I feel that this button looks much better if placed in your right sidebar. I've placed it under my Atom rss subscription link, but you can put it wherever.

Firstly, if you're not already subscribed to del.icio.us, do so now. If you're unfamiliar with the site, take a look around. It's actually extremely useful, especially for school.

After logging in, click on the 'settings' link at the top right corner of the page. From there, scroll down to the Blogging section and click 'network badges'. After selecting the options you want, copy the javascript code that's given to you.

Back in your template page, scroll down until you see the <MainOrArchivePage> tags. Below this is where you will paste your script. I pasted mine under the <p id="blogfeeds"> tag, but you can place yours wherever. This post assumes that you're using a default setup, so if you're using a template just experiment. After you've pasted the code save the changes and republish the blog. After doing so, you'll find that you have a nifty little del.icio.us link on your sidebar. We even managed to make it look like it belongs there, so the blog doesn't look like it belongs to an amateur! I know that sounds funny with me using one of Blogger's default layouts, but graphic design was never really my strength.

I hope this post has been helpful to some. We'll see if it gets around as an easier alternative to some of the other instructions out there. If the post has helped please digg, reddit, or del.icio.us the post to get it around. Take care, and keep coding!

Andrew