About two weeks ago, the WordPress.com team released a wonderful new tool called the Follow Button to all theirs WordPress.com users. This button is floating in the bottom-right corner of a blogs and let readers subscribing, by email, to the blog’s publications. Each time a new blog post is published, they receive an update in their inbox.

The idea is far from new, and may even looks like old-school. However, the implementation they did is simple, really well done and really clever. Also, the wording they used in the tool is perfect (for example, using the word Follow instead of Subscribe).

The only problem is that this wonderful new tool is only available for WordPress.com users! As you may know, this blog is using WordPress, but it is a self-hosted instance. After doing some research, I couldn’t find any plugins or methods to install it on my blog. Also, the email service under this user interface is built into WordPress.com. As last resort, I checked their Jetpack plugin, to see if it got added the Follow Button to it, but apparently they didn’t (it is probably too recent).

So, I was in a dilemma: I wanted this feature for my blog, I didn’t want to migrate everything to WordPress.com, and I didn’t had the time to write a plugin that does exactly this. So what I did is to take a few hours to hack my own Follow Button using what is already existing out there. In fact, I have been quite surprised to see how easy it turned out to be.

It as been as easy as installing the really good Subscribe2 plugin and to create the UI, from the original Follow Button using some HTML, CSS and JQuery code. After some re-wiring, I ended-up with my own self-hosted Follow Button.

This is what I want to share with you here, in this Hors Série blog post. I am pretty sure that many self-hosted WordPress blogger will want it, so I took an additional hour to write and publish this blog post.

I did two additional “improvements” to the concept:

1. I changed the icon to put some color in there. Not only to make it less dull, but also to bring a little bit mo attention to it.
2. I also added a link to my RSS feed. To me, “Follow” is not just about emails, but it is also about other syndication mediums too. However, I kept the email as the first option to keep the spirit of the tool.

Finally, I didn’t want to hack any piece of code in WordPress nor in any other WordPress plugin. The only thing that we will modify is the theme, by adding some code to it. The current implementation could be improved by upgrading Subscriber2 for example, but I didn’t want people to have to do this to enable the Follow Button on their blog.

Step #1: Install Subscribe2

First thing first. The first thing you will have to do is to install the WordPress plugin that will enable your users to subscribe, and to manage their subscriptions, to your blog via emails. We are using the really good Subscribe2 WordPress Plugin that gives these features to your WordPress instance.

To install this plugin using WordPress’ automatic plugin installation system, follow these instructions. Read the plugin’s installation instruction if you want to do this the manual way:

1. Log in to your WordPress blog and visit Plugins->Add New.
2. Search for Subscribe2, click “Install Now” and then Activate the Plugin
3. Click the “Settings” admin menu link, and select “Subscribe2″
4. Configure the options to taste, including the email template and any categories which should be excluded from notification
5. Click the “Tools” admin menu link, and select “Subscribers”
6. Manually subscribe people as you see fit
7. Create a WordPress Page to display the subscription form. When creating the page, you may click the “S2″ button on the QuickBar to automatically insert the subscribe2 token. Or, if you prefer, you may manually insert the subscribe2 shortcode or token: [subscribe2] or the HTML invisible Ensure the token is on a line by itself and that it has a blank line above and below. This token will automatically be replaced by dynamic subscription information and will display all forms and messages as necessary
8. In the WordPress “Settings” area for Subscribe2 select the page name in the “Appearance” section that of the WordPress page created in step 7

On this blog, I called the page created at step #7: Follow. Once you are done installing the plugin, you can test it by visiting your Follow page and by entering your own email (one that is not attached to any user of your account is preferable) and by checking in your inbox if you receive a subscription notification. If you haven’t, you may want to take a look at this FAQ to debug any possible issue with your outgoing email service.

Step #2: Customize your Follow Page

This next step is optional. Since that the form generated by the Subscribe2 plugin is really minimalist, you may want to customize it a little bit, to change its design and to add some explanation in the page, to help your readers to understand what is going on. Take a look at my own Follow page to see what I did to customize that page.

Step #3: Add the Follow Button code in you theme

The third step is really what will morph the Subscribe2 plugin into the Follow Button. What we are doing here, is just to add the code, in your theme, to display the Follow Button.

The first thing you have to do, is to locate where the footer of the pages is generated in the theme. Open the theme folder of your blog: /../wordpress/wp-content/themes/mytheme/. Then you will have to open a few files to check where the </body> ending HTML tag is generated. The file where that code is generated really depends on how the theme got designed. You can do a search, within all the PHP files in that folder for the string “</body>“. This should give you the answer right away. Once you located that place, you are good to continue with the following instructions.

Important note: It is possible that your Theme doesn’t use jQuery by default. If it is the case, then you have to edit the header.php (or whatever the name of the file where the header of your blog is generated) of your theme, and add the following line in the <head>...</head> section of the page:

1	<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js” type=”text/javascript”></script>

If you don’t have jQuery loaded, a JavaScript error will be returned, and the panel will “freeze” in the webpage. Once you make sure that jQuery was loaded, do proceed with this code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244

<style type="text/css" media="screen">   #bit, #bit * {}   #bit {       bottom: -300px;       font: 13px "Helvetica Neue",sans-serif;       position: fixed;       right: 10px;       z-index: 999999;       width: 230px;   }     .loggedout-follow-typekit {       margin-right: 4.5em;   }     #bit a.bsub {       background-color: #464646;       background-image: -moz-linear-gradient(center bottom , #3F3F3F, #464646 5px);       background: -webkit-gradient(linear, left top, left bottom, from(#3F3F3F), to(#464646));       filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#3F3F3F', endColorstr='#464646');          border: 0 none;       box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);       color: #CCCCCC;       display: block;       float: right;       font: 13px/28px "Helvetica Neue",sans-serif;       letter-spacing: normal;       outline-style: none;       outline-width: 0;       overflow: hidden;       padding: 0 10px 0 8px;       text-decoration: none !important;       text-shadow: 0 -1px 0 #444444;   }     #bit a.bsub {       border-radius: 2px 2px 0 0;   }     #bit a.bsub span {       background-attachment: scroll;       background-clip: border-box;       background-color: transparent;       background-image: url("[[PATH-TO-THE-FAMFAM-ICON]]asterisk_orange.png");       background-origin: padding-box;       background-position: 2px 3px;       background-repeat: no-repeat;       background-size: 20% auto;       padding-left: 18px;   }     #bit a:hover span, #bit a.bsub.open span {       /*background-position: 0 -117px;*/       color: #FFFFFF !important;   }     #bit a.bsub.open {       background: none repeat scroll 0 0 #333333;   }     #bitsubscribe {       background: none repeat scroll 0 0 #464646;       border-radius: 2px 0 0 0;       color: #FFFFFF;       margin-top: 27px;       padding: 15px;       width: 200px;       float: right;       margin-top: 0;   }     div#bitsubscribe.open {       box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);   }     #bitsubscribe div {       overflow: hidden;   }     #bit h3, #bit #bitsubscribe h3 {       color: #FFFFFF;       font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;       font-size: 20px;       font-weight: 300;       margin: 0 0 0.5em !important;       text-align: left;       text-shadow: 0 1px 0 #333333;   }     #bit #bitsubscribe p {       color: #FFFFFF;       font: 300 15px/1.3em "Helvetica Neue",Helvetica,Arial,sans-serif;       margin: 0 0 1em;       text-shadow: 0 1px 0 #333333;   }     #bitsubscribe p a {       margin: 20px 0 0;   }     #bit #bitsubscribe p.bit-follow-count {       font-size: 13px;   }     #bitsubscribe input[type="submit"] {       -moz-transition: all 0.25s ease-in-out 0s;       -webkit-transition: all 0.25s ease-in-out 0s;       -o-transition: all 0.25s ease-in-out 0s;       -ms-transition: all 0.25s ease-in-out 0s;       transition: all 0.25s ease-in-out 0s;         background: -moz-linear-gradient(center top , #333333 0%, #111111 100%) repeat scroll 0 0 transparent;       background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#111111));       filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#111111');          border: 1px solid #282828;       border-radius: 11px 11px 11px 11px;       box-shadow: 0 1px 0 #444444 inset;       color: #CCCCCC;       padding: 2px 20px;       text-decoration: none;       text-shadow: 0 1px 0 #000000;   }     #bitsubscribe input[type="submit"]:hover {       background: -moz-linear-gradient(center top , #333333 0%, #222222 100%) repeat scroll 0 0 transparent;       box-shadow: 0 1px 0 #4F4F4F inset;       color: #FFFFFF;       text-decoration: none;   }     #bitsubscribe input[type="submit"]:active {       background: -moz-linear-gradient(center top , #111111 0%, #222222 100%) repeat scroll 0 0 transparent;       box-shadow: 0 -1px 0 #333333 inset;       color: #AAAAAA;       text-decoration: none;   }     #bitsubscribe input[type="text"] {       border-radius: 3px 3px 3px 3px;       font: 300 15px "Helvetica Neue",Helvetica,Arial,sans-serif;   }     #bitsubscribe input[type="text"]:focus {       border: 1px solid #000000;   }     #bitsubscribe.open {       display: block;   }     #bsub-subscribe-button {       margin: 0 auto;       text-align: center;   }     #bitsubscribe #bsub-credit {       border-top: 1px solid #3C3C3C;       font: 11px "Helvetica Neue",sans-serif;       margin: 0 0 -15px;       padding: 7px 0;       text-align: center;   }     #bitsubscribe #bsub-credit a {       background: none repeat scroll 0 0 transparent;       color: #AAAAAA;       text-decoration: none;       text-shadow: 0 1px 0 #262626;   }     #bitsubscribe #bsub-credit a:hover {       background: none repeat scroll 0 0 transparent;       color: #FFFFFF;   } </style>     <script type="text/javascript" charset="utf-8">   jQuery.extend(jQuery.easing, {       easeOutCubic: function (x, t, b, c, d) {           return c * ((t = t / d - 1) * t * t + 1) + b;       }   });   jQuery(document).ready(function () {       var isopen = false,           bitHeight = jQuery('#bitsubscribe').height();       setTimeout(function () {           jQuery('#bit').animate({               bottom: '-' + bitHeight - 30 + 'px'           }, 200);       }, 300);       jQuery('#bit a.bsub').click(function () {           if (!isopen) {               isopen = true;               jQuery('#bit a.bsub').addClass('open');               jQuery('#bit #bitsubscribe').addClass('open')               jQuery('#bit').stop();               jQuery('#bit').animate({                   bottom: '0px'               }, {                   duration: 400,                   easing: "easeOutCubic"               });           } else {               isopen = false;               jQuery('#bit').stop();               jQuery('#bit').animate({                   bottom: '-' + bitHeight - 30 + 'px'               }, 200, function () {                   jQuery('#bit a.bsub').removeClass('open');                   jQuery('#bit #bitsubscribe').removeClass('open');               });           }       });   }); </script> <div id="bit" class="">   <a class="bsub" href="javascript:void(0)"><span id='bsub-text'>Follow</span></a>     <div id="bitsubscribe">     <h3><label for="loggedout-follow-field">Follow this Blog</label></h3>       <form action="[[PATH-TO-YOUR-FOLLOW-WORDPRESS-PAGE]]" method="post" accept-charset="utf-8" id="loggedout-follow">       <p>Get every new post on this blog delivered to your Inbox.</p>       <p class="bit-follow-count">Join <?php echo $wpdb->get_var("SELECT COUNT(id) FROM wp_subscribe2 WHERE active='1'"); ?> other followers:</p>       <p>         <input type="text" name="email" id="s2email" style="width: 95%; padding: 1px 2px" value="Enter email address" onfocus='this.value=(this.value=="Enter email address") ? "" : this.value;' onblur='this.value=(this.value=="") ? "Enter email address" : this.value;'  id="loggedout-follow-field"/>       </p>               <input type="hidden" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">             <p id='bsub-subscribe-button'>         <input type="submit" name="subscribe"  value="Sign me up!" />       </p>     </form>         <p style="padding-top: 10px;">Or subscribe to the RSS feed by clicking on the counter:</p>           <p>       [[ADD-YOUR-RSS-FEED-LINK-HERE]]     </p>   </div> </div>

The only thing you have to do is to copy/paste that code above the </body> tag. Then, do the following three modifications to properly wire it in your blog:

• At line #41, replace [[PATH-TO-THE-FAMFAM-ICON]]with the path of the asterisk_orange.png icon, on your blog
• At line #211, replace [[PATH-TO-YOUR-FOLLOW-WORDPRESS-PAGE]] by the URL of your Follow page (the one you created when you installed Subscribe2)
• At line #228, replace [[ADD-YOUR-RSS-FEED-LINK-HERE]] by the link to your RSS feed

You can get the free asterisk_orange.png icon image from the FamFamFam website. The only thing you have to do, is to download that image, and to put it in the folder you defined for [[PATH-TO-THE-FAMFAM-ICON]]. However, you can use whatever image that you prefer, that may better fit the design of your blog.

Step #4: Disable it For Mobile Devices

Some mobile devices may have issues displaying this floating window. Sometimes, the window may be floating in the middle of the device’s screen without folding-back in the bottom of the page. For this reason, you may want to disable (remove) this option if the user is using a mobile device to read your blog. You can easily disable it if the web server detects that a mobile devise is requesting the webpage by adding these two blocks of code.

First, copy and paste this first block of code above the code of the Follow button (before line #1):

1 2 3 4 5

<?php  $useragent = $_SERVER['HTTP_USER_AGENT'];  if(!preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))  { ?>

Then copy and paste this second block of code below the code of the follow button (after line #231):

1 2 3

<?php   } ?>

This code come from the Detect Mobile Browser project and is the best mobile device detection code I saw so far. What this code does, is not to include the Follow Button if the device that is requesting the webpage is a mobile device. Otherwise, the Follow Button is added to the HTML page.

Step #5: Test it!

If you are reading this step #5, it means that you finished to create your own, self-hosted, Follow Button!

Congratulation!

But the last thing that remains to be done, is to test it. Once you saved your file with the code above, just refresh any page of your blog. You should see appearing the Follow button on the bottom-right corner of your blog. If you click on it, you should see the form that let your readers subscribing to the system. If you add one of your emails, and click the subscribe button, you should get redirected to the Follow page. Finally you should receive a confirmation email that ask you to confirm your subscription by clicking on a link.

If all these steps properly works, it means that you are done and ready to provide that new functionality to the readers of your blog!

Conclusion

Even if this blog post is few pages long, I hope you found it easy to install and setup. If you have any question regarding this hack, don’t hesitate to ask them down there, in the comments section of this post. I will be happy to answer all of them.

Happy Hacking!

Translations

This blog post as been translated in Federico Bozo in Spanish. Other translations will be added to this section.

Do you like my catchy title (Update: okay I agree with Danny: “Web 3.0 love secrets of the French” is a more catchy title)? A little bit ironic considering all the brouhaha (1) (2) (3) (4) (5) (6) (and a way to much more) that generated this New-York Times article wrote by John Markoff. Web 3.0… semantic web… semantic web 3.0… call it what you like, I don’t really care: really. What is fantastic is that more and more people get interested in what many people are working on since about 12 years: the Web of Data.

Without caring about all the recent hype (and misunderstanding) it recently got, some people could ask themselves about how they could easily participate to the idea of the Semantic Web: the Web of Data.

Is it possible for the common of mortals? Yeah, even my mom could (at least if she had a blog).

If you have a blog, you can easily participate to the semantic web by installing a simple add-on to your blog system and by starting pinging a server called Ping the Semantic Web each time you publish a new blog post.

The idea here is to get the articles you wrote (and will write) and publish them on the web not as a web page, but as a document for the semantic web. You can see the Web like that:

At top, you have a source of data: the articles you wrote on your blog for example.

Then with that same source of information, you can participate to two different Webs:

1. At the left, you have the “web of humans”: the Web that can easily be understands by humans when they take a look at the screen. This is your blog.
2. At the right, you have the “web of machines”: the Web that can easily by read and processed by machines. This is another version of your blog but for machines.

Well, it seems complex, so how the hell my mom is supposed to be able to participate to the semantic web?!?!?!?

Easy, In a hypothetical World, my mom is using: WordPress for her blog on cooking, Dotclear for her blog about design, b2Evolution for her family blog and Drupal for her new French mothers` community website.

The only thing she has to do is to install one of the add-on available for each of these blogging systems.

The instructions to install the add-on on WordPress are simples: 1. Copy the following files to the WordPress wp-content/plugins/ directory: sioc.php sioc-include.php 2. Enable “SIOC Plugin” in the WordPress admin interface (Admin -> Plugins -> action “Activate”)

For Dotclear, the installation package can be found here, and the source code of the add-on can be found here.

For b2Evolution: Copy the following files to the /xmlsrv/ directory of your b2Evolution installation folder: sioc.php sioc-include.php

For the Drupal add-on, all the information can be found here.

As soon as she installed these add-ons, she started to participate to the semantic web.

Why people should take the time to install these add-ons? What is the advantage?

By doing so, you are exposing your blog`s content to many other web crawlers ( web crawlers of a new generation, propelled by the adoption of the semantic web).

From that point, you only have to ping a new pinging service called Ping the Semantic Web to make sure that your blog is visible to these new web services. The process is the same as pinging weblogs.com or technorati.com for your web feed (RSS or Atom), but you are pinging pingthesemanticweb.com: a specialized pinging service for the semantic web.

Doing that helps you to increase your visibility on the Web.

How can you setup your blog system to automatically ping this pinging service?

Simple, the process is the same for each system described above. By example, if you are using WordPress you only have to:

1. Log into your WordPress Dashboard
2. Select Options
3. Then select the Writing tab
4. Near the bottom you should see a space labeled “Update Services”: Add “http://rpc.pingthesemanticweb.com/” on a new line in this space
5. Finally press the Update Options button

So, you only have to make your system pinging http://rpc.pingthesemanticweb.com/

Conclusion

In two simple steps (1) installing an add-on and (2) adding a service to ping, a blogger can get more visibility for his blog and can start to participate to the semantic web.

Technorati: Web2.0 | web3.0 | semantic | web | bloggin | blogger | blog | wordpress | dotclear | drupal | b3evolution | sioc | pingthesemanticweb | ping |

You can download 129 different web feed readers at download.com. Primary, they will all do the same thing: aggregating RSS and Atom feeds content. After they will differ in the way they will manage and present the information. That’s it.

In that case, what is the next step with Web Feed Readers… if any?

If I check the big picture, I can find out one recurrent user state: they sat in front of their web feed reader passively reading their uninterrupted incoming flow of feed content.

I am playing with this idea since I answered to a comment from Hussein on one of my old blog post talking about the security of the Gmail Atom feeds. There is what I wrote:

Google is supposed to have tested a RSS feed service for Gmail in their GoogleLabs in 2004. I can not confirm if the service is always available because I do not have any Gmail accounts and I can not sing-in for one. This service put new incoming messages of a Gmail account into a RSS feed. Then if you subscribe to that feed you will see your new Gmail messages directly into your web feed reader. What an excellent idea! However, I was surprised to found that they used SSL to create a secure channel between the feed and the feed reader.

Then I thought about all the things that we can aggregate in these days: blog content, incoming emails, UPS package delivery status, calendar events, etc, etc, etc. Then I realized: people have all that content in their face, but what can they do with it? Some web feed readers and other services now implement a “blog this item” feature. It lets the user instantly blog about that specific item. Great, users can act accordingly to aggregated content via their feed reader. Why not extending this behavior to everything else?

The email example

In a hypothetical world, I am receiving my incoming email in my web feed reader via a RSS feed service provided by my mail provider.

What is cool is that I will receive my news, my emails, my UPS delivery status, my calendar events, etc, at the same place.

So, I just received an email from Sophie. Instead of opening my email client to answer her (what would be really, really unproductive), my web feed reader detect that the incoming web feed item is an email and let me answer directly from its interface.

Wow, one single application to do all these things.

How it would works?

Technologies are already available to be able to do that. I will not re-open the RSS 1.0 vs. RSS 2.0 debate here but this example is just another one in favor of using RSS 1.0 instead of RSS 2.0.

Fred, you are telling us that RSS 1.0 is much powerful than RSS 2.0? Yes, all the power of RSS 1.0 resides in the fact that it supports modules. This capability is given by RDF and his ability to import external RDF schemas to extend his vocabulary. What is a module? A module gives the possibility to the content publisher to extend his file format’s vocabulary by importing external RDF schemas.

- RSS 1.0, RSS 2.0: make it simple not simpler

What web feed readers need is to know what particular feed item is (a sort of type). What we need is something to tell to the feed reader that this feed item is in fact an email, and not a normal feed item, and that there are its characteristics.

This is what RSS 1.0 modules are all about. This is a way to extend the information about an item in a web feed.

That way, I could tell to feed readers that this particular web feed item is not a normal one, it is an email, and there are its characteristics (sender email, receiver email, subject, body, attached files, etc, etc).

What is wonderful is that if the web feed reader cannot understand the content provided by the module, then he just doesn’t have to care about it and display the item as if it was a normal feed item. This is what is great with modules: you can act according to or just ignore them, it doesn’t change anything.

The email example with RSS 1.0 modules

Now, how it would works? Simple, we could create a RSS 1.0 module that would describe what is an email (a module is an ontology that describe classes (sender, receiver, etc.) and their properties (subject, from, to, etc.)

I will use the mailont ontology used in MailSMORE for my example.

Considering this module, a RSS 1.0 feed of a Gmail email feed would look like something like:

<rdf:RDF
xmlns:rdf=”http://www.w3.org/1999/02/22-rdf-syntax-ns#”
xmlns:dc=”http://purl.org/dc/elements/1.1/”
xmlns:email=”http://www.wam.umd.edu/~roark/mailont.rdf#”
xmlns=”http://purl.org/rss/1.0/”
>

<channel rdf:about=”http://gmail.com/?_fl=rss1.0″>
<title>GMail feed</title>
<link>http://gmail.com</link>
<description>GMail secure feed</description>
<items>
<rdf:Seq>
<rdf:li resource=”hhttp://gmail.com/getemail?r123″ />
</rdf:Seq>
</items>
</channel>

<item rdf:about=”http://gmail.com/getemail?r123″>
<title>Hello Bob! Tonight’s dinner!</title>
<link>http://gmail.com/getemail?r123</link>

<!– only used to describe the content provider, in that case it is GMail –>
<dc: publisher>Google</dc: publisher>
<dc:creator>GMail system</dc:creator>
<dc:rights>Copyright © 2006 Google</dc:rights>

<email:Message rdf:ID=”Current Message”>
<email: DateTime>10:05:03 25/10/2006</email: DateTime>
<email:Subject>Hello Fred! Tonight’s dinner!</email:Subject>
<email:To>fred@gmail.com</email:To>
<email:From>sophie@gmail.com</email:From>
<email:Cc></email:Cc>
<email:MessageId></email:MessageId>
<email:InReplyTo></email:InReplyTo>
<email:ArchiveUrl></email:ArchiveUrl>
<email:References></email:References>
<email:Body>Hello Fred! it was to let you know that it’s working for me for tonight’s dinner. Take care! Sincerely yours, Sophie xxx</email:Body>
</email:Message>

</item>

</rdf:RDF>

Now a Web Feed Reader could act upon this meta-information if he is able to understand it.

Giving this information, I could create a web feed reader that understand the “email” RSS 1.0 module (ontology) and act vis-à-vis its content. So my web feed reader would not only display static information to its users, but it would also let them act (reply to the email) accordingly to that information!

This simple schemas only shows how a RSS reader would act accordingly to the module he understand and not.

Technorati: Web | feed | rss | rss1.0 | rss2.0 | semantic | web | readers | atom |

I was playing with the WayBack Machine when I had the idea to look at the first domain name I bought about 8 years ago: decatomb.com

The archives from the WayBack Machine are quite impressive: from 2000 to 2005 (have in mind that I didn’t update it from 2002 to 2005).

Then I started to look at the first real website I developed with nostalgia. I was amazed to found it back online. What was Decatomb? At that time I was defining it as:

“Decatomb Production is a web site designed to help other computer professionals and enthusiasts in their fields of expertise. We provide a database of useful information from Decatomb’s Community. We also archive and make available a selection of the best technical papers, articles and analyses. In addition, we link other useful websites, newsgroups, events and books. The website is organized in 25 sections of the mosts popular programming languages and subjects.”

With amazement I found that I tried to create a developer community with that website. Then I started to remember things from the past: that I had about 200 subscribed users with profiles, that I developed a IM chat system in Perl, and finally I remembered (and found while surfing the website using the WayBack Machine) that I developed a “blogging” platform (in Perl) integrated in the layout of the Decatomb’s website: it was 6 years ago.

I was amazed to remember, and found, what is now called a blog. I just got out of the high school at that time and I didn’t know what a blog was a that time (I found what it was about 2 years ago).

Then what I found astonished me.

1- I found that I was displaying my last published items at the top of the page.

2- I found that each article had their own permalink, title, body and “view comments” and “post comment” options.

3- I found that the “post comment” section was quite similar with the current comment section on my blog.

4- People even posted comments on this “blog”! What surprised me was that the “friendly ship” of the conversation is the same as the one I have with my blog readers now. Nothing official, only people wanting to talk about something.

The only thing I can say is: thank to the WayBack Machine for that re-discovery. It seems that I was predestinated to rediscover blogs and blogging.

Technorati: Blog | blogging | waybackmachine | decatomb | 2000 | software | development | programming | perl

I just came across a blog post by Doc Searl that link to a conversation about linking vs non-linking bloggers.

I was surprised to read this from Robert W. Anderson:

“What I should have said is that as a new blogger, linking is required to get into the conversation.”

My question would be: then how old bloggers can get into conversation without linking? The thing is that a link is the best metadata element we can use to link Web documents together. All the current technologies understand what a link is, and how to work and play with it.

It is sure that in the future (the Semantic Web, the Web of meaning) we will be able to link documents without “explicit links in document”. But for now, with the current technologies available, they are essential both for writer (to get into conversations) and readers (to know where the information came-from and go-to).

Links are definitely essential to beginner and expert bloggers to get into conversations.

By the way, I saw that weird argument a couple of times on the Blogsphere in the last weeks: “Strong web bloggers no longer link”. The argument here seems to mean: stop linking because the big ones stopped (you have to stop if you want to be one of these bigs). I have to confess that I don’t get it… Some A-list bloggers probably stopped to link to other people for some reasons. One of them could be because they think that they are so bright that they don’t need other people ideas to write something intelligent. For them I would cite Emerson: “Every man I meet is my superior in some way. In that, I lean of him”. Okay, I agree, most of them probably stopped to link to other people because they see themselves as columnists and not as bloggers(people that get into conversations evolving on the Web via their personal Web log) anymores.

Technorati: Link | a-list | bloggers | metadata | conversation | discussion | web | talkdigger |

I read this post a couple of days ago when I was trying to cope with all the things that happened in the Blogsphere while I was traveling. This is a really well written and insightful post wrote by Robert Scoble about Memetracker vs. Web Feed Readers.

[...]

I miss my RSS reading. Reading RSS makes me smarter, not snarkier. Why? Cause I choose who I’m going to read. Pick smart people to read and you’ll get smarter.

Hint, the smartest people in my RSS are usually the least snarky. Why? Cause they could give a f**k about all the traffic.

[...]

I totally agree with Robert on this one, and it is probably a reason why I do not give much importance to memetrackers and that I only subscribe to their RSS feeds: I give them the same importance as any other bloggers.

However, memetrackers and blog search engines have the same problem: when you try to discover new blogs and new articles that may be of interest to you, you always get the same people and the same blog posts.

Unpopular bloggers have really good ideas. However, nobody finds them because they are not popular and they are not popular because they don’t give care at all about being popular.

The problem is that all these services generally use some sort of ranking system; the type of system popularized by Google. However ranking systems are not built to show you the best results, they show you the most popular results with the premise that they are the best; but they rarely are not. So, now – how can I find these bright people? How can I read their awesome ideas?

That’s what I want: I want something that helps me manage the information in such a way that it will aggregate information that may be of interest or use to me, and not necessarily the information that for whatever reason is of interest to the rest of the planet.

Yeah right … I am dreaming in technicolour … and I know that many people have been working on that problem for ages; however, I’m impatient and I can’t wait to see a real breakthrough as it unfolds in front of the general public.

During that time, I want to connect with and talk to people that have the same or similar interests as I do, rather than spending hours weekly trying to find these people using the current services available on the Web.

Technorati: Memetracker | blog | popularity | people | blogger | find | search | information | knowledge |

I just received a flyer from the Conservative Party of Canada candidate in my region. I checked it and I saw that he had a web site with his full name as domain name. Then I told me: I hope he have a blog! Then I checked: no blog; deception.

People are talking about that the Internet can help democracy. The Canadian government does some public consultations over the Internet. People are even thinking about voting over the Internet (in fact I already voted over the Internet at the University Laval).

Now, I would like that my deputy have a blog. Companies use blogs to market their products. Companies use blogs to have a contact with their clients. Writers have blogs to get in touch with their readers. I have a blog to find new ideas, to get feedbacks from Talk Digger users. Why my deputy doesn’t have a blog?

If it is good for companies with their clients, why it could not be good for the government and their citizens?

It would be so interesting to know who my deputy is, what he is working on, his ideas and visions. So I could comments his ideas; I could show him my vision of things; I could discuss a specific article with other citizens in my region.

Great, but why the Conservative Party of Canada does setup a blog network for all his deputies, ministers and representatives? That way I could know what these people have in mind, but even more important, I could get a voice and tell them what I am thinking.

Perfect! So, what about the Liberal Party of Canada? The New Democratic Party of Canada or even the Bloc Québécois?

It is great to have offices everywhere to meet people. But what happen if citizens do not have the time to go there and get information they need? What if they do not have 40 hours to check who his Federal, Provincial or Municipal candidates are, what are their visions, etc? Please, do not blame people by saying something like: it is your duty to take your time to gather this information, to meet that people, etc. Yup it is, but they also have to work to feed and educate their children. Please, help them a little bit by making information available more easily. A good way could be by using blogs and blogs networks.

I want that my deputy have a blog!

Technorati: Canada | conservative | liberal | ndp | democracy | blog | network | deputy |

I cannot understand why Microsoft seems to try to reinvent the wheel with RSS 2.0. Okay, I am a little bit late with that one, but I just discovered that they talked about an “extension” to RSS 2.0 called “Simple List Extensions Specification” at Gnomedex 2005.

Well, what this SLES is all about? “The Simple List Extensions are designed as extensions to existing feed formats to make exposing ordered lists of items easier and more accessible to users”.

Then I was lost…

Why does Microsoft publish such a specification for RSS 2.0? RSS 1.0, supported by XML Namespaces and RDF, already use such an ordered list called a “rdf:seq” to do exactly the same thing. This capability is provided directly by RDF.

I already wrote about the difference between RSS 1.0 and RSS 2.0 and I really do not understand why Microsoft develops modules for RSS 2.0 instead of implementing everything using RSS 1.0 and RDF.

I already read somewhere that Microsoft doesn’t have in their plan to develop any RDF parser in their .NET framework. It is probably one of the reasons why they do not use RDF 1.0: because they do not have any tool to implement it and do not have plans to develop one.

Why? Someone could help me with that one?

Right now I think that my greatest whish is to have the Jena framework developed in C#. I think that I can’t rely on Microsoft for that one.

Finally it seems that I am not the only person that have questions related with this move in relation with RSS 1.0.

“Make everything as simple as possible, but not simpler”. – Albert Einstein.

I love that quote of Albert Einstein. Few words that tell so much to designers. Make things simple to the user, make it such that he does not even know that he his using what you designed (okay, it is an utopia); but beware: do not make it simpler, do not compromise on the capabilities of what you are designing to make it simple (this is all the art of design).

This said, I am currently rewriting the Talk Digger RSS feeds generator for the next release planned in a week or two. While working on it, I found that I done the error: I make it simpler while whishing to make it simple.

Let me explain the situation. Some months ago, I choose to create the feeds in RSS 2.0 instead of RSS 1.0. But what is the problem then? RSS 2.0 should be much more evolved then RSS 1.0, isn’t? No, it is not. RSS 2.0 is about 2 years younger than RSS 1.0, but much simpler. Why do I say that the file format is much simpler? Because RSS 1.0 feeds are serialized in RDF and RSS 2.0 feeds are serialized in XML.

Where is the problem then? XML serialized files are much easier to read than RDF serialized ones; in fact, RDF files are only cluttered XML files, isn’t it? No, definitely not. It is sure that RDF/XML serialized files (because there exist other serialization format like N3 that will also serialize RDF files) are less intuitive to read for humans, but they are much more powerful to answer to some needs.

Personally I see RSS 2.0 as a lesser version of RSS 1.0. Why? Because applications that support RSS 2.0 are much simpler (a thing that we do not want) considering that it only have to handle XML files instead of full RDF ones.

Fred, you are telling us that RSS 1.0 is much powerful than RSS 2.0? Yes, all the power of RSS 1.0 resides in the fact that it supports modules. This capability is given by RDF and his ability to import external RDF schemas to extend his vocabulary. What is a module? A module gives the possibility to the content publisher to extend his file format’s vocabulary by importing external RDF schemas.

Okay, but what is the advantage of using these modules? I will explain it with an example using Talk Digger. I am currently thinking about creating a RDF schema that would model some semantic relations that Talk Digger will compute with the search engines’ returned results. Personally I want to make that information publicly available to anyone who would like to have access to it and do something with it. This said, I am also thinking to broadcast the information directly in the RSS feed: I want to create only one source of information that would broadcast everything. RSS 1.0 gives me that possibility (in fact, a RSS 1.0 web feed is a normal RDF/XML file using the RSS 1.0 schema). It is beautiful, I can make all the information I want available to any one, in a unique source. If a software that read the feed do not understand a part of the information I broadcast (in reality, he do not know the RDF schema I am using) he simply skip it and continue to read the source of information (the web feed) and do what he have to do with the information he understand. I can’t do that with RSS 2.0 because it is serialized in XML and not RDF. I could even add OWL elements in my feeds to model some relations between the knowledge represented in the web feeds. That way an application could be able to infer knowledge from it! An example of a popular module is the Dublin Core metadata initiative.

You are probably thinking: yeah Fred, but readers only have to support both formats, and publishers also only have to support both formats as well and everybody will be happy. Bad design thinking: do not forget that the goal is to make application. How do you think that I will explain the difference between RSS 1.0 and RSS 2.0 to my mother? How do you think that I will explain her which one to choose if she have the possibility to subscribe to more than one feed? Will she choose RSS 0.91, RSS 0.92, RSS 1.0, RSS 2.0, ATOM 0.9, or ATOM 1.0 (because some websites propose them all)? Sorry, but I do not want to.

One of the current problems

On of the problem are the way applications handle all these file formats and serializations. I will explain it with a problem I faced today while testing the new RSS feed of Talk Digger with Bloglines.

A thing I wanted was to use the Dublin Core element “Description” instead of the normal “<description></description>” tag of the RSS 1.0 specification. I first thought that it would scale much more because the Dublin Core RDF schema is widely use by many, many applications over the Internet. First I tested it using RSS Bandit. It worked like a charm. All the Dublin Code elements I added to my RSS feed were handled by it. Wow! Then a tested it with Bloglines: nothing. Bloglines just doesn’t handle that Dublin Core tag: deception.

Then I included this namespace into my RDF file: “xmlns:ct=”http://purl.org/rss/1.0/modules/content/””. Then I re-tested it: nothing. Wow, it should works, isn’t? Then I tested something else, I changed the alias “ct” for the namespace “content”: it worked. What a deception I had: Bloglines is not caring about the namespace local alias, in fact it seems that it parse the RSS 1.0 feeds (in fact a RDF file) with fixed strings. The system should know that “ct” is related to the namespace instead of “content” because they are just aliases that I use to define the namespace in my local file. It is a perfect example of bad implementation of specifications in softwares.

The problem here is that Bloglines is the most popular web feed reader out there. So I have to change the way I build my feeds to handle that fact, but I shouldn’t be supposed to (it is really frustrating). Will I have to change the way I build my feeds each time I discover that an application is not parsing and using them properly? I hope no, I shouldn’t be supposed to because I follow the specification to build them.

I hope they will check that problem with their parser and hire somebody to develop a robust system that will parse and handle the RDF specification, and not only parsing RSS 1.0 feeds as simple text files with some format… (Could I change that skill requirement “Familiarity with RSS and blogs” for “Strong understanding of RDF, RSS and blogs”, cited in that job proposition, to answer that responsibility “maintain and improve RSS crawling and parsing processes”.

I hope to be able to show you how RSS 1.0 could be extended, using a future version of Talk Digger, soon.

Technorati: Rss | rss1.0 | rss2.0 | atom | feed | Bloglines | talkdigger | simple | simpler | Einstein |

Since some months, I ear mainstream media in Quebec and Canada talking about blogs (especially since the Gomery Commission). It was the first sign of the influence of blogs on Canadian traditional Medias; how they could possibly change the way Canadians get information, how Canadian laws are applied (always think about the Gomery Commission and American blogs), etc.

Today I just take a look at a new political program on RDI (the national news broadcast channel in French (CBC in English)) called “Les coulisses du pouvoir” (Power’s backstage). Then I saw a screen appearing with the topic of the next chronicle: “Les Bloggueurs” (The Bloggers). Then Bruno Guglielminetti started to talk about what Canadians and Quebecois bloggers had to say related to the last week’s main political events.

Now, how can we say that Bloggers do not have an influence on main stream Media when the national news channel of Canada retrieve and analyze information that came from local bloggers?

Technorati: medias | traditional | bloggers | canada | canadian | influence |