Social Bookmarking Links with Ventrian News Articles
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!
Posted by Mitchel on Monday, September 24, 2007
Click here to post a comment