Adding Digg Button Inside Your Blog Posts - With More Options
Advertisement
Earlier, somewhere in July, I published an article about how to add a Digg button inside you individual blog posts. Even though nobody hasn’t said anything about the article, or no one has any comments about that article, I can see a lot of people referring to that article through my site statistics. So I decided to publish an updated article about how to add a Digg button inside your blog posts, with some extended features.
In the earlier post we saw how to add a simple Digg button inside your individual articles. It just takes you to Digg site, with the reference to the article URL as shown below.
Adding Simple Digg Button to Your Blog
In this post we will see how to send the Article Title along with the article URL to the Digg website. This will avoid the need to type in the Title Digg website, when the readers are submitting the article. So after adding this the submit form in Digg will look like as given below.
Add Digg Button To Your Blog Posts With More Options
To have this function enabled in the Digg button embedded in your blog, you need to make some changes in the code which I had already published in the earlier post. If you don’t have the Digg button embedded in your blog posts, refer my previous article about how to add a Digg Button to you Blog.
The code which I had already published in my previous post is given below. We will make some changes in the code. Take care that the steps are same as in the previous post. We are only going to make some
EXISTING CODE / FINAL CODE IN THE PREVIOUS POST
<div style="float:right; margin: 3px 3px;">
<script type='text/javascript'>
digg_url = ";<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>
<script type='text/javascript'>
digg_url = ";<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>
In this code we are going to add two additional JavaScript variables
digg_titleand
digg_window, of which,
digg_titlewill be used to hold the Article Title and
digg_windowwill hold the condition whether you want the Digg submission page to be opened in a new window when the reader clicks the Digg button. If the value for
digg_windowis left blank the Digg submission page will open in the same window as your blog article page.
Now those who already have the above code in your blogs, replace the above piece of code with the piece of code given below. Those who are not having a Digg button embedded in their blogs, they can also add a Digg button be copying the code given above and pasting it inside your blog template code. The steps to follow are described in the previous post about >how to add a Digg button.
MODIFIED DIGG BUTTON CODE WITH ADDITIONAL FUNCTIONS
<div style="float:right; margin: 3px 3px;">
<script type='text/javascript'>
digg_url = "<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>
<script type='text/javascript'>
digg_url = "<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>
The code, if you use it exactly as given above, will open a new page wit the Digg article submission page, with the Article Title field already filled with the title of your blog post, when a reader clicks on the Digg button. If you don't want a new window to be opened up replace the line
digg_window = "new";with this
digg_window = "";.
Now, there are more things that can be passed to the article submission page automatically.
- First one is the Topic under which you want to submit the article. Before submitting an article in Digg, you need to select the appropriate Topic. Using this option inside our code might be a tricky one as most of the blogs publishes articles in diverse topics and we can only set a single topic for the whole blog.
But if your blog articles comes under a single topic, say World News, then you can send this as the default topic of all the articles which are being digged by your readers. To enable this in your Digg button add a new line to the code which we modified above. Modify the code as given below.<div style="float:right; margin: 3px 3px;">
<script type='text/javascript'>
digg_url = "<data:post.url/>";
digg_title = "<data:post.title/>";
digg_window = "new";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p> - Second one is the background of the Digg button. By default, the background color shown for a Digg button is white and this will not look good in a blog/site which is having a different background color.
To change the background color or the Digg button change the code as given below and replace the BACKGROUND_COLOR with the color code of your blog/site background. For example, if the background of your blog/site is black, replace the BACKGROUND_COLOR with #000000<div style="float:right; margin: 3px 3px;">
<script type='text/javascript'>
digg_url = "<data:post.url/>";
digg_title = "<data:post.title/>";
digg_window = "new";
digg_topic = "World News";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>
PS : Adding Digg button to your blog/site is fine and should do. But, don't forget to Digg this article.
"Thank You!!! You’ve reached the end of this post. Seeing you made it this far, we hope you enjoyed this post. If so, please consider leaving a comment or subscribing to the feed to have further articles deliverd to your feed reader. You can also follow me on Twitter."
Subscribe to:
Post Comments (Atom)
my blogger.com template is in CSS and every time I use this piece of code it give me 5 digg buttons in the wrong place and cuts out the origional code! can you help me with getting it to work with my template? (Minima Black)
Thanks!
Very good article, dude
I learn many things from this blog
Keep writing