How to add Digg to Blogger - Explained.

Nov 28, 2008

Well last day I was trying to add Digg to blogger. I was experimenting on how to add a Digg button on my blog. The digg button should use the auto-generated link of blogger as the digg_url for digging and submitting it for the first time.

After experimenting with my Blog template I came across this way to do it.

Things you should require/know :-

  • A Digg Account (optional)
  • A Blogger Account
  • Basics of XML/HTML/CSS/Java Script
  • Ctrl+C / Ctrl+V :)


First login into your blogger account. Go to the Layout tab and click on Edit HTML.

If you want you can make a backup of your existing template by clicking on "Download full template" [ If your confident skip this step ]

Understanding the Blogger Template
The basic structure of template has various sections defined. At top there are some variables defined. Which can be changed to change the color layout etc of the Blog.
After the variables the CSS definitions are given. You can edit the different classes to change the blog to your taste.

Now in the body tag you will find all the sections and div defined. Complete blog lies in the outer-wrapper div. And in it you will have the header-wrapper then content-wrapper and lastly footer-wrapper. The content-wrapper will contain the main and the sidebar wrappers.

In them you will have <b:section> and <b:widget> tags defined. So this basic template tells all the widgets that are placed on your page and their position as per the wrappers.

Example code:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>


Now the widget tag... i.e., <b:widgets>
This above basic template just gives you a method for understanding the layout, But to understand how to put the automated url Digg button you will have to understand the code in this widget. So go ahead and click the checkbox marked as "Expand Widget Templates". This will expand the <b:widgets> tags and show you how the widget is implemented in it.

Each widget when expanded will have many includables <b:includable>. Each of this includable will have an id.
Example code:

<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>


So as seen in this code there are two includables. we are interested in the includables having the id as post i.e.,
<b:includable id='post' var='post'>

So then in this includable we need to add our digg code. This blogger template defines and provides access to its data object. For e.g., <data:post.url/> signifies the url of the Blog post. It is the permalink of each blog entry. The digg widget button provided by Digg needs the post url. So this will generate it automatically for us. Now the code that I have used on to show the digg button is pasted in the includable as shown. You can place it and style it as you like.

Basically you will need to copy from the Digg Box start comment to Dig Box End comment. Copy and paste it in your blog and enjoy the easy Digg Button.

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<!--- ==== Digg Box Code by J start ==== -->
<div class='diggBox' style='margin: 4px; float: right;'>
<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<!-- == Digg Box code end ===-->
<div class='post-header-line-1'/>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

</div>
</b:includable>

9 comments:

Post a Comment
Anonymous said...

On behalf of trevorw600 on Digg... (Thanks)

Quite interesting. Since I have a few blogger sub-domains, I tried it too.

This will work with the new Blogger templates, initially i was afraid it would not.

Here is a big hint,

In the tutorial they say quite casually expand the widget templates. Well I skipped that at first but it's the checkbox to the top right of the html box. Click on it to enable or nothing else will work.

The second big tip to quickly save yourself some time while hunting for the right places to put the code is use [ctrl][F] to quickly find this text "post-body entry", then move up a few lines until you see this "b:if"

Paste the code that he gave you directly below that.

During preview, you won't be able to actually digg but you will see the digg button in the correct place.

Save and check it out. Serves 6 with leftovers, lol.


http://digg.com/programming/How_to_add_Digg_to_Blogger_Explained

aleksey said...

thank you! and it took so little time!

Scott Mendelson said...

Any way to make the Digg widget appear at the bottom of a given post, rather than right at the top? Thanks.

Scott Mendelson
JckNapier@gmail.com
http://scottalanmendelson.blogspot.com

Bhavya Jain said...

Hi Scott,
I even checked your blog and found that you have added the digg button. Congrats!! :)

I guess its placement is giving you problems. You will have to look for
<div id='footer-wrapper'> in your template code and add the digg box code there.

Apart from this a bit of style will clear the problem of aligning. You will have to change the style attrib in this tag at the start of digg button code in
< div class='diggBox' style='margin: 4px; float: right;'>

D. Patrick Caldwell said...

Awesome! Thanks a lot. I used your script (with a few modifications) and added several scripts of my own. If you'd like, you can find them on my blog.

Ibnu Surur said...

Hi Bhavya Jain, Cool...nice tutorial. Thanks

JHblog said...

Thanks for the help.

Google secrets said...

i would like to thanks this blogger, google search ph loves you

Purple Serf said...

How do you get your digg box to be nice and tight to the bottom left? While I have been able to successfully add the digg button I haven't been able to manipulate or place it correctly.