This article will show you how to display thumbnails of your newest Flickr photos on your site. The HTML output and each thumbnail image is cached on your site to improve performance.
Flickr.com is one of my favourite websites. It allows me to upload all of my digital photos, tag them, categorise them, and share them with my contacts. After using Flickr for a short while you will notice that almost every page has an RSS feed associated with it. This means that you can subscribe to anyone's photo gallery, photo comments, group discussions, photos tagged with a certain keyword, and so on.
This article will show you how to use the RSS feed of your own photostream, and display thumbnails of your latest photos on your own website.
Finding the RSS feed
The feed itself is linked at the foot of your main photos page. It follows the following format:
http://flickr.com/services/feeds/photos_public.gne?id=[userid]&format=rss_200
The full code
The full code is quite long (78 lines, including comments). I'm not going to break the whole code down into chunks and explain it, since it has been stripped back into several functions and is fairly difficult to explain linearly. I have added comments where necessary.
<%
'URL of your RSS feed (copy from the "Feed" link of your Flickr gallery
Dim strXMLURL : strXMLURL = "http://flickr.com/services/feeds/photos_public.gne?id=[userid]&format=rss_200"'The name of the file to which the HTML is cached
Dim strCacheHTML : strCacheHTML = "flickr.htm"'The local path to the folder you will cache photos to, e.g.
Dim strCachePath : strCachePath = "d:\webs\mydomain.com\wwwroot\cache\"'The public URL to the above cache directory, e.g.
Dim strCacheURL : strCacheURL = "http://www.mydomain.com/cache/"'This function takes the URL of the RSS feed, and the XML node name of each photo
Function getXMLNode(strURL, strNode)
Dim objXML : Set objXML = Server.CreateObject("MSXML2.FreeThreadedDOMDocument")
objXML.Async = False
objXML.setProperty "ServerHTTPRequest", True
objXML.Load(strURL)
'Returns a collection of nodes to be looped through
Set getXMLNode = objXML.getElementsByTagName(strNode)
Set objXML = Nothing
End Function'This function pulls the thumbnail images frm Flickr and saves them to the local web server
Function cacheImage(imageURL)
Dim cacheFSO : Set cacheFSO = CreateObject("Scripting.FileSystemObject")
Dim aFileName : aFileName = Split(imageURL,"/")
Dim strFileName : strFileName = aFileName(UBound(aFileName))
'Check to see if the photo has been cached already
If Not cacheFSO.FileExists(strCachePath & strFileName) Then
Dim objXMLHTTP : Set objXMLHTTP = Server.CreateObject("MSXML2.ServerXMLHTTP")
Dim objJpeg : Set objJpeg = Server.CreateObject("Persits.Jpeg")
objXMLHTTP.Open "GET", imageURL
objXMLHTTP.Send
'Reads the image from Flickr.com
objJpeg.OpenBinary(objXMLHTTP.ResponseBody)
'And saves it to the local web server
objJpeg.Save strCachePath & strFileName
Set objXMLHTTP = Nothing
Set objJpeg = Nothing
End If
Set cacheFSO = Nothing
Set aFileName = Nothing
'Returns the filename, e.g. "myphoto.jpg"
cacheImage = strFileName
Set strFileName = Nothing
End Function'Checks to see whether the cached HTML has expired
If cacheFileIsExpired(strCacheHTML, 12, "hours") Then
'Creates a collection of XML nodes. The getXMLNode function is passed the URL
'of the Flickr RSS feed, and the node name for each photo record ("item")
Dim objItemList : Set objItemList = getXMLNode(strXMLURL, "item")
Dim objItem, strHTML
'Loops through each photo
For Each objItem In objItemList
strHTML = strHTML & "<div class=""flickr-tn"">" & vbCrLf
'Writes the photo title. The safeHTML function converts some possibly dodgy characters
'that might be in your title, into valid XHTML (ampersands, accents etc.)
strHTML = strHTML & vbTab & "<span>" & safeHTML(objItem.childNodes(0).Text) & "</span>" & vbCrLf
'Writes a link pointing to the photo page on Flickr.com, and writes the URL of the newly cached photo
strHTML = strHTML & vbTab & "<a href=""" & objItem.childNodes(1).Text & """><img src=""" & strCacheURL & cacheImage(objItem.selectSingleNode("media:thumbnail").getAttribute("url")) & """ alt=""" & safeHTML(Replace(objItem.childNodes(0).Text & "","""","")) & """ title=""" & safeHTML(Replace(objItem.childNodes(0).Text,"""","")) & """/></a>" & vbCrLf
strHTML = strHTML & "</div>" & vbCrLf
Next
Set objItemList = Nothing
Set objItem = Nothing
'Update the HTML cache, and write output to the page
Response.Write(writeCachedFile(strCacheHTML, strHTML))
Set strHTML = Nothing
Else
'If cache is not out of date, server up the cached HTML file
Response.Write(getCachedFile(strCacheHTML))
End IfSet strURL = Nothing
Set strCacheHTML = Nothing
%>
Something's missing!
If you read that carefully, then you will realise that three functions are missing from the code. These three functions perform the HTML output caching, and can be found in my Data Caching Using Text Files in ASP article. From this page, copy the first three functions into a new ASP file, and include it with the above code.
Configuring the script
The code will not work straight away. You will need to edit the first four variables:
Dim strXMLURL : strXMLURL = "http://flickr.com/services/feeds/photos_public.gne?id=[userid]&format=rss_200"
This line should contain the path to the RSS feed of your photos. Just browse to your main photo page and copy the URL from the feed link at the bottom.
Dim strCacheHTML : strCacheHTML = "flickr.htm"
This is the name of the HTML output cache file. It can be left as it is, or changed to your liking.
Dim strCachePath : strCachePath = "d:\webs\mydomain.com\wwwroot\cache\"
This is the local path to the cache folder. You should create a folder named "cache" in the root of your wwwroot directory, and replace "mydomain.com" with your domain name.
Note: this is the local path used on OpenHosting's servers. Other web hosts may use a slightly different configuration, so it's best to check first!
Dim strCacheURL : strCacheURL = "http://www.mydomain.com/cache/"
This is simply the URL pointing to the aforementioned cache folder. Again, replace "mydomain.com" with your domain name.
How long until the cache refreshes?
The default is 12 hours. If you do not upload photos very often, then you can increase this value (found on this line):
If cacheFileIsExpired(strCacheHTML, 12, "hours") Then
The number "12" can be any number. Setting it to 0 will force a cache refresh every time the script loads. The "hours" string can also be changed to "minutes" or "days", to fine tune your cache length.
Caching photo thumbnails
I've found Flickr to be very slow sometimes. For this reason, this script actually downloads the thumbnails from Flickr and stores them on your own site. This means that if Flickr is suffering from downtime or slow speeds, your photos will still load with the lightning speed of your own web page. Hurray!
Thumbnails are only ever downloaded once, and are stored in the cache folder. To refresh a thumbnail image, simply delete it from the cache folder, and the script will download it again when it runs next.
Adding the script to your own site
I have found that this script works well for showing the thumbnails on a sidebar on my sites. To use it in your own pages, save all of the code as an ASP page named "flickr.asp". You can then include it in your site as follows:
<h2>My latest Flickr uploads</h2>
<div id="flickr-photos">
<!--#include file="flickr.asp" -->
</div>
Questions or comments?
Head over to the article page in the friendly support forums, and post away
