Monday, August 11, 2008

Tips To Add Digg This Button To Every Post in Blogger

You will be wondering to see a Digg this button with every post of my blog. Normally people use social bookmarking button such as addThis or Share This or social bookmarking scripts such as http://www.social-bookmark-script.com/, where you have choice of many other bookmarking websites along with Digg. Being the most popular social bookmarking service, Digg is something special than all other social bookmarking sites and once any of your website reader digg your blog post, you can receive good amount of referral traffic from Digg.

Here in this post, I will explain the tips to add Digg this button with every post of your blog on Blogger platform. Digg provides a dig this JavaScript. All you need to do is to paste a small code on your Blogger template. Below are the instructions-
  • Go to your Dashboard, click on Layout button and then choose the Edit HTML tab. See the below image for your reference.

    Digg this instruction 1

  • Backup your template by clicking "Download Full Template" button.

  • Click on Expand Widget Templates checkbox and search for the code <p><data:post.body/></p>

  • Replace this code with the piece of code given below. See image for reference.

    <p>
    <!-- Digg this button start -->
    <div style='float:right; margin-left:10px;'>
    <script type='text/javascript'>
    digg_url = '<data:post.url/>';
    </script>
    <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
    </div>
    <data:post.body/>
    </p>
    <!-- Digg this button ends -->


    Digg this instruction 2

  • Save your Template, and it's done.
The above instructions will add a standard size Digg submit button with zero diggs in the right side of every post in your blog. By adding a Digg button with every post, you can increase the chance of your post to be dugg. The digg count will start from the time when someone first digg your post.

---------------------------------------------------------
Note:- If you found this tips helpful and interesting, please subscribe to my blog RSS feed to get latest technology and blogging tips and tricks.
---------------------------------------------------------

Sphere: Related Content

11 comments:

tweakwindows said...

I tried to implement your method.But, after replacing HTML code(what you have written) I am not able to see the contents of the post.I can only see the title..What's the problem? Btw, I am not using default blogger template.

Sunil Kumar Gupta said...

Did you save your template before?

Can you share the part of the template where you paste this code. I think something went wrong when you added this code. The code works fine as you can see it in my blog and it's also not a default blogger template.

I would like to see your template for any possible error.

Thanks

REASON PAD said...

Hi there...i have implemented your both- digg and reddit buttons in my blog. But they dont show horizontally in a single line, rather both comes in vertical..one below another. how do i fix this? I want these to be on a single line. Pls help.

kallol.paul@gmail.com

REASON PAD said...

This is the code: pls help me to align. Stumble upon, reddit and digg icons in a single line rather than one on top of another. theneocity.com

I tried sending the script but it does not allow.

thanks, Paul
kallol.paul@gmail.com

Sunil Kumar Gupta said...

Hi Reason pad,

If you want all these services together, i would say you to keep them at the end of your post. Just keep Digg button on the top and rest buttons you can put at the end of your post and it will be better compare to all buttons on top. To do so, search for the line-

<p class='post-footer-line post-footer-line-3'>

and do like what i did here-

<div align='left'><table><tr><td><a expr:href='"http://www.addthis.com/bookmark.php?pub=4QVQQ2TM5XDPAYVN&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Bookmark using any bookmark manager!'><img alt='AddThis Social Bookmark Button' height='16' src='http://s5.addthis.com/button1-bm.gif' style='border: 0px; padding: 0px' width='125'/></a></td><td>

<script type='text/javascript'>
yahooBuzzArticleCategory = "science";
yahooBuzzArticleType = "text";
</script>
<script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script></td><td>
<!-- AddThis Bookmark Post Button END --></td></tr></table>


In the same way, you can add many buttons in different columns.


Hope that solves your problem.

Thanks,
Sunil

Sunil Kumar Gupta said...

You need to paste that code just after the line

<p class='post-footer-line post-footer-line-3'>

and at the end , i forgot to put </div>

Please add this also after </table>

REASON PAD said...

its giving me this error:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "url" must end with the ';' delimiter.

Sunil Kumar Gupta said...

Hi ReasonPad,

You have missed something. I am not sure what. Please check for < and >.

You just have to put your scripts after the line like i did below-

<p class='post-footer-line post-footer-line-3'>
<div>

<table> <tr> <td>
script 1
</td>

<td>
script 2
</td>

<td>
script 3
</td>

</tr></table>

</div>

Hope that helps.

N A T A S H A said...

I tried to impliment in my site www.freecalltips.com and failed.Can ANy one help me for using Digg button in sites other than blogspot or blogger

Sunil Kumar Gupta said...

Hi Natasha,

You can follow the instructions given in Digg website.

Digg This button with Submit Capability

For a single webpage, you can do like this-

<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>

and for muliple pages in a website, you can do like this-

<script type="text/javascript">
digg_url = 'ANYPAGE_URL_HERE';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>

where ANYPAGE_URL_HERE could be the URL of any webpage in your website.

Hope that helps.

Thanks,
Sunil

subske said...

thanks for the code for doing this I have have now implemented this on my the tech tips blog and and happy with the way that it looks. Shame I don't get a few more digs but maybe one day. Some of my articles do get quite a few comments though so that's enough to make me happy.