On Saturday, I showed the original HTML code that I am putting in each blog entry. Today I will show what it is transformed into and tomorrow I plan to share the script that does all the hard work (although these resources are all available on the site already if you know how to look for them).
<div id=”flickr-33914938-c68baffd6e-22″ class=”flickrcomment” style=”overflow: hidden; display: block; height: 38px; width: 889px; opacity: 0.9999;”>
<a href=”http://www.flickr.com/photos/wulf/33914938/”><img alt=”Comment Link” title=”Click here to add a comment” src=”http://static.flickr.com/22/33914938_6232fa9c0f_s.jpg” /></a>
<p>There are 0 comments on this post. Want to add something? Click on the picture to add a comment and join the conversation about this posting.</p>
<p>(Nb. Flickr or Yahoo! account required)</p>
Three key changes have taken place:
- The div tag has had some style information added – this is part of the effect that causes the comments section to smoothly grow when it is updated and is determined by jQuery.
- The information that is crammed into the id attribute has been unpacked to display a thumbnail version of the photo I have picked, along with a link back to the Flickr photo page.
- Using some AJAX-based techniques, the Flickr server is queried to find out how many other comments have been posted on the associated picture.
Want to add something? Please join the conversation about this posting (nb. Flickr or Yahoo! account required).