Add Digg Button On Blogger post

On the previous articles that i have been posted, we learn many way in how to add “retweet” and “Google buzz”. Today, another popular social bookmarking is Digg button, this will definitely help you to count how many people who like your article about. If you are surfing through any blog, many webmaster add Digg button into their post. In the official page of Digg Smart Buttons, you can find the script code. But, in this tutorial, i would like to teach you how to add Digg button within Blogger posts.

There are 3 types of buttons with counter that Digg provide like Wide, Medium and Compact.

 

Actually, I have two difference ways in how to add Digg button, it all depend on where you are gonna used it, let us begin:

1. Log in into your blogger account
2. before change something, it is better you to verify or enable post pages which means each post will have a unique URL, this is required by Digg for the individual posts to be submitted. Now, go to Dashboard, under setting > Archiving, set the “Enable post pages”, “yes” and save it.
3. Choose “Design” >  “Edit HTML” > check the box “Expand Widget templates” (important: download the template before change or add script)
4. Find the code by Ctrl+F, try to find something like below code

             <data:post.body/>

5. If you want to add Digg button appear on the top of your post, just add this script immediately BEFORE code above

         <div style='float:right; margin-left:10px;'>
         <script type='text/javascript'>
         digg_url=&quot;<data:post.url/>&quot;;
        </script>
        <script src='http://digg.com/tools/diggthis.js'           
        type='text/javascript'/>
        </div>
        <data:post.body/>

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

         <data:post.body/>
         <div style='float:right; margin-left:10px;'>
        <script type='text/javascript'>
         digg_url=&quot;<data:post.url/>&quot;;
        </script>
        <script src='http://digg.com/tools/diggthis.js'          
        type='text/javascript'/>
        </div>

7. you can also add another type Digg like compact button. If you insert this code:

          <div style='float:right; margin-left:10px;'>
          <script type='text/javascript'>
          digg_url=&quot;<data:post.url/>&quot;;
          digg_skin=&quot;compact&quot;;
         </script>
         <script src='http://digg.com/tools/diggthis.js' 
         type='text/javascript'/>
        </div>

8. The position of placing Digg button can be on the “Right” or “Left” by changing the alignment that change a red color on the script.

The second way of adding Digg button by applying code below:

1. Ctrl+F, find out the code like below:

              </body>

2. Copy and paste the script below and immediately place just AFTER body code something like below

          </body>

         <script type="text/javascript">
         (function() {
         var s = document.createElement('SCRIPT'), s1 =                

         document.getElementsByTagName('SCRIPT')[0];
         s.type = 'text/javascript';
         s.async = true;
         s.src = 'http://widgets.digg.com/buttons.js';
         s1.parentNode.insertBefore(s, s1);
         })();
         </script>

3. Find <data:post.body/> and immediately before it add the div section

         <b:if cond='data:blog.pageType == "item"'>
        <div style='float: right; padding: 4px;'>
        <a class="DiggThisButton DiggMedium"></a>
        </div>
        </b:if>

4. Change the red color with any type of Digg button like below code

          For wide

  

          <a class="DiggThisButton DiggWide"></a>

          For compact

          <a class="DiggThisButton DiggCompact"></a>

Well, enough for today tutorial, if you have any question relating about Digg button just drop me your comment or email me. Good Luck