How to add Digg to Blogger - Explained.

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>