Friday, 15 February 2008

How to Integrate "Digg this" button to blogger blog

In this tutorial I will show you "how to integrate "digg this" button to your blogger blog and how to wrap "digg this" button around and inline beside Blogger post content. This will be good part of your blog design.

I think you know Digg, Why you need to install Digg button to your blog? This is the quote from the Digg:

The Digg This button is for website and blog publishers that want to encourage their audience to submit or digg their content on Digg. Join thousands of sites that have already added Digg This and seen their content exposed to the Digg community.

We've given our latest Digg This button a brain - it's smart enough to:

  • Encourage users to submit new content from your site to Digg. We'll detect if the content exists already and provide either a Submit or Digging interface
  • Display the real-time Digg count for content already on Digg
  • Support News, Video, or Podcast content.
  • Be backward compatible with the last version of our Digg This button

So, you can get some (or , maybe, big) traffic from Digg.

This is how it will look like:

digg_this_button

It is hard to install this button to your blog and make it wrap around and inline beside post content, so, I will tell you how to do it:

1. Go to Blogger Dashboard.

2. Go to Layouts and click on Edit Html subtab of Template tab.

3. Backup your template to PC.

4. Then put a check in Expand Widgets Template box at top of Edit Template text box and scroll down to the blog posts widget body to this line :

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

5. Append the following lines of code into the template BEFORE the line of <data:post.body/> located above:

<div id='digg'><script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
digg_title = &#39;<data:post.title/>&#39;;
digg_window = &#39;new&#39;;
</script>
<script src='
http://digg.com/tools/diggthis.js' type='text/javascript'/></div>

6. Now you need to create CSS style for Digg this button. Find this line:

]]></b:skin>

7. If you want to have digg button on the left side of post, append the following lines of code into the template BEFORE the line of ]]></b:skin> located above:

#digg {
float: left;
margin-right: 5px;
}

If you want to have digg button on the right side of post, append the following lines of code into the template BEFORE the line of ]]></b:skin> located above:

#digg {
float: right;
margin-left: 5px;
}

8. Save your template.

That's all =) Cheers

13 comments:

raxso said...

Thanks for the tip.....

truparad0x said...

Love this! Definitely linking this post!

Ed said...

great tutorial thanks. I will give this a plug in a future post. I have been blogging a while, but am a blogspot newbie and havent quite hit my stride with it, yet.

cheers

Ed

markstraining.com said...

Hi, Many Thanks for the tip. However the Digg button appears on my posts on my home page but not on the actual webpages of the posts. Please check it out on my site to see for yourself. and email me back if possible. my email address is on my site. Many Thanks for your help.

Sarv007 said...

Thnx now lets see how digging helps....

kopi cina said...

very nice!!!

michelle said...

Thanks but how do i align my buttons because my digg button is now getting in the way of my comments.

Adrian said...

Hey awesome intergration!
I have a question though.

The digg button works perfectly on my blog, but i have 13 diggs, how come it doesnt show the number like in yours?

Mister Teacher said...

Let me add my thanks too! Great post, easy instructions!

Deb said...

Thanks a bunch. I found exactly what I was looking for and you delivered with concise instruction.

Sang said...

Thanks for the tip...it was very easy to follow and I could integrate the Digg icon!!!
Good job~~~

AdSense said...

Thanks Dear.This is what I'm looking for..Thanks again.

www.cadiz-3d.com said...

Thanks so much for the post, quite helpful piece of writing.