olussier.net

Facebook Social Plugins with IE8 [Fix]

Olivier — Tue, 21 Sep 2010 03:57:37 +0000

Many people reported that my Facebook Social Plugins WordPress plugin didn’t work with Internet Explorer 8. However, it was working fine with IE8 on most blogs and I didn’t have enough information to be able to reproduce the problem. Today, while helping a friend with her blog, I finally came across the problem and was able to figure out how to fix it. Here is the explanation of the problem and what to do to fix it.

First, the problem occurs only when using the XFBML version of the plugin by providing an application ID. When using this, the plugin inserts non-standard Facebook-specific HTML tags. IE8 simply discards unknown tags, so the inserted code is simply discarded and the plugins can’t load. Other browsers apparently do not discard such tags (though they can report a warning).

Fortunately, HTML can be extended and the browser be instructed to recognize non-standard tags. This is precisely what the plugin does. However, some themes miss a function call that is required for this to work. To fix it, log into your WordPress dashboard and go to Editor, under Appearance. On the right, there is a list of the files that make your theme. Click on Header (header.php). The code for that file loads. Near the top, there is a line that begins with . This is the line that will need to be edited.

If you see language_attributes in that line, then the code is already correct and the problem is something else. If however, you don’t see this, keep reading.

If you see dir=”ltr” on that line, remove it. Also remove lang=”en-US” (or another language code instead of en-US if your blog isn’t in US English) if it appears on that line. Next, add the following exactly as is at the end of the line, right before the >:

<?php language_attributes(); ?>

Make sure there is a space before that code. The final result may look like this, though it can differ too as themes are all different:

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

Then click the Update File button at the bottom. Reload your blog in IE8. If everything went well, you should now see the Social Plugins. If it doesn’t work or if this is too complicated for you to do yourself, post a comment and I’ll see how I can help you.

Eavify Your World! [jQuery Plugin + EA Tools 0.3]

Olivier — Wed, 04 Aug 2010 23:45:42 +0000

Empire Avenue is gaining in popularity and many WordPress bloggers seem to enjoy the Empire Avenue plugin I released about two weeks ago. I am pleased to see that it is proving useful to some of you. Today, I am however even more pleased to announce not only version 0.3 of EA Tools, but a brand new jQuery plugin named Eavify, which can be used on ANY web page – not only WordPress blogs.

Just like EA Tools, Eavify converts (e)TICKER into a pretty link to the user’s EA profile. It also features the EA badge as a tooltip. Please visit the Eavify’s page for more information and to install it.

If you are a WordPress blogger, you still want to use the EA Tools plugin. As of version 0.3, it integrates Eavify to convert tickers into links, instead of changing the post contents as it did so far. This also means that it no longer only works on posts, but on the whole page. You can customize this to fit your needs. Visit Eavify’s page for more information on customization.

EA Tools 0.2: Ticker Links Meet Badges

Olivier — Wed, 28 Jul 2010 03:12:09 +0000

A new update is available for the Empire Avenue Tools plugin for WordPress. It introduces a tooltip on the ticker links that show the badge for that ticker.

Update the plugin from your dashboard or download it from the plugin’s page.

There are more features coming soon and ideas are most welcome!

Empire Avenue: The Influence Market [Plus: New WP Plugin]

Olivier — Fri, 23 Jul 2010 01:42:41 +0000

You may have heard about it. You may even be annoyed by some people tweeting too much about it. It’s called Empire Avenue, and it can be highly addictive! Let me tell you more about what it is and what it can do for you. Also, I’ll introduce a new WordPress plugin I made to integrate EA (Empire Avenue) in your blog.

What is Empire Avenue?

Empire Avenue is a stock exchange game based on online influence. Unlike the actual stock exchange, on EA, not only companies can have stocks, but individuals too. You can finally buy and sell shares in your friends, family or anyone in the world. EA is a game and no actual money is used, instead all transactions are made using “eaves”, the EA virtual currency.

Share prices are based on various variables all related to the user’s online influence, including the amount of activity on social media websites (blogs, Facebook, Twitter, Flickr), the number of friends on Facebook, the number of followers on Twitter, the amount of traffic on the user’s blog(s), the number of replies/retweets of the user’s posts… What happens on the EA website itself also influences the user’s share price. The more a user’s shares are sold, the higher the price gets.

There are many ways users can earn eaves that they can then invest in someone by buying their shares. First, every time a user’s shares are sold, the user receives part of the eaves. Everyday, when the market closes, an amount of eaves is given to every user based on their activity during that day. Part of this money is divided among the user’s shareholders as dividends. Finally, there are many achievements that a user can unlock, such as having a given amount of outstanding shares. Some of those achievements come with a reward in eaves.

Only a Game?

Is Empire Avenue only a game or can it be of any use to individuals or companies? It certainly is more than a game. It is an awesome way for individuals to quickly make connections with many interesting people and to discover companies and their products.

Companies can also get a lot from using EA. On this matter, Carmen Gerea ((e)CGBW2) on EA wrote a great article (in French) stating interesting ways companies can use EA: finding influential people, targeting people who like a brand, create communities and more. As with the other social media tools, creativity will be the key to finding new ways to take advantage of it.

Where Do I Sign Up?

Empire Avenue is still in beta and in invitation-only mode. However it will open up to everyone on July 28. In the meantime, I have some invitations left, so contact me on Twitter or leave a comment if you’re interested and I’ll send you an invitation. By the way, my ticker on EA is (e)OL so you can follow me (and buy my shares of course).

New WordPress Plugin

If you have a WordPress blog and use EA, you may be interested in the new plugin I have created. For now, it includes two features. First, it automatically convert EA tickers written as (e)TICKER to a link to the user’s EA page. For example, (e)OL is converted to (e)OL.

The second feature is a widget to easily add the EA badge to your blog. See at the bottom of the sidebar on this page for an example.

Please visit the plugin page if you are interested.

WordPress 3.0 Is Here!

Olivier — Thu, 17 Jun 2010 23:20:05 +0000

As you probably know, WordPress 3.0 was released today, with a bunch of new features and improvements. Watch the video below for a preview of what’s new.

For those of you wondering about FB Social Plugins, my plugin works fine with 3.0. Actually, most plugins from 2.9 should still work with 3.0. Let me know if you encounter any plugin that doesn’t.

Go ahead and download WordPress 3.0 now, or upgrade from your dashboard.

How to Use Geolocation to Locate Your Visitors

Olivier — Sat, 05 Jun 2010 02:17:30 +0000

With the increasing popularity of mobile devices such as smartphones and the iPad, location-aware applications are flourishing. On the other hand, with HTML5 and all of its amazing features, web applications seem to be the way to go. So, how exactly do you locate your web application visitors? Let’s start with a little background information on geolocation.

Positioning Methods

There are a few methods that can be used to find someone’s position. The first and least accurate one is IP location. It checks the user’s IP address against a database to find the location, which is usually the name of the city or region. Though not very accurate, it has been widely used for a while and has the benefit of being the only method you can use server-side.

The second method is specific to mobile phones (and other devices connecting to mobile networks). It calculates the approximate location by figuring out your approximate distance to cell antennas around you (according to the signal power). The accuracy varies depending on the density of antennas and is therefore more accurate in urban areas.

Another method uses Wi-Fi and can therefore work with most mobile devices, including laptops. It works kind of the same as the cell antennas method, but uses Wi-Fi access point and a huge database of their known location. Since the range of Wi-Fi is pretty limited and there can potentially be dozens of known access points around you, the accuracy is actually quite impressive. Of course though, it works only if you are within range of at least one known access point. In urban areas, this is likely, but outside the city, you may be out of luck.

The most accurate method is GPS, which most modern mobile phones are capable of using. It uses signals from satellites all around the globe to calculate the exact location. Though incredibly accurate (down to a few meters), it has some limitations. First, it tends to consume a fair amount of energy, so many people may usually keep it off on their phone. Also, it works well only in open spaces, where the sky is visible. It is inaccurate or unusable indoors and when near large buildings. To help, hybrid implementations of GPS and other methods are often used. So if GPS fails, maybe Wi-Fi or cell antennas will work.

Enough background data! How do you code it?

Google Gears and W3C Geolocation API

In 2008, Google added the Geolocation API to Gears, a plug-in that extends browsers capabilities. It was now possible with a few lines of javascript to find the user’s location. Last year, the W3C released its Geolocation API specifications. In the past months, it has been implemented in the main browsers, but is not yet supported by all. It is meant to eventually completely replace Gears’ API, but for now it’s a good thing to have both.

Fortunately, though the implementations aren’t exactly the same, they are a lot alike. Also, you don’t have to care about what method it uses to find the location, nor on what kind of device your application is used. All you have to check for is if W3C geolocation is supported and/or if Gears is installed. Now, let’s code!

The Code

First, we need some simple HTML. The W3C geolocation, if supported, is natively implemented by the browser, so it doesn’t require to include any external javascript. Gears however, requires to add the gears_init.js file which you can download here. Since we’ll also be using the Google Maps API, we’ll also include its library.

Now, for the sake of this example, we are simply going to display a Google map of the location once it’s found. To do so, we’ll need to add a container in the body, with some text in it that will appear until the map is loaded:

Finding your location...

That’s all for the HTML. Now let’s add some javascript. Finding the location can take a few seconds, so this call is made asynchronously. This means that we need to create a callback function that will receive the position information. Here’s a little function that will display this on a map, also showing the accuracy:

/* Show the position on a map */ function showPosition(position) { var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var options = { center: location, mapTypeId: google.maps.MapTypeId.HYBRID }; var map = new google.maps.Map(document.getElementById('TheMap'), options); var circleOptions = { map: map, center: location, radius: position.coords.accuracy, fillColor: '#0055ff', fillOpacity: 0.2, strokeColor: '#0055ff', strokeWeight: 1, strokeOpacity: 0.7 }; var circle = new google.maps.Circle(circleOptions); map.fitBounds(circle.getBounds()); }

I won’t explain here how the Google Maps API works since it is not the point of this article. If you want more info about it, please check the documentation. Note that we receive a position object. This can be either the W3C or the Gears objects, which are slightly different. However, they both have a “coords” property that contains the information we care about: latitude, longitude and accuracy (in meters).

It is also possible to create another callback function to process errors from the APIs. Let’s create a really simple one:

/* No location available */ function noLocation(err) { document.getElementById('TheMap').innerHTML = 'No location available'; }

An error object is received as a parameter which contains information about the error. Here we simply display a message in our container stating that no location information is available, but of course you could do much more.

Let’s now create the function that will actually do the call. First it needs to get an object either from the W3C API or from Gears. Then, using that object it can call one of two methods: getCurrentPosition and watchPosition. The first simply gets the position once and calls the callback function. The latter periodically retrieves the position and calls the callback method if the position changed significantly since the last time. Let’s make a function that will enable to do both depending on a parameter.

Also, since the call is asynchronous, we can’t use a try-catch block to catch any runtime error, so just in case something goes wrong, we’ll set a timeout that will call the error callback function if no location was found yet. There is actually a known issue with the current latest release of Firefox 3.6 when no Wi-Fi is available that will generate such a runtime error.

/* Timeout in case something goes wrong */ var locationTimeout = null; /* Get the location */ function getLocation(watch) { var geo = null; if (navigator.geolocation) { /* Check for W3C geolocation support */ geo = navigator.geolocation; } else if (google.gears) { /* Check for Google Gears */ geo = google.gears.factory.create('beta.geolocation'); } if (geo != null) { var geoTimeout = setTimeout(noLocation, 5000); if (watch) { /* Watch for location */ geo.watchPosition(function(position) { clearTimeout(geoTimeout); showPosition(position); }, noLocation); } else { /* Get location once */ geo.getCurrentPosition(function(position) { clearTimeout(geoTimeout); showPosition(position); }, noLocation); } } else { /* Geolocation is not supported */ noLocation(); } } getLocation(false);

As you can see, we can test for W3C geolocation support by checking if navigator.geolocation is set and if Gears is installed by checking if google.gears is set. We can then set our geolocation object. If it’s not null (one of the method is supported), we then call one of the functions, depending on the value of the watch variable. Both methods take the success callback as the first parameter and the error callback as the second parameter. We use an anonymous function as the first parameter to clear the timeout before calling the success callback. If no geolocation method was supported, we simply call the error callback. Finally, we actually call the function requesting only to get the location once (false parameter).

You can see the final result on this demo page.

Facebook Bug on New Like Buttons

Olivier — Tue, 01 Jun 2010 02:27:17 +0000

Earlier today, Dave H reported that he was getting an error when trying to use the Like button on his website. It appears that this error is widespread and is a bug coming from Facebook. When clicking on “Like” the user will see a red “Error” message and clicking on it will say that the page could not be reached. It seems to affect all newly created Like buttons. So, if you newly install the plugin, it will affect all your posts. If you already have the plugin, all your existing posts should be fine, but any new post should be affected (this includes the Like button on this very post… try it, you’ll probably get the error).

All we can do is wait for Facebook to fix this bug, hopefully soon. You can follow the thread about this bug on Facebook Developers Forum or visit the bug report page for more information.

Update: The bug is not marked as resolved yet, but I do not get it anymore. Let me know if you still get it. Also, you can find more info about the bug on this post from Mashable.

FB Social Plugins 1.2: Open Graph and Language

Olivier — Sat, 15 May 2010 02:04:11 +0000

Version 1.2 of my plugin is out! The changes are quite minor this time though and you won’t even see any new setting here. I have added some basic Open Graph tags that improve the way the likes appear on Facebook profiles. The other change is for non-English blogs: the plugins will now automatically display in the blog’s default language.

Until now, when clicking the Like button, the message posted only included a link based on the page’s title (what you see in your browser’s window title), something like “Bob likes FB Social Plugins 1.2: Open Graph and Locale – olussier.net“. By adding some Open Graph tags, both the article title and blog name are specified. From now on, when someone clicks the button, the message on their profile will look like this: “Bob likes FB Social Plugins 1.2: Open Graph and Locale on olussier.net“.

For those of you who have non-English blogs, you may have wished that the plugins were in the same language as your blog, since Facebook supports so many languages. With older versions, it wasn’t the case. If you are using XFBML, it was only in English, and if you are using iframes, it was according to the visitor’s language. Since you integrate the plugins in your blog, the newest version will match your blog’s default language, as long as it’s one of Facebook’s supported languages. Unfortunately, if your blog is multilingual this is not supported yet and only the default language will be used.

FB Social Plugins for WP 1.1 and Wow!

Olivier — Sun, 09 May 2010 03:21:38 +0000

First of all, I must say a big WOW! When I started writing my Facebook Social Plugins WordPress plugin, it was simply a first attempt at a WordPress plugin and was only for my own usage. Still, I made it available to everyone who could be interested. I didn’t expect that much interest! There have been many hundreds downloads so far and I have received a good amount of positive comments. I am glad that the plugin proves useful to all of you!

The biggest surprise I had was yesterday when Christina Warren from Mashable wrote a nice article about how to add the Like button to a WordPress blog. Among other plugins, she mentioned mine and even says she likes it! Sorry, I’m kind of excited! I really like Mashable but never expected to ever be mentioned in one of the posts of such a huge website. Anyways, thanks a lot to Christina!

All of this has given me quite some pressure to integrate the requests I have received. The most requested feature was to be able to display the Like button also on the main page. Well, I am pleased to announce version 1.1, which can do just that… and much more! You can now choose exactly where and how the Like button appears. You can now also put it at the top of the article instead of the bottom or both if you’d like. The settings page has completely changed. There is now a section to choose how the button should appear when it’s at the top and when it’s at the bottom. Then, you get a list of pretty much every kind of page you can get on your blog and, for each, you can choose whether to hide the like button or to show it at the top, bottom or both.

I also added a field for the content “pages” so you can enter a comma-separated list of IDs or slugs of pages you don’t want the button to appear on. This can be useful if you have multiple pages and generally want the button to appear on them except for one or a few ones.

Also, I had neglected one of the Like button settings: the layout. There are both the “standard” and the “button & count” layouts. The first one is the most common one, with the button and the “X people like this…” message. The “button & count” layout is a smaller one, with only the button and the number next to it. So, I added this setting.

Another detail: the Like button is now included within a
tag with the class “FacebookLikeButton”, no matter if it’s an iframe or an XFMBL tag. Using the class name you can edit your CSS and improve the way it appears on the page.

Facebook Social Plugins for WordPress: New Version Available

Olivier — Sat, 01 May 2010 03:49:19 +0000

I am pleased to announce a new version of my Facebook Social Plugins WordPress plugin. You can now get the plugin from WordPress.org.

The new version introduces the use of XFBML, which is an improvement over iframes. You can expect more added features with XFBML in the future. However, to make it work, you will need to provide a Facebook application ID (which you can get here). If you don’t provide one, it will fall back to using iframes.

The new version also introduces 3 new widgets: Like Box, Comments and Recommendations. For more information and to see demos of the widgets, visit the plugin’s page.

Facebook’s Social Plugins for WordPress

Olivier — Sat, 24 Apr 2010 02:43:21 +0000

On Wednesday, Facebook announced the new Graph API which enables developers to access Facebook’s data in a new and improved way. Another announce was Social Plugins. Those plugins let you add some of Facebook’s social features right into your website with little effort.

Meanwhile, I started playing with WordPress plugins development so I thought this was a good place to start. I have started working on a plugin that lets you easily add those social plugins to your WordPress blog. You can see what it looks like at the end of this post and in the “Recent Activity” box in my sidebar. Check out the plugin’s page for more information. Please remember that this is my very first attempt at a WordPress plugin so bare with me!

How to Use BackgroundWorker for Your Threading Needs

Olivier — Mon, 19 Apr 2010 02:21:11 +0000

When your application needs to perform time-consuming operations, you don’t want the interface to hang, so you need to use a separate thread for this operation. Still, if the operation takes some time to process, you may want to give the user some feedback about its progress. The .NET framework provides the Thread and ThreadPool classes to create and manage threads. They can be quite powerful and are a must for heavy threading operations. However, if you want a simpler solution, the BackgroundWorker class is your friend.

The Basics

BackgroundWorker uses the ThreadPool to manage threads, but makes your life much easier. For this tutorial, we will create a simple interface with one button named myButton and a progress bar named myProgressBar (make sure its maximum value is 100). Now, when clicking the button, we create a new BackgroundWorker, assign it something to do and launch it.

private void myButton_Click(object sender, EventArgs e) { BackgroundWorker worker = new BackgroundWorker(); // Assigns something to do worker.DoWork += new DoWorkEventHandler(worker_DoWork); // Launches the worker worker.RunWorkerAsync(); } private void worker_DoWork(object sender, DoWorkEventArgs e) { // Time-consuming stuff long dummy = 0; for (int i = 0; i < 100; i++) { for (int j = 0; j < 10000; j++) dummy += i * j; } }

The DoWork event is assigned a new callback method. The RunWorkerAsync method actually launches the worker, creating a new thread and calling our callback method within that thread.

Sending Parameters to the Callback Method

The RunWorkerAsync can also take any object as a parameter. If you need to send more than one parameter, that object can be an array of objects. In the callback method, you will be able to access the object using e.Argument.

private void myButton_Click(object sender, EventArgs e) { BackgroundWorker worker = new BackgroundWorker(); // Assigns something to do worker.DoWork += new DoWorkEventHandler(worker_DoWork); // Launches the worker with a parameter worker.RunWorkerAsync("Hello, world!"); } private void worker_DoWork(object sender, DoWorkEventArgs e) { // Prints out the parameter Console.WriteLine(e.Argument.ToString()); // Time-consuming stuff long dummy = 0; for (int i = 0; i < 100; i++) { for (int j = 0; j < 10000; j++) dummy += i * j; } }

Retrieving the Result

When the work is done, you may have a result to send back to the main thread (and maybe display it somewhere). Let’s simply use a MessageBox to let the user know.

private void myButton_Click(object sender, EventArgs e) { BackgroundWorker worker = new BackgroundWorker(); // Assigns something to do worker.DoWork += new DoWorkEventHandler(worker_DoWork); // A method to call when the work is done worker.RunWorkerCompleted += new RunWorkerCompletedEventHandler(worker_RunWorkerCompleted); // Launches the worker with a parameter worker.RunWorkerAsync("Hello, world!"); } private void worker_DoWork(object sender, DoWorkEventArgs e) { // Prints out the parameter Console.WriteLine(e.Argument.ToString()); // Time-consuming stuff long dummy = 0; for (int i = 0; i < 100; i++) { for (int j = 0; j < 10000; j++) dummy += i * j; } e.Result = dummy; } void worker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e) { // Lets the user know the result MessageBox.Show(e.Result.ToString()); }

RunWorkerCompleted takes a new callback method that will be called once the work is done. By the way, this method is called within the main thread, which means you can update any interface control without having to bother using Invoke. To pass on the work’s result to this method, we assign it to e.Result at the end of worker_DoWork. It is then accessible in the worker_RunWorkerCompleted method as e.Result. This result can be any object too, so it can hold pretty much anything you want.

Reporting Progress

The last step is to update our progress bar so the user knows what is going on.

private void myButton_Click(object sender, EventArgs e) { BackgroundWorker worker = new BackgroundWorker(); // Assigns something to do worker.DoWork += new DoWorkEventHandler(worker_DoWork); // A method to call when the work is done worker.RunWorkerCompleted += new RunWorkerCompletedEventHandler(worker_RunWorkerCompleted); // Enables progress reporting worker.WorkerReportsProgress = true; worker.ProgressChanged += new ProgressChangedEventHandler(worker_ProgressChanged); // Launches the worker with a parameter worker.RunWorkerAsync("Hello, world!"); } private void worker_DoWork(object sender, DoWorkEventArgs e) { // Prints out the parameter Console.WriteLine(e.Argument.ToString()); // Reference to our worker BackgroundWorker worker = (BackgroundWorker)sender; // Time-consuming stuff long dummy = 0; for (int i = 0; i < 100; i++) { for (int j = 0; j < 10000; j++) dummy += i * j; // Reports current progress in percent worker.ReportProgress(i + 1); } e.Result = dummy; } void worker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e) { // Lets the user know the result MessageBox.Show(e.Result.ToString()); // Resets the progress bar myProgressBar.Value = 0; } private void worker_ProgressChanged(object sender, ProgressChangedEventArgs e) { // Updates the progress bar myProgressBar.Value = e.ProgressPercentage; }

To enable progress reporting, we need to set WorkerReportsProgress to true and assign a new callback method to ProgressChanged. This method will be called within the main thread whenever we call the worker’s ReportProgress method. This method takes an integer from 0 to 100 as a parameter. It is the current progress in percent. In our example, we call it in the loop at every percent, then we assign its value to the progress bar using by retrieving it from e.ProgressPercentage. Note that ProgressChanged can also take any object as a second parameter that will be accessible from e.UserState (useful if you need to report more than the percentage).

BackgroundWorker can be a really nice tool to help implement simple threading. You could even manage multiple BackgroundWorkers at the same time. However, if it gets too heavy, you may want to consider using ThreadPool instead for better performances.

Introducing Twitter’s @Anywhere

Olivier — Thu, 15 Apr 2010 01:45:54 +0000

Last month at the SXSW, Twitter introduced a new platform named @Anywhere for website developers. It was launched today. The new platform makes it easy to integrate Twitter features within any website with only a few lines of Javascript.

For now, you can automatically linkify Twitter usernames or add hovercards (like this: @olussier). You can also create follow buttons and tweet boxes (to allow visitors to send tweets directly from your website). Finally, @Anywhere brings “Twitter Connect”, a method for your visitors to authenticate using Twitter (very similar to Facebook Connect actually).

To get you started quickly, you first need to register an @Anywhere app to get an API key. Then add this line of code to your website:

And then you can automatically add hovercards using:

twttr.anywhere(function(twitter) { twitter.hovercards(); });

jQuery fans will like to know that @Anywhere uses it and you can use jQuery’s selectors to choose what to apply hovercards to, like this:

twttr.anywhere(function(twitter) { twitter('a.my-tweeps').hovercards(); });

Find more details on Twitter’s developers website!

How to Extract Only the Content from a Web Page

Olivier — Sat, 10 Apr 2010 20:49:15 +0000

Have you ever visited a web page and actually had to take a moment to figure out where the content was because the page was so heavily loaded with non-content stuff? With the growing number of websites, with different designs, one may wish to simply read the page’s content without having to deal with all the extra stuff (navigation, ads, social features…).

The excellent folks at Arc90 have come up with a solution: the Readability bookmarklet. This easy-to-use bookmarklet extracts the main content from a web page and displays it in a simple yet pretty way. You can even customize the style, size and margins to make your reading as enjoyable as possible. The bookmarklet uses a generic algorithm that works on most pages that actually have content. While it is not 100% accurate, they do claim a success rate over 99%. Try it yourself on this page by clicking here!

Here’s a short video that shows how simple and effective it is:

Besides improving the reading experience, there are other great uses to this bookmarklet. First, websites do not always provide printer-friendly versions of their pages. With Readability, you get a clutter-free article ready to be printed. There even is a “Print” button. Also, if you use Evernote with the Web Clipper, you should try using Readability on a page before clipping it. You will end up clipping only the article, which is more likely what you wanted to do!

Using the Readability Algorithm in Your Applications

You can even use the power of Readability if you need to extract web pages’ content in your applications. Some nice folks have ported the algorithm to other languages. See Nirmal Patel‘s Python port here, Keyvan Minoukadeh‘s PHP port here and Immortal‘s C# port here.

Improve Your Pages with Pseudo Class Selectors

Olivier — Mon, 05 Apr 2010 22:39:41 +0000

CSS selectors are a powerful clean way of adding styles to your web pages. Pseudo classes are quite helpful when it comes to efficiently selecting which items to apply styles to. However, some interesting pseudo classes are little known. Chris Coyier, from CSS-Tricks, wrote an awesome article that introduces all the available pseudo class selectors available. Check out a demo of some of those selectors here.

Easily Parse HTML Documents in C#

Olivier — Wed, 31 Mar 2010 03:22:51 +0000

So, you are building a C# application and need to parse a web page’s HTML. You could use regular expressions, but it seems more efficient to use a DOM-based approach. What if you could even take advantage of the power of XPath?

.Net contains an HtmlDocument class, along with HtmlElement, in System.Windows.Forms, which could seem pretty interesting. It does provide basic DOM methods like GetElementById and GetElementsByTagName. However, if you try to create an HtmlDocument object, you will soon notice that it has no public constructor. It is actually a wrapper around an unmanaged class and the only way you can get an instance is through the WebBrowser control. Quite slow and annoying… So, what are the other solutions?

XmlDocument and XmlNode are an interesting solution if you have correctly formatted XML or XHTML. If you are to retrieve content from the web, then you should will need another library that will check the markup and correct it if needed. You may want to try something like Tidy or SGMLReader. Then you can create an XmlDocument and access quite interesting methods to parse and manipulate the nodes.

HtmlAgilityPack

Another solution that I actually now use every time I need to parse HTML is the free and open source HtmlAgilityPack library. It provides HtmlDocument and HtmlNode classes, which are quite similar to .NET’s XmlDocument and XmlNode classes. You can load the HTML either from a file, an URL or a string. There is no need to check the markup validity first as HtmlAgilityPack will take care of making everything valid by closing unclosed tags and fixing other markup errors. Once the document is loaded, you can start having fun parsing through the nodes!

Basic Parsing

The HtmlDocument object provides a getElementById method that let you target a specific node using its Id. You can use properties such as ChildNodes, FirstChild, NextSibling and ParentNode to navigate through the nodes. You can also use the Ancestors and Descendants methods to respectively get a list of all the ancestors or descendants of a node. Optionally, a node name can be given to retrieve only one type of nodes. Use the Attributes property to access a node’s attributes.

Here is a simple example that retrieves a web page and lists all the external links within a given node specified by its Id:

// The HtmlWeb class is a utility class to get the HTML over HTTP HtmlWeb htmlWeb = new HtmlWeb(); // Creates an HtmlDocument object from an URL HtmlAgilityPack.HtmlDocument document = htmlWeb.Load("http://www.somewebsite.com"); // Targets a specific node HtmlNode someNode = document.GetElementbyId("mynode"); // If there is no node with that Id, someNode will be null if (someNode != null) { // Extracts all links within that node IEnumerable allLinks = someNode.Descendants("a"); // Outputs the href for external links foreach (HtmlNode link in allLinks) { // Checks whether the link contains an HREF attribute if (link.Attributes.Contains("href")) { // Simple check: if the href begins with "http://", prints it out if (link.Attributes["href"].Value.StartsWith("http://")) Console.WriteLine(link.Attributes["href"].Value); } } }

Using XPath

As I mentioned above, HtmlAgilityPack supports XPath. If you don’t know XPath, I really suggest you take some time to learn it. It is quite simple, yet powerful. The HtmlNode class provides two methods to retrieve nodes matching an XPath expression: SelectSingleNode and SelectNodes. The first returns only one node (the first one matching) and the latter returns all matching nodes.

Here is almost the same example as above, but using XPath instead. Load the HtmlDocument object the same way and then:

// Targets a specific node HtmlNode someNode = document.DocumentNode.SelectSingleNode("//*[@id='mynode']"); // If there is no node with that Id, someNode will be null if (someNode != null) { // Extracts all links within that node // Note the leading dot (.) to make it look relative to the current node instead of the whole document HtmlNodeCollection allLinks = someNode.SelectNodes(".//a");

The remaining is the same.

But that code is not any shorter or simpler than the previous one! It might even actually seem more complicated with that XPath syntax. That’s right, but here comes the power of XPath. Both expressions could be combined into only one that would do everything at once. And here is the new code after the HtmlDocument object loading as above:

// Extracts all links under a specific node that have an href that begins with "http://" HtmlNodeCollection allLinks = document.DocumentNode.SelectNodes("//*[@id='mynode']//a[starts-with(@href,'http://')]"); // Outputs the href for external links foreach (HtmlNode link in allLinks) Console.WriteLine(link.Attributes["href"].Value);

Simple enough? Only the XPath part might be a bit hard to understand if you are new to it, but you will get used and eventually read it easily. This example is quite simple, but there is a lot more you can do using XPath to parse through nodes.

I hope this short introduction to HtmlAgilityPack will help you getting started using this really nice library and help you with your projects!