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:
There’s a new Rapidweaver version in the making and it will be a free upgrade to 3.6 users! Ars Technica takes a look at some of the new features in the Leopard-only RapidWeaver 4 from Realmac Software.
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.
Telling more about you is one of the most common objectives of a blog. What’s more personal than musical tastes? You could write about your favorite artists, but there is a great way to share your musical tastes: Last.fm. Once signed up, Last.fm will keep track of the songs you play on your computer or on your iPod, and let you share them with the world. You can use the Last.fm scrobbler to do this, but many third party applications also pick up your musical tastes. Personaly I like Cover Sutra, which allows you to control iTunes, display album art, rate your songs, and last but not least scrobble your songs and report them to Last.fm.
Adding your musical tastes on your Wordpress or RapidWeaver site
A pictorial is better than words, so here it is, a quick how-to guide to publishing a Last.fm widget on your website.
You can paste the widget on any html or styled page on RapidWeaver, or choose to paste it in the sidebar. The process is similar for Wordpress. If you choose to put the widget in your sidebar, you should choose a vertical format. Below you can see the horizontal format. Needless to say that it updates live as more songs get scrobbled.
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.
iPhone web development guidelines released. A quick post while I am on the road. In a development that will rejoice many developers of iPhone-compatible websites, Apple has finally released iPhone web development guidelines:
There are some new website templates on this iPhone compatible version of Countries in Colors (still in beta).
Categories
I have now three categories:
iPhone compatible website themes
These themes allow you to create web pages that will be best viewed with Apple’s iPhone. These website templates are mainly designed for RapidWeaver and Wordpress and are currently iPhone-only: they have no ability to detect whether the visitor is using a non-IPhone browser and will therefore look slightly odd on non iPhone browsers.
iPhone centered website themes
These templates allow you to create web pages with an iPhone theme. These website templates are mainly designed for RapidWeaver and Wordpress. They are not particularly tailored nor suited for viewing on the iPhone web browser.
iPhone skins and themes
These templates allow you to skin your own phone to become more iPhone-like. Work with most popular phones such as Sony Ericsson, Nokia, Samsung, Panasonic, Blackberry, PocketPC, Siemens, etc.
Website templates and phone skins
Since Countries in Colors’ iPhone compatible version does not look very well on non-Iphone web browsers, here’s a brief summary.
iPhone compatible website themes
1. Countries in Colors RapidWeaver iPhone theme [source - download]
2. Real Mac Software RapidWeaver iPhone theme [source - download]
I will be putting my iPhone website theme development efforts on hold for the time being, as RapidWeaver just released a theme done right. You can see it in action on this page, although you will need an iPhone or the iPhoney emulator to view it properly. Currently in beta, the theme is not yet able to detect whether the site is being accessed with an iPhone or with another device. But it is already beautiful and makes a smart use of the sidebar, which slides in when the little menu icon to the right of the navigation bar is pressed (or clicked on if you are still using a mouse and not a finger).
The only issue we have found so far is that the title style (the “h1″ css style) is not suited for long titles because its height is fixed to 34 pixels. Still, this is a much better RapidWeaver theme than our own amateurish attempt, and we would recommend it to all RapidWeaver users who want to develop sites specifically for the iPhone.
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!
These themes allow you to create web pages that will be best viewed with Apple’s iPhone. These website templates are mainly designed for RapidWeaver and Wordpress and are currently iPhone-only: they have no ability to detect whether the visitor is using a non-IPhone browser and will therefore look slightly odd on non iPhone browsers.
These templates allow you to create web pages with an iPhone theme. These website templates are mainly designed for RapidWeaver and Wordpress. They are not particularly tailored nor suited for viewing on the iPhone web browser.
These templates allow you to skin your own phone to become more iPhone-like. Work with most popular phones such as Sony Ericsson, Nokia, Samsung, Panasonic, Blackberry, PocketPC, Siemens, etc.
Countries in Colors