Creating a Web Slice for your flickr badge

March 16 , 2009 leave a comment

Once upon a time

The team working on web slices at Microsoft asked me to do a sponsored review of the IE 8’s Web Slice. Searching on Google I found an article called,  “Create your own web slices” by Seth McLaughlin. Web Slices allow you to identify a portion of your web page that gets updated.  Users can then subscribe to your web slice (like an RSS) and be informed when it gets updated.  The extra bonus of web slices is that users can see the part that has updated in their favorites bar - without having to continually visit your site.  This only works with Internet Explorer 8 but a lot my visitors use IE and I figure this is something that I can use that helps them know when I update things.  Another benefit is it allows users to digest your site/blog/what have you in another way and if you’ve set up your CSS & HTML it is a piece of cake. ;)

I am going to apply web slices to my “on Flickr” portion in my sidebar. If you would like to try it out on your flickr badge and do not have one you can follow steps on Veerle’s blog, here is Veerle’s W3C Valid Flickr badge . I decided to try it on my flickr badge because it is the most updated portion of my site thanks to my data plan and flickr email uploading via my iPhone.

Starting to code it up

To create an hslice on your web page you need to create (or use an existing) div with a class of hslice.

My original code is below: (Note: I’m using [flickrurl] to mean http://www.flickr.com/badge_code_v2.gne?count=4&display=latest&size=s&layout=x&source=user&user=43082001%40N00 in the code snippets in this post.  You probably noticed this contains me my flickr feed user number so you need to switch it for yours before using it)

<div id="flickr">
<h2>on Flickr</h2>
<script type="text/javascript" src="[flickrurl]"</script>
</div>

Add an hslice to your div

Updated code: I added the hslice like this ” <div id=“flickr” class=“hslice”>”

<div id="flickr" class="hslice">
<h2>on Flickr</h2>
<script type="text/javascript" src="[flickrurl]"</script>
</div>

Adding a title

The webslice won’t work until you add a title. I already have an h2 in my flickr div which makes a good candidate for this. All I needed to do was add the “entry-title” class to the h2. This is what I added: <h2 class=“entry-title”>on Flickr </h2> The thing about the entry-title is that it is what will appear in the favorites bar of the users browser.  So you may want to re-word it if it doesn’t make sense out of context.

<div id="flickr" class="hslice">
<h2 class="entry-title">on Flickr</h2>
<script type="text/javascript" src="[flickrurl]"</script>
</div>

So here’s what it looks like in the IE8 browser in Vista.

  CindyLi.com Web Slice

So far so good but here’s the gotcha - the flickr badge script is dynamic and so IE8 doesn’t realize its updating - yeah I know but stick with it. Basically IE8 doesn’t render the bold text when new content is added to flickr so it doesn’t show the user that anything has changed. To get around this i got a bit of help from some dev guys (since this isn’t my area of expertise and I like keeping hair on my head :P ).

First thing to note is why this isn’t working ... yup it’s security

Seth’s post says, “Note:  For security reasons, the Web Slice preview does not allow script or Microsoft ActiveX controls. Consequently, HTML forms and buttons are not supported. Instead, you can use links that contain URL parameters to perform related actions. Navigations occur within the currently selected tab. To get around this limitation, consider using an alternative display source, ....” You can read more about on his article.

So, what does this mean? Well, it means I needed to make a few changes. First, because we need to test the code for the web slice, we need to make IE8 check for updates more often. Normally, IE8 will check every 24 hrs but we can change this using a "TTL" (which means Time-To-Live). The lowest number you can put in here is 15 (for 15 minutes), anything less will still be forced to 15. This line is just <span class=“ttl” style=“display:none”>15<span>.

The code now looks like this:

<div id="flickr" class="hslice">
	<h2 class="entry-title">on Flickr</h2>
	<span class="ttl" style="display:none">15</span>
	<script type="text/javascript" src="[flickrurl]"</script>
</div>

  Flickr Webslice 3

This screenshot was in WindowsXP on bootcamp.

Now we tell the web slice where to get it’s updates from. To do this I used rss2html.com and this line of code. It looks like a lot bit really it’s a copy and paste (just remember to change the feed for your flickr ID. NOTE:You will need to upload a photo to your flickr account to test it and depending on flickr it can take a while to refresh so go get your Nintendo DS lite and play a game while your waiting.

<a rel="feedurl" href=
  "http://scripts.rss2html.com/public/rss2html.php?XMLFILE=[flickrurl]&TEMPLATE=[templateurl]"
  style="display:none;" />
<span class="ttl" style="display:none">15</span>
     
  • The "feed" url tells the web slice where to check for the change in content (if you aren’t using a script this could be an RSS feed).
  •  
  • " XMLFILE=" bit is where your flickr RSS address goes. This is the same for everyone just replace it with your flickr id. (It’s the portion after "id=").
  •  
  • "TEMPLATE=" specifies where your custom template is and will be displayed when someone clicks on the web slice.
  •  
  • So for me the full URL is http://scripts.rss2html.com/public/rss2html.php?XMLFILE=[flickrurl]&TEMPLATE=http://cindyli.com/CindyFlickrTemplate.html#flickr

The TEMPLATE described is an html page with these lines of code. You can change the "entry-title" to whatever name you want, unless you like my name on your page. ;)

<html>
  <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  </head>
  <body>
  <div class="hslice" id="flickr">
  <div class="entry-title">Cindy on flickr</div>
  <div class="entry-content">
  ~~~BeginItemsRecord~~~
  ~~~ItemPubShortDate~~~
  ~~~ItemPubShortTime~~~
  ~~~EndItemsRecord~~~
  </div>
  <a style="display: none" href="http://cindyli.com/flickrslice.html" 
rel="entry-content" />
  </div>
  </body>
</html>

Above you see I created a file called "flickrslice.html" that page is what displays your web slice. Feel free to style it appropriately with a background color, link color, or however you would like. I found it easier that the CSS is all in one page. NOTE:Remember also to change out your flickr user id.

<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>Cindy Li &#8211; on Flickr</title>
  <style type="text/css" media="screen">
  body {
  background: rgb(129,164,185); 
  }
  a img {
  border: none;
  }
  #wrapper div {
  display: inline;
  }
  img { 
  background: rgb(209,61,148);
  padding: 4px;
  margin: 2px;
  }
  #wrapper {
  width: 445px;
  }
  </style>
  </head>
  <body>
  <div id="wrapper">
  <script type="text/javascript" src="[flickrurl]"</script>  </div>
  </body>
</html>

  Flickr Webslice 1

Final tips

Remember to take out my flickr id and replace it with yours. (I know I’ve said it a few times now but I have a feeling someone’s going to forget.)

Replace the span block with the “TTL” and it will start updating every 24 hours (we only changed it so you didn’t have to wait to test your code). You can of course put in a number to force it to refresh more often (that’s the fun bit… you can if you want because its your site :D) The lower the TTL the more frequent people will hit up your site and it might be a bad thing depending on the amount of traffic you have.

Download my files

Download the web slice files

What do I think of web slices?

If you do a web slice without a script it would be easier to create than what I just did. The good news is that if you choose to do something like this flickr badge that includes a script it should be a lot easier if you follow what I’ve done here well.. if you have your divs in order. ;)

Leave a comment






Only these elements are allowed in submitted comments:

  • <a href="http://www.mysite.com/">my site</a>
  • <img src="http://www.mysite.com/myimage" alt="image" />
  • <blockquote><p>quote</p></blockquote>
  • <em>my emphasized text</em>
  • <strong>my bold text</strong>
  • <code>my code</code>

Allow 5 minutes between posts.

* = Required fields

About

Constantly, trying to learn new things, and on the way I get to meet some amazing people with my camera by my side. XOXO!

on Flickr