Amateur webmaster tip. This is yet another easy tip to include a widget with your (or someone else’s) Flickr pictures on your website.
This one comes courtesy of Widgetbox. Here is a step-by-step procedure:
1. Go to widgetbox
2. Click on “Make a widget”
3. Click on “Blog/Feed”
4. Go to Flickr
5. Choose a photo set and click on “feed” on the lower left corner of the page
6. Copy the feed url that appears in your web address bar, or control click the feed button and copy the link
7. Go back to the widgetbox page, paste the address and click on “continue”
8. Paste the address again in the lower box and click on “OK”
9. Adjust the appearance settings of your widget, and click on “publish blidget”
10. Grab the code (you will need to register first on widgetbox). Once you click on “Get widget”, you will be presented with a few ready-made options. If you use Rapidweaver or your own Wordpress blog, click on “get code”. You will then need to paste the code where it fits best on your website.
For Rapidweaver, you can paste the code in any styled page or in your sidebar. On Wordpress, you can either edit sidebar.php (for your sidebar) or another file such as header.php (for your header), or create a Wordpress widget and paste the code there.
I have pasted the code in my Wordpress post. Here is the result:
123Flickr is a gallery creating utility that generates code for you to insert a cute Flickr gallery in your website. It is available at 123Flickr.com. It is not restricted to your own pictures, and you can create galleries from any Flickr picture set or Flickr user you have an interest in. It does not work (yet) with Flickr collections.
First, you will have to find a user or a picture set that you like in Flickr. Let’s take our Countries in Colors Flickr account as an example. You simply copy the name of the user (in our case countries in colors) and paste it into the username dialog that appears on the first page at 123Flickr.
Second you determine the number of pictures that should appear in your gallery. Be mindful not to add too many images as this slows down loading when you will access your page.
Third, you receive a rather long string of code which you copy and paste into any styled or html page on RapidWeaver (it also works on plugins that are compliant with the styled mode, such as carousel), or in any page, post or on your sidebar.php file in Wordpress. I suggest you preview your gallery before you copy and paste the code, as you will need enough pictures to fill in the gallery space: look at the various examples below.
The problem is that 123Flickr will create a gallery holder that will often not have the proper height and width. It will not adjust automatically to the number of pictures you put in the gallery. There is fortunately a way around it. In the code provided by 123Flickr, you can adjust width and height parameters. You must play around a little with it, until you find the correct settings for your gallery, as shown below. Note that you must enter your parameters twice in the code.
I have added html “< center >” tags before and after the code to center in this page. The result is not stunning but it is still very nice, with nifty transparency effects. I find the image display a bit on the slow side, but otherwise it is a very nice solution to add a small gallery to your website.
Slideflickr
Slideflickr touts that it “will help you create and embed Flickr slideshows in less than 10 seconds”. Simply type in a username, user, group, or a set URL on Slideflickr’s homepage, hit enter, and you receive a url to copy and paste on your website. When entering the “countries in colors” username, the result looks like this:
The standard size of the slideshow window is a 500 by 500 pixels square, but you can easily customize this by modifying the simple code you pasted by for example reducing it to 400 by 400 as I did in the above example. Better still, you can click on the “advanced options” tab and customize the appearance of your slideshow in various ways: window size, customize text messages, background color, speed, enter a custom logo text and url link, or even add a background music.
But Slideflickr’s versatility does not end there: you can also select the content of your slideshow by set, tags or favorites. The only downside of Slideflickr is that it is but a nice interface to Flickr’s standard slideshow. It does not create any new slideshow template or transitions.
Still, it is a very easy to use and free slideshow creator and I would recommend it to Wordpress users. RapidWeaver users may consider a more powerful alternative which I reviewed before: RapidFlickr.
With the advent of tens of popular social websites, there is an increasing urge to integrate your site with your social virtual network. Let’s see how to do it on sites designed with RapidWeaver and Wordpress. For a change we will try to show how to achieve this with pictures and only a few words.
The most obvious place to insert your badge is in the sidebar, but you can put it anywhere using different pages styles. It works in html, styled text and any other pages compatible with styled text, such as RapidFlickr or Carousel.
Insert your badge on your Wordpress site
The easy way to insert a badge on your sidebar is to use the Flickr badge widget. However, if you do not use widgets or prefer to put your badge in a post or in a page, simply paste the code you got from the Flickr website in your post or page.
In my previous Flickr images post I focused on the built-in Flickr functions of RapidWeaver and the various Flickr image integration plugins available for both Wordpress and RapidWeaver. But there are literally hundreds of tools and webapps available to integrate Flickr images on your website which have not been specifically designed with RapidWeaver or Wordpress in mind. Fear not, you do not need to be a big web wizard to unleash the power of Flickr and put great photo effects on your website.
Today I will be looking at the various options available to allow picture browsing on a map.
Prerequisite: you need to tell Flickr where pictures have been shot
Unless you have a very sophisticated camera with GPS integration, Flickr cannot guess where pictures have been shot. You must first put your pictures on a map, in a process known as “geotagging”. There are various ways to do so:
The über geek way: synchronize gps data with your camera. This is reserved to the professionals or the very advanced photography amateurs, and requires that you have specific gear or software that allows you to match the time stamp of a gps coordinate on your handheld gps with the time stamp of the photos taken with your digital camera. There is one free photo software called Jet Photo Studio that allows you to match digital photos with time synchronized GPS track logs. The popular Apple iPhoto software also does it, but you need to unlock the feature.
Geotagging photos on your computer. The same Jet Photo Studio also allows for relatively easy placement of your photos on a map in conjunction with Google Earth.
Geotagging on Flickr. The most straightforward way to geotag your pictures is by using Flickr itself. Once you have uploaded your photos, click on the >”Organize” tab in Flickr, select the photos you want to put on a map, and Flickr lets you search locations on a Yahoo map on which you can drag your pictures. This process is shown in the image below
Geotagging on steroids. If you are serious about geotagging, or if you are planning on using the Travelr map described below, you will want to use the localize it bookmarklet. This powerful webapp lets you place any of your Flickr images on a map from within Flickr in a much easier and more elegant way than Flickr itself. The elegance of this solution is shown below. We will also see that Travelr does not require the geotagging of all your photos, which is a big time saver.
Once you have geotagged the pictures which shall be shown on your map, the fun can begin.
Your Flickr photo map using Trippermap
Trippermap is a beautiful free webapp that lets you create a world map showing where your geotagged pictures were taken, zoom on any of them, view them as a slideshow and much more. The service requires that you sign up, and it takes a few minutes before your geotagged photos appear on the map. Below is Countries in Colors’ very own Flickr photo map using Trippermap.
Once your map is ready, Trippermap generates a short code which you simply copy and paste into your Wordpress or RapidWeaver post or page. The service works with all standard html pages, so you can also use it if you are using other publishing platforms. A premium version of Trippermap is also available and lets you add more photos, show your travel paths and use other maps (including Google, Yahoo and MSN satellite images) against a small annual fee.
Your Flickr photo map using Travelr
A slightly less powerful option is Travelr. It is also a little more cumbersome to install, as it requires you to download files which you must customize to fit your needs before posting them to your website. Integration is therefore less easy than with Trippermap, but Travelr has two advantages. First, it takes the hassle out of supplying geographic coordinates for each photo by only requiring them once for each location - not for each photo. This brings significant time saving if you want to publish lots of pictures. Second, you are hosting the map on your own server, which means you get more control and you are not dependent on a third party to host your map. You can see it in action on our Blue Site: Blue Brussels, Blue Bulgaria and Blue Hong Kong. The interface is also slicker than Trippermap’s, as shown below.
Travelr does not allow for many pictures to be posted, has a less powerful zoom, and may be tricky to integrate - I had to use an iframe above :( This being said I like its interface better.
I hope you will find this useful. If you like browsing pictures using maps, I’d suggest you check out the great Localize.us website: amazing! Enjoy Flickr!
Flickr is a fantastic pictorial resource that allows anyone with a website to integrate images and do much more. We’ll see how to achieve this using RapidWeaver or Wordpress.
Why using Flickr makes sense
With Flickr, you can publish your own pictures but also any of the millions of other images available on the site. Illustrating your stories becomes very easy with such a massive pictorial resource. Even for your own pictures, it makes sense to use Flickr for storage purposes especially if you have limited storage and bandwidth available with your hosting account. Finally, there are tens of useful Flickr web apps that add a lot of fun to the photo experience.
Flickr integration tools on RapidWeaver
Photo album
RapidWeaver’s own photo album style page allows users to create elaborate Flash slideshows using any Flickr photo sets, groups or pools as sources. There are a few cute effects available including the Ken Burns effect, and you can easily add an audio soundtrack. The slideshow appears in a separate page, and there are no options to add text above or below the pictures. There is also no possibility to show photo captions.
RapidFlickr
Another more powerful option for Rapidweaver users is Loghound’s Rapidflickr. Once installed, a new Rapidflickr style page becomes available in RapidWeaver. It features powerful options to select pictures based on tags or photosets, dates, as well as to update the picture selection live to include all the new pictures added on Flickr that match your selection criteria. You can also publish pictures as a photo album in different sizes, with Lightbox effects or as a slideshow. Besides, you can choose to show photo captions and add an introductory text or some descriptions (or even ads) before or below the picture set.
Flickr badge with Blocks
Yourhead software’s Blocks allows you to put a Flickr badge anywhere in the contents of your RapidWeaver site in a snap. The badge requires the Blocks plugin and can be downloaded here. The author also provides a non-Flash version which will work with the iPhone browser (as reported elsewhere the iPhone does not support Flash content). The non-Flash version can be downloaded here.
Flickr integration tools on Wordpress
FlickrRSS
Eightface’s simple FlickrRSS plugin allows you to put any number of Flickr images anywhere in your Wordpress site: just add the simple php code line in the sidebar.php or in your other templates. With this plugin you are not limited to your own pictures, but you can choose any tags or groups and choose the image size. Simple, very elegant yet powerful. You can see it in action in the sidebar or in the iPhone web development page on this site. With a little css knowledge you can already achieve very nice effects. The plugin also allows for the caching of pictures on your server to speed up access, but this functionality seems to be broken now.
FAlbum
RandomByte’s FAlbum is much more powerful and allows the creation of a full image gallery on your Wordpress site, fully integrated with tags, tag clouds, Google-searchable pages, latest pictures in the sidebar, etc. It also reproduces the captions, notes and EXIF data of your pictures. Like FlickrRSS, FAlbum also allows for the caching of the Flickr pictures on your site to speed up access. This is a very powerful tool, but beginners will have a steep learning curve to integrate the generated photo galleries with their Wordpress themes.
Flickr Photo Album
I love Silas’ Flickr Photo Album and you can see it in action on this site: look at our picture gallery. Like FAlbum it allows the creation of a full picture gallery section on your Wordpress site, complete with tags, comments, digging, etc. The standard template tends to integrate better than FAlbum, and it is thus easier to implement on your site. It also comes with a sidebar widget, and the photos are cached.
But where Flickr Photo Album shines is in what you do not see: this plugin allows easy access to all Flickr pictures and albums from within Wordpress’ posting mode. You can search and add Flickr pictures directly in your posts or pages: no more need to upload the picture or to hardlink to it. The plugin does it for you!
Other easy ways to integrate Flickr pictures on Wordpress
But this short survey would not be complete without mentioning Flickr itself. If you have an account at Flickr, you can add your Wordpress websites in your preferences and you will be allowed to put any picture in your posts directly from within Flickr. This is really great: browse Flickr pictures and post those you like, together with some text and comments, directly on your Wordpress sites. The only limitation is that this technique requires that the picture becomes the story. There is no way to add more than one picture per post, and you need to configure the post style in your preferences.
Tens of other platform-independent Flickr apps
We will be covering many more Flickr web apps in the future, so stay tuned!
RapidWeaver’s own photo album style page allows users to create elaborate Flash slideshows using any Flickr photo sets, groups or pools as sources. There are a few cute effects available including the Ken Burns effect, and you can easily add an audio soundtrack. The slideshow appears in a separate page, and there are no options to add text above or below the pictures. There is also no possibility to show photo captions.
Another more powerful option for Rapidweaver users is 
Eightface’s simple 
Countries in Colors