Saturday, May 10, 2008

Integrate "DiggThis" with Blogger

As you can see, there is a 'Digg' button on each post. To integrate 'Digg' button with Blogger, you need to modify the template. Goto your blogger's panel, then open 'Layout' -> 'Edit HTML'. Check the 'Expand Widget Templates' checkbox, then you can see the whole template. I suggest you to copy it to your favourite text editor, such as Notepad++. It makes you easier to search and modify the HTML template.

Find this line: <div class='post-body entry-content'>. Add the javascript code below after this line:
<b:if cond='data:post.url'>
  <p style="float: right;margin: 4px;">
    <script type="text/javascript">
      digg_url = '<data:post.url/>';
      digg_window = 'new';
      digg_title = '<data:post.title/>';
      digg_topic = 'programming';
    </script>
    <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
  </p>
</b:if>

Now let me explain. style="float: right;margin: 4px;" is CSS code. It specifies Digg button should appear on the right side and the width of the space between the button and text around is 4 pixels. digg_url = '<data:post.url/>'; sets the URL of each post. If you don't set this variable, Digg button will be attached to the current URL, not the post's URL. digg_window = 'new'; means when the button is pressed, the browsing will open a new window to open digg.com. The next two variables are useful for submitting a post. They specify the default title and the default topic, but users can change them manually.

OK. After you finish it, click 'Save Template' to save the template. You will see a Digg button in every post.

No comments: