Home » .NET » ASP.NET » Display Dzone voting button on your website only to visitors referred form Dzone.com

Display Dzone voting button on your website only to visitors referred form Dzone.com

by Faisal Khan. Last updated on December 16, 2010.

The title of this article says it all. You will learn how to tag all Dzone visitors, using a small cookie, who visit your website by following a link on Dzone.com that links to your website. Once that cookie is placed in the user's browser, we will be able to identify visitors from Dzone.com on all visits to your website from then onwards. That cookie will be read by a piece of code on your website which will display Dzone voting button to these users. Dzone voting button will serve to increase the votes your website receives from Dzone users, leading to even more visits and page views for your website.

The code for this application was developed in C# and it works on all websites running ASP.NET 3.0 and above. We have already developed the complete application, Referring Domain Tagger Application. You can learn more about tagging and how you can use it to display buttons, badges and widgets on your website for all the cool social networking and bookmarking websites out there like Facebook, Twitter and Dzone, only to users referred from them.

Displaying Dzone voting button to Dzone users at Stardeveloper.com

Following couple of images show how an article on Stardeveloper.com shows Dzone button to a visitor referred (and thus tagged) from Dzone.com:

No Dzone voting button for other users of Stardeveloper.com
No Dzone voting button for other users of Stardeveloper.com
(click the image to view in full size)
No Dzone voting button for other users of Stardeveloper.com
Dzone voting button being shown to a visitor from Dzone.com
(click the image to view in full size)

Although Dzone doesn't need an introduction because it is a very popular developer website, I will provide a short introduction to it and its cool voting system and then I will give you a practical example of how this works (and is working on Stardeveloper.com) with images and live demonstration.

What is Dzone and how does its voting system work?

Dzone is a website targeted towards developers. The 'D' in Dzone stands for 'Developers'. You can call Dzone as 'Developers Zone' if you want. It is open for all people to submit links to news, articles and blog posts of interest to developers. Depending on the relevance and quality of the content, that link is voted up or down. Any Dzone user can cast his vote for any link submitted on Dzone. Once a link gets more and more votes, it gets promoted on their website. The more that link receives votes, the more it says live on their website. The more live it remains, the more clicks that link receives.

Why should every developer website have a Dzone voting button?

If you are a developer and have a website or a blog on topics related to programming languages, databases, or web development in general, your website will benefit from having a Dzone voting button on it. You should also register for a free user account at Dzone and post links to your articles and blog posts as you publish them.

Why use Referring Domain Tagger Application?

To prevent loading of Dzone JavaScript file for every user of your website, the majority of which may be other users, you should use Referring Domain Tagger Application to only display Dzone voting button to users of Dzone.com.

You can use similar logic to load IFrame and JavaScript files for buttons, badges and widgets of other bookmarking websites without compromising the load time of your web pages by using this application.

Live example of Referring Domain Tagger Application working on Stardeveloper.com

If you are a Dzone user, you would already have seen a Dzone voting button at the top of this article. That button was displayed because you were tagged, that is, a cookie was placed on your browser by an HTTP module installed on this website when you clicked a link on Dzone and visited Stardeveloper.com. Then an ASP.NET custom web server control was used to read that tag and display a Dzone voting badge to you.

You can learn more about the different components of this application by reading the introduction to this application and following the step by step one-by-one from there.

If you are not a Dzone user then you would not have seen a Dzone voting button on this article. Don't worry, I'll make it pop up for you. :)

Go to Dzone and enter 'Stardeveloper.com' in the search field and press the 'Submit' button. Here is a direct link to search results showing articles from Stardeveloper.com. Next, click the first article that comes up in the search results. You will be redirected to an article on Stardeveloper.com. This time there will be a Dzone voting button shown at the top of that article. Simple!

Next, close your browser window. Now reopen it and visit Stardeveloper.com and navigate to any article on it. You can visit this same article you are reading if you want. There will be a shining Dzone voting button waiting for you to vote up. :)

Please don't forget to vote up this article if you found it useful. You can also share this application on Twitter and Facebook. The links are shown at the top of the article. I'll appreciate it very much!

The code for Dzone voting button

If you have followed the development of this application from the beginning, you'll be knowing that the two most important components of this application are ReferringDomainTaggerModule HTTP module and TaggedDomainMatcherControl custom web server control. I'll show just the code that I put on my ASP.NET pages that display articles at Stardeveloper.com for Dzone voting button using the TaggedDomainMatcherControl.

This is the only piece of code required to display Dzone voting button to Dzone users in your ASP.NET pages:

...

<%@ Register TagPrefix="sd" Namespace="Stardeveloper.Controls" %>

...

<sd:TaggedDomainMatcherControl DomainToMatch="dzone.com" runat="server">
<script type="text/javascript">
	var dzone_url = '';
	var dzone_title = '';
	var dzone_blurb = '';
	var dzone_style = '1';
</script>
<script type="text/javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script>
</sd:TaggedDomainMatcherControl>

...

You can see clearly how simple this custom web server control, TaggedDomainMatcherControl, makes our job of displaying the Dzone voting button. Whatever text you enclose inside this control gets displayed to the user only if he has been tagged by the ReferringDomainTaggerModule HTTP module. In this case, the text was the HTML and JavaScript code to display Dzone voting button.

Summary

In the multipart tutorial, we learned how a small cookie can be placed in a user's browser visiting our website from a link on another website. That cookie's value can be the domain name of the referring website. We called it tagging the user. We created an HTTP module and placed the code to scan for referring links and cookies in it. To tag users from only a small number of websites, we listed the domain names to tag in the web.config file. We then created a custom web server control and inserted it in ASP.NET pages where we wanted to display site specific code only to users of a given a domain name. An example of which we saw in this article.

Please read this tutorial from the beginning to learn tagging and understand how this application works, and how you can port this application to other web development platforms.

That's it friends, please share this application with others who you think might benefit from it. Spread the good word as they call it. I'll begin development on another application now and will post it on this website when I have finished it. So if you feel like, you can bookmark this website using the links below. Have a good day!

Comments