del.icio.us automatic links
Update: Just call me Rube Goldberg. John points out that there's a much easier way to add links to del.icio.us than the over-engineered mess I describe below -- just use the blog macros to create the {del.icio.us link} + {permalink url} + {title} directly in your blog template. There's no need for Javascript code at all. Still, the Javascript can still be used to automatically generate links on non-blog web pages.
Yesterday, I linked to an article about using Greasemonkey, Firefox, and Blogger.com to help automate the process of adding Technorati Tags to your blog articles. Today, I explain how to easily create a link to post your article to del.icio.us, a relatively new "social bookmark" service. You don't need Greasemonkey or the Firefox browser or even blogger.com -- this code should work with any blogging software or service.
If you grok del.icio.us, skip to the code and examples.
del.icio.us provides a method for users to categorize their favorite websites into ad-hoc categories. These users assign "tags" or categories to the website and enter them into del.icio.us's database. Think back to the early days of the web when Yahoo first came out. Yahoo used human editors to categorize websites into categories. del.icio.us, on the other hand, is a social network that allows anybody to tag or categorize their favorite websites. Furthermore, there are no predefined tags; the tag keywords are chosen and created by the users themselves.
This practice of collaborative tagging is called "folksonomy," after "folk" (for normal, everyday people) and "taxonomy" (the practice of organizing things in to groups)
Because of the voting/popularity aspect of del.icio.us, many users report search results that are more relevant than those from standard search engines. As tagging systems such as Technorati, Flickr, and del.icio.us become more popular, they will become increasingly important in driving traffic to your website.
Delicious users typically add a bookmark to their browsers linking to Javascript at deli.cio.us. When the user visits a web page he likes, he clicks the delicious bookmark, he is redirected to a form at deli.cio.us, enters his tags and submits the website to deli.cio.us.
Web pages can also have a link on their pages to simplify the process for their visitors. I've written a small snippet of Javascript that creates this link for you on every page you include this Javascript. I also have a PHP version if you're concerned about users who disable the script.
First of all, a disclaimer: This is the first time in my life I've written Javascript, so if I've made any horrible mistakes please let me know in the comments.
Here's the basic code that will create a link to deli.cio.us's site submittal form, using the current URL and page title.
This is a very basic Javascript program. It builds the hyperlink anchor to the del.cio.us form, with the current URL and document title added as the values for the url and title parameters. The string replace method replaces all spaces with the plus sign. encodeURI replaces illegal URL characters in the query string with valid characters.
You can add this Javascript code to any web page, whether it's a blog or not. If you want to do this on the server side, here's the PHP equivalent.
Like the Javascript example, this code will create a link to deli.cio.us's posting form. Unlike Javascript, the server-side PHP cannot determine the title of the page (unless you want to read the page and parse the title yourself), so the title is passed as an argument to the function delicious(). This function is called at the place on your web page you want the del.icio.us link.
Whatever blogging software you use, you want to put the code in your template so that links to del.icious are automatic. Below is how I added the Javascript to my bicycling blog. I put the code right after the blog article text (identified by <$BlogItemBody$>) and right before the "posted-by" footer. You'll notice the Javascript code is slightly different from the general example above -- I make use of Blogger.com macros. BlogItemTitle expands to the title of my article because the HTML page title may be something a little different. Also I use BlogItemPermalink because this Javascript may be running from the index page of the blog or from the "Permalink" page -- I want to be sure the right page gets tagged.
If you use the PHP version instead and your blog is hosted on a PHP-enabled host, calls to the delcious function are made like this to ensure you get the article title: delicious("<$BlogItemTitle$>). Note that the PHP version will only work on the Permalink page, so make sure the PHP code is wrapped within the tags <ItemPage> </ItemPage>
If you make use of this code, please drop me a line in the comments below.
Yesterday, I linked to an article about using Greasemonkey, Firefox, and Blogger.com to help automate the process of adding Technorati Tags to your blog articles. Today, I explain how to easily create a link to post your article to del.icio.us, a relatively new "social bookmark" service. You don't need Greasemonkey or the Firefox browser or even blogger.com -- this code should work with any blogging software or service.
If you grok del.icio.us, skip to the code and examples.
What is del.icio.us?
del.icio.us provides a method for users to categorize their favorite websites into ad-hoc categories. These users assign "tags" or categories to the website and enter them into del.icio.us's database. Think back to the early days of the web when Yahoo first came out. Yahoo used human editors to categorize websites into categories. del.icio.us, on the other hand, is a social network that allows anybody to tag or categorize their favorite websites. Furthermore, there are no predefined tags; the tag keywords are chosen and created by the users themselves.
This practice of collaborative tagging is called "folksonomy," after "folk" (for normal, everyday people) and "taxonomy" (the practice of organizing things in to groups)
Why become del.icio.us?
Because of the voting/popularity aspect of del.icio.us, many users report search results that are more relevant than those from standard search engines. As tagging systems such as Technorati, Flickr, and del.icio.us become more popular, they will become increasingly important in driving traffic to your website.
How to be del.icio.us?
Delicious users typically add a bookmark to their browsers linking to Javascript at deli.cio.us. When the user visits a web page he likes, he clicks the delicious bookmark, he is redirected to a form at deli.cio.us, enters his tags and submits the website to deli.cio.us.
Web pages can also have a link on their pages to simplify the process for their visitors. I've written a small snippet of Javascript that creates this link for you on every page you include this Javascript. I also have a PHP version if you're concerned about users who disable the script.
Javascript del.icio.us
First of all, a disclaimer: This is the first time in my life I've written Javascript, so if I've made any horrible mistakes please let me know in the comments.
Here's the basic code that will create a link to deli.cio.us's site submittal form, using the current URL and page title.
<script type="text/javascript">
var ref="http://del.icio.us/post?url=" + document.URL + "&title="
var title = document.title
newtitle = title.replace(/ /g,"+")
fullref = encodeURI(ref + newtitle)
document.write("<a href=\""+fullref+"\">")
document.write("Make me deli.cio.us.")
document.write("</a>")
</script>
This is a very basic Javascript program. It builds the hyperlink anchor to the del.cio.us form, with the current URL and document title added as the values for the url and title parameters. The string replace method replaces all spaces with the plus sign. encodeURI replaces illegal URL characters in the query string with valid characters.
You can add this Javascript code to any web page, whether it's a blog or not. If you want to do this on the server side, here's the PHP equivalent.
<?php
function delicious($pagetitle) {
// This function will "Make Me Delicious"
// by inserting URL-specific link to deli.cio.us's
// tag post URL.
// Input parameter $pagetitle is the title of the page.
$url = $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'];
$newurl = 'http://'.urlencode($url);
$newtitle = urlencode($pagetitle); // make the title URL friendly
echo "<br /><a href=http://del.icio.us/post?url=$newurl&title=$newtitle>
Make me delicious</a>.<br />";
}
?>
Like the Javascript example, this code will create a link to deli.cio.us's posting form. Unlike Javascript, the server-side PHP cannot determine the title of the page (unless you want to read the page and parse the title yourself), so the title is passed as an argument to the function delicious(). This function is called at the place on your web page you want the del.icio.us link.
Blogger.com example
Whatever blogging software you use, you want to put the code in your template so that links to del.icious are automatic. Below is how I added the Javascript to my bicycling blog. I put the code right after the blog article text (identified by <$BlogItemBody$>) and right before the "posted-by" footer. You'll notice the Javascript code is slightly different from the general example above -- I make use of Blogger.com macros. BlogItemTitle expands to the title of my article because the HTML page title may be something a little different. Also I use BlogItemPermalink because this Javascript may be running from the index page of the blog or from the "Permalink" page -- I want to be sure the right page gets tagged.
<script type="text/javascript">
var ref="http://del.icio.us/post?url=" + "<$BlogItemPermalinkUrl$>" + "&title="
<BlogItemTitle>
var title = "<$BlogItemTitle$>"
</BlogItemTitle>
newtitle = title.replace(/ /g,"+")
fullref = encodeURI(ref + newtitle)
document.write("<a href=\""+fullref+"\">")
document.write("Make this deli.cio.us.")
document.write("</a>")
</script>
If you use the PHP version instead and your blog is hosted on a PHP-enabled host, calls to the delcious function are made like this to ensure you get the article title: delicious("<$BlogItemTitle$>). Note that the PHP version will only work on the Permalink page, so make sure the PHP code is wrapped within the tags <ItemPage> </ItemPage>
If you make use of this code, please drop me a line in the comments below.
posted by Yokota Fritz at 11:18 PM
3 Comments:
There's a way to do this without javascript too. See my post at Freshblog.
Wow!!!!!!!!
Nice post I am going to look around your site seems you have some great stuff.
Thanks for giving good idea and sharing java script with us. I would like to try this now.
Post a Comment
<< Home