Blogs

Social Bookmarking Links with Ventrian News Articles

24 Sep

Recently I have been fielding a number of requests regarding blog linking to Del.icio.us, Digg, DotNetKicks and a few of the others with Ventrian's News Articles module.  I decided that at this time it would be best for me to go ahead and share this informaiton publicly so that everyone can benefit.  (Not to mention Chad Voller requested a blog on this topic as well.....)  So without futher delay, below is information regarding adding these social networking links to your blog site.

First of all for these links to work properly you do not need any special accounts, however, users that will "submit" or "recommend" your page must have accounts for the respective sites.  In this article I will discuss creating links to; Del.icio.us, Digg, DotNetKicks, and Reddit.  There are other sites out there and many ways of implementing this, this tutorial only explains how I have implemented this on my site, if you don't like the active count links that I have for Digg, DotNetKicks, and Reddit there are other linking methods available from the respective sites.

Where Does It Go?

I think this is the most common question and I will discuss this first, before discussing the more detailed implementation.  For an implementation such as mine the code must be added to the bottom of the "View.Item.Html" template within your News Articles templates.  On this site I hae created a whole new boxed area for this, you can format it however you would like.  This article will ONLY provide you the code for the individual links, you must integrate this into your existing News Articles skin.  If you have specific questions regarding implementation in your sites skin please use my forum for assistance.

Del.icio.us

First up is Del.icio.us, this one is the only site that does not have a link count image that I like enough to use.  The implementation for this site is done as a simple HTML link.  I am using some Javascript provided by their site to open the user to a popup-window and to obtain the title from the webpage.  This makes it very simple to implment, just drop the following code into your template.

<a href="http://del.icio.us/post" 
    onclick
="window.open('http://del.icio.us/post?v=4&noui&jump=close&url='
        +encodeURIComponent(location.href)+'&title='
        +encodeURIComponent(document.title), 'delicious',
        'toolbar=no,width=700,height=400'); return false;">
 
 
<img src="http://images.del.icio.us/static/img/delicious.small.gif" width="10" height="10" />
  Add to Del.icio.us
</
a> 

A few notes about the above listed code, the line breaks inside of the onClick portion should NOT be there, I had to put them in the example to avoid display issues with my blog. Secondly be sure to always specify Alt text for images, this was removed to avoid space issues.

Digg

Digg is a very easy site to implement linking to as they provide a nice javascript function that will include the image link that you see on this site. To implement their link simply use the following code.

<script type="text/javascript">
digg_url 
'[LINK]';
</
script>
<script src="http://digg.com/tools/diggthis.js" 
    type
="text/javascript">
</script>

Please note the use of the [LINK] token to provide the javascript method the proper article URL.

DotNetKicks

DotNetKicks provides my favorite method for linking images in.  They provide a dynamic page that in turn will respond with the image, so you simply use that page as the source for an image and then use a standard anchor tag to link to their site, below is the needed code.

<a href="http://www.dotnetkicks.com/kick/?url=[LINK]">
    
<img src="http://www.dotnetkicks.com/Services/Images/KickItImageGenerator.ashx?url=[LINK]" 
        border
="0" alt="kick it on DotNetKicks.com" />
</
a>

Again with this tie please note the usage of the [LINK] token to provide the proper url.

Reddit

The last site that I will discuss is Reddit. This is another site that accomplishes the linking using Javascripts, the linking code is below.

<script>reddit_url='[LINK]'</script>
<script>reddit_title='[TITLE]'</script>
<script language="javascript" src="http://reddit.com/button.js?t=2"></script>

For this link we are using both the Link and Title tokens to provide the needed information for this integration.

Conclusion

Overall as you can see this integration process is very simple, it simply requires the placement of fairly simple linking elements.  You can place these items anywhere you desire within your "View.Item.Html" template to have it display for each blog article on the detail page.  You could even add it to the list view if you desired, but depending on your blog that could become very un-friendly.

If you have questions about how to use this please feel free to use my support forum!  Otherwise good luck and happy blogging!

tags: DNN, Tutorials
comments powered by Disqus

Content provided in this blog is provided "AS-IS" and the information should be used at your own discretion.  The thoughts and opinions expressed are the personal thoughts of Mitchel Sellers and do not reflect the opinions of his employer.

Connect with Mitchel

I hope the information here has been helpful. To stay connected you can also subscribe to blog updates via email, contact Mitchel about consulting services, or reach out for assistance via CodeMendor

Content Copyright

Content in this blog is copyright protected.  Re-publishing on other websites is allowed as long as proper credit and backlink to the article is provided.  Any other re-publishing or distribution of this content is prohibited without written permission from Mitchel Sellers.