Related posts:

1. Ars Technica takes a sneak-peek at RapidWeaver 4
2. New version of RapidWeaver coming soon
3. RapidWeaver 3.6 released

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:

Related posts:

1. Adding social links on your website: Flickr badge
2. More Flickr integrating tools for your your website
3. Integrating a Flickr photo map on your website

Related posts:

1. New version of RapidWeaver coming soon
2. MooTools 1.2: Official Release
3. Rapidweaver 4 is out!

123Flickr

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.

Related posts:

1. Yet another way to simply put your latest Flickr pictures on your website
2. Integrating a Flickr photo map on your website
3. Adding social links on your website: Flickr badge

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.

Related posts:

1. Adding social links on your website: Flickr badge
2. Adding a forum to your website
3. More Flickr integrating tools for your your website

First, create your Flickr badge

Starting point: Flickr tools.

Insert your badge on RapidWeaver

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.

That’s it!

If you are interested in more Flickr tricks and tips, you may want to check out Integrating Flickr pictures on your Wordpress or RapidWeaver site and Integrating a Flickr photo map on your website.

Related posts:

1. More Flickr integrating tools for your your website
2. Adding social links on your website: your music
3. Yet another way to simply put your latest Flickr pictures on your website

• Apple’s web development for iPhone page
• Optimizing Web Applications and Content for iPhone
• Other useful information from the iPhoneWebDev group

Related posts:

1. Customizing your website for iPhone browsing
2. The do’s and dont’s of iPhone web development
3. Seen on the web: iPhone SDK beta 5 released

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]

iPhone centered website themes

1. Hello 1.0 / iPhone Wordpress theme [source - download]
2. Jinsona’s Hello iPhone Wordpress theme [source - download]
3. iFoney Wordpress theme [source - download]
4. Hello by 2bitoperation theme for RapidWeaver [source - download]

iPhone skins and styles for popular phones

• iPhone theme for Nokia N80 [source - download]
• iPhone theme for Sony Ericsson w810i [source - download]
• iPhone themes for BlackBerries [source - download]
• iPhone theme for Sony Ericsson w900i [source - download]
• iPhone theme for Sony Ericsson k750, w700, w800, w810 [source - download]
• iPhone theme for Sony Ericsson k610i [source - download]
• iPhone theme for pocket pc [source - download]
• Leo S60 iPhone theme for Symbian OS S60. Works with Nokia N70, N72, 6630, 6620, 6680, 6681, 6682, 6670, 7610, 6260, 3230, 6600 Samsung SGH-D720, SGH-D730 Panasonic X700, X800 [source - download]
• iPhone Black theme for Sony Ericsson k750, d750, k600, w800, w700 [source - download]
• iPhone theme for Sony Ericsson K800, K790 [source - download]
• iBored theme for Sidekick [source - download]
• iPhone theme for Sony Ericsson w850 [source - download]
• iPhone theme for Sony Ericsson k800, w850 [source - download]
• iPhone theme for Sony Ericsson k750, w800 [source - download]
• k800 iphone theme for Sony Ericsson k800 [source - download]
• iPhone style for BenqSiemens E71 [source - download]
• iPhone theme for Sony Ericsson k800 [source - download]
• iPhone theme for Sony Ericsson w900 [source - download]

Related posts:

1. Iphone website templates and iphone theme phone skins: an update
2. iPhone website templates and iphone theme phone skins: July update
3. iPhone website theme done right

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.

RapidWeaver users can grab it here.

Related posts:

1. Iphone website templates and iphone theme phone skins: an update
2. iPhone website templates and iphone theme phone skins: July update
3. Customizing your website for iPhone browsing

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!

Related posts:

1. More Flickr integrating tools for your your website
2. Integrating Flickr pictures on your Wordpress or RapidWeaver site
3. Adding social links on your website: Flickr badge