Creating a flickr map photo album for your blog

al.james This tutorial will show you how to import your flickr images into mapsack to create your own photo map! You can then display this map in you own website, such as your blog!

To get started you will need to be a mapsack member, if you are not you can goto the site and select sign up from the top-right corner of the screen. Enter a few details and you are away!

Next you need to import your flickr images. We have created a tool to make this really easy! Select ‘import my flickr images’ from the page footer. This takes you to the following screen:

p1.jpg

Simply enter your flickr username and hit ‘display photos’. Next, a list of your most flickr photos will be displayed. If you have many photos, there will be several pages.

p2.jpg

Now we can begin to add them to the map! First, select one or more photos from your list by clicking on them. Note that the photos you select appear under the map and that you can remove them from there by clicking on them. When you select photos, boxes appear so that you can enter a title, description and tags for the post. I am uploading photos of my holiday in California, so I will make sure that I tag all the photos with ‘california’. This will make it easier to find just these photos later on. Next, you have to click on the map to select where the photos should go. You can zoom in and scroll the map by dragging to find the exact location. Once you have seen the location, simply click on the map to place the marker for this posting and hit the ‘add item’ button.

p3.jpg

That’s all there is to it! You can now repeat the process to upload all the photos you wish.

Then you can go and look at your photos on the map in the explore view. Go back to the homepage and select the city or area where you added your photos. You should be able to see your photos on the map (you may have to search for the tags you used).

p4.jpg

If you want to take this map photo album and put it in your own webpage, read on! I will be using a blogger blog, but any blogging tool that allows you to edit html will do!

Firstly, click the ‘add mapsack to your site’ link at the bottom of the page.

This presents a tool with a few options for changing the size and content of the map. I am using a small map and just want to display my California trip photos. Therefore I will select ‘just my photos’ and put the tag ‘california’ in the tag box. Next click the ‘generate code’ button to give you the html code that we will put in the blog page.

p5.jpg

The process of adding html code to your blog or other webpage will vary depending on which platform you use. In blogger the process is as follows. When editing a post I can select ‘edit html’ to set the source code of the post. Simply copy and paste the code you were given on the mapsack site into the blog post, write some text to go with it and click ‘publish post’.

p6.jpg

That’s it! You should now have a fully interactive map you’re your flickr photos inside your webpage! If you have any problems, or want to suggest a way this could be improved, please go to our forums.

p7.jpg