Digg Your Blogger Now

We usually see the Digg image/icon (on the left corner of this post) at beginning or at the end of every post. We often see numbers on it and we just let it be and didn’t ask what this is for.

Digg is a social news website made for bloggers like us, to discover and share content from anywhere on the Internet world. How it works? If you have a good story, the readers will simply submit links and stories, or vote or comment on the articles. This will definitely help your site to be noticed, to be famous and definitely earn a lot of cash, eventually.


First Things First

1) Your Blogger account or site should be set to save Post Pages. These are archived blog posts published to their own web page, which mean that each post have unique URL. This is a common requirement by Digg for reader’s posts to be submitted.

How? Dashboard -->Settings -->Archiving -->Enable Post Pages -->Yes

2) The code reads the URL of each blog page and this will be the URL used for submission of the story to Digg.

How? Before you inserted anything on your Template, please copy or Download Template that you’re currently using. This is one of the necessary steps to do whenever you want to change the template. With a backup, you can easily restore the template to the prior state if needed.

Let’s Get Started

Click the box next to “Expand Widget Templates”. Scroll about two-thirds down the template to look for the code that reads:

<p><data:post.body/></p>

If you want the button to show at the top right corner of your post, replace the above code with this.

<div style="'float:right;"><br /><br /><br /><br /><script type="'text/javascript'"><br /><br /><br /><br />digg_url="<data:post.url/>";<br /><br /><br /><br /></script><br /><br /><br /><br /><script src="'http://digg.com/tools/diggthis.js'" type="'text/javascript'/"><br /><br /><br /><br /></div><br /><br /><br /><br /><p><data:post.body/></p>textarea></p><br /><br /><br /><br /></div>

This is how it looks like:

If you would like the button to appear at the end of your post, replace with this following code instead.

<p><data:post.body/></p><br /><br /><br /><div style="'float:right;"><br /><br /><br /><script type="'text/javascript'"><br /><br /><br />digg_url="<data:post.url/>";<br /><br /><br /></script><br /><br /><br /><script src="'http://digg.com/tools/diggthis.js'" type="'text/javascript'/"><br /><br /><br /></div>textarea></p><br /><br /><br /></div>

And here it goes like this:

This might not be effective to use. Else, place Digg at the upper left corner of the post, similar to what I did.

<div style="'float:left;"><br /><br /><br /><script type="'text/javascript'"><br /><br /><br />digg_url="<data:post.url/>";<br /><br /><br /></script><br /><br /><br /><script src="'http://digg.com/tools/diggthis.js'" type="'text/javascript'/"><br /><br /><br /></div><br /><br /><br /><p><data:post.body/></p>textarea></p><br /><br /><br /><br /><br /><br /></div>

The outcome is like this:

Blend your Digg on your Post

You can also change the background color of the button to blend with your site. For example, a code like this:

<div style="'float:right;"><br /><br /><br /><script type="'text/javascript'"><br /><br /><br />digg_url="<data:post.url/>";<br /><br /><br />digg_bgcolor="#FFFFFF";<br /><br /><br />digg_skin="compact";<br /><br /><br /></script><br /><br /><br /><script src="'http://digg.com/tools/diggthis.js'" type="'text/javascript'/"><br /><br /><br /></div><br /><br /><br /><p><data:post.body/></p>textarea></p><br /><br /><br /></div>

Here's how it looks like:

You can insert the color code of your choice into the letters (FFFFFF). For the example above, I used the white background with a color code of #FFFFFF.

Hope this helps. If you would like to Digg this article, click the Digg button.