Want to see BlurbBits in action? Visit our Sailing Blog or more examples.

2009-02-05

New Dynamic GeoBlog Functionality


Update: The dynamic functionality is highly configurable for other options that allow javascript. Positions can be extracted from text and geo microformats. We easily configured it to provide maps for our Cruising Blogs Search.

We've been playing around with some new dynamic GeoBlog functionality to help further improve your blogs performance and flexibility.

BlurbBit links to dynamic popups

Now we can convert a BlurbBit link into a dynamic in blog popup. We search your blog page for BlurbBit links and dynamically change them into a popup version of the BlurbBit that opens on the same page.
This gives you the benefits of viewing BlurbBit maps, photos, and extracted data directly in your blog and it further increases performance because the BlurbBit is only loaded when the user clicks the link. Now you can easily add multiple maps/albums to help detail your blog (check out our Snaps360 photo blog for examples of how we show the map of our photos location). You can even add content to the sidebar without slowing down your page load (read gadget overload).

The same rules still apply.. the first BlurbBit will define the post's location. You can use either of the link publishing options, however make sure you don't use the (+Graphic) version before the first photo in the blog post. Don't worry we'll also add the (if it's missing) to help highlight it, you can even add them to the SideBar (check out our examples).

Expandable Post Summaries

Blogger has supported expandable post summaries for a while now. There are a couple of issues that prevented us from using them
  • It only hides the rest of the post.
    The page still loads any photos, slideshows, and BlurbBits even though the user can't see them (using display:none). Try adding a "broken" BlurbBit (make it point to a non existing album..) you'll still see the time out after 30 seconds, hmm.. not faster!!
  • You'll get "Read more.." even if there isn't any more!!
    The "Read More" link always appears and if you don't use the <span class="fullpost"></span> within the post, you don't really get more when you click it. Since we publish our blogs via plain text email (where html formatting is impossible) this made it unusable with our blogs.
Since we were doing all this other stuff, we figured we could clean up expandable posts as well. If we find a fullpost (with display:none) we remove it (from the DOM) so the slower portions won't delay the page loading and we clean up the Read more links if there really isn't any more to read.

We also search the fullpost text for BlurbBits and add a popup map of the location to the summary page so you can see "where's that?" without requiring the full BlurbBit. This allows readers to preview the summary text and location map prior to clicking on the Read More link. We suggest you put slower loading content within the fullpost span so it will appear only on the Full page (after the reader is focused onto the page).

Check out our Sailing Blog for an example .. Not only do you get a faster loading, easier to navigate title page (and search/archive pages), it also helps you (as the blog designer) figure out exactly what content people are reading (see below). If you have your comment block set to , your readers will have a place to add comments immediately. You can even set up reactions to appear only on the post page.

Go to Dynamic GeoBlogs to add the Gadget which automatically supports both. You must follow the expandable post summaries instructions to enable expandable posts.

It's Unobtrusive

We use unobtrusive javascript to accomplish the above fuctionality. We quickly parse the document and modify the links into a custom designed popup. If javascript is disabled the links will remain a standard link, AND the standard links will appear in the feed (where javascript isn't available). You can also add a note to the Read More link so people will realize they are on their own if it is disabled!!

If you are manually adding BlurbBit links make sure you add class="blurbbit bblink" into your link so we can find what we are looking for without having to search EVERY link on the page, and don't forget the width and height parameters!!

What did they really read?

If you use Google Analytics you know that it can help track which pages people visit on your site/blog. One of the problems with blogs is the title page content continually changes. If people JUST read your main page you'll never really know exactly what they were reading. By adding the Summary posts and Read More links you'll get a much better content overview breakdown. We've highlighted the title page below..


No Read More Links



Different Blog with Read More Links

Benefits
  • + all the benefits of the base GeoBlogs
    Automatic Mapping of remotely published posts
    GeoBlog summary maps
  • Unobtrusive - easy to add gadget
  • Increased performance
    Faster blog load times
    Option to add any slow loading data onto the fullpost only
  • Add additional content to keep readers on your site
    Links to remote pages make content harder to navigate/find
    add photos, videos, extracted maps etc
  • Easier to browse/search/filter multiple posts
    Post summary vs Full post
  • Improved traceability
  • Increased flexibility for both blog writers and their readers
  • Better fallback for non-javascript environments
    RSS feeds and Mobile platforms
Go to Dynamic GeoBlogs to try it.. you can always remove the gadget.

No GeoBlogs Found

We've added a couple of configuration options .

After adding the Dynamic GeoBlogs find the gadget in the side bar and edit the HTML.

You can add default content (ie. if javascript is disabled) to the GeoBlogs on this Page space by adding a content or a correctly sized image into the geomap div:

<div id="geomap" style="width:220px;height:200px;background-gt; Add your content here</div>.

By default, this content will be replaced with a geoblog map even if no geoblogs are found. You can keep the content during empty geoblogs by defining it within a div of class "gbsempty"..
<div class="gbsempty"><img src="http://.../svbillabong-blogspot-routemap-sm.jpg"/></div>.

You can see this on our first blog post (we didn't add a location). We use a BlurbBit Screenshot of our route, it meets Google's attribution guidelines for sharing their map screenshots.

Advanced Configuration

The dynamic options are configured via this portion: blurbBits({oid:"geomap",..,pw:500,ph:300});
  • To disable GeoBlog summary maps: change geomap above to nomap, or remove the geomap div.
  • To disable BlurbBit link expansion add noexp:"noexp" to the options ie. blurbBits({oid:"geomap",..,pw:500,ph:300,noexp:"noexp"});
  • To disable search for maps add nomaps:"nomaps" to the options ie. blurbBits({oid:"geomap",..,pw:500,ph:300,nomaps:"nomaps"});
Testing Performance

This stopwatch utility is a good way to check/monitor load performance. Note: It does not take into account images that are loaded after initial page load (by slideshows/gadgets etc). Now that we are back in the states this doesn't seem to be an issue, but they dramatically effect page interaction on the slow connections we find while cruising (imagine sucking cottage cheese through a coffee stirrer .. a bad visual but you get the idea). On Firefox you'll see the images continually load, with Internet Explorer they leave you in the dark about what's happening (as usual).

Also make sure you follow the disable caching hints to see how first time users will view your site and/or content loaded for the first time (your content will almost always be in your cache because you built the pages).

2009-02-04

Example Sites, Blogs, and Photos


We've searched the web for data and examples of other lat/long geo-tagged sites. We wanted to show that nothing special is needed in order to map sites or photos.. in fact all of these sites had no idea we were even doing it (ie. it's not that hard). If you want to see how we use BlurbBits, check out our sites (the menu at the top of this page). If you would like your Blog or Photos removed from our examples please contact us.

The easiest way to get started is by adding the Dynamic GeoBlogs to your Blogger blog and then add the lat/lng text in the correct format to each post you want mapped. Remember it's easy to do it one by one but harder to go back and do them all!! We've also noticed that some Bloggers don't take advantage of Mail-To-Blogger posting option (see MoBlogging), 95% of our blogs were emailed from sea. Some of the posts are just simple status updates: with a location (and map), a quick blurb, and a small photo that helps describe our trip (see our Red Sea Blog Album or recent wanderings in the sidebar). All are easily extracted from our blogs with a defined category.

You can also map your Free Picasa Web Albums, and use Picasa to edit your photos while you are disconnected from the internet (see Remote Editing). We support other online photo options (including Flickr) and extract data from various sources (blogger, most georss/rss feeds, google spreadsheet, winlink). The interactive map views also includes Wikipedia and Panoramio photos, available under the Map Type/Options Pulldown menu.

Zac Sunderland

This was the first blog we started tracking during our development.. we've been tracking Zac since July 2008. You can follow Zacs trip through a Trip BlurbBit or through an Interactive Tracking map.

Update July 3rd: Zac is almost done with only 700 nM to go (after completing over 24,000 nM) that's more than 27,500 miles to you landlubbers!! All at a little over 5 mph. The best way to Track his trip is though the slightly custom TrackZac interactive map (it adds a days at sea and to go counter which is off by 500nM). I really wish I could get them to add the dynamic geoblog maps like on our Sailing blog. It's really helpful to see where we were in a certain year, month, or by label (ie. Indian Ocean). Add the automatic popup maps within the post help the reader answer "where is that?".

Roz Savage

Roz is rowing across the Pacific (after already crossing the Atlantic). She just started blogging on Blogspot (since Hawaii) but she does all the right stuff to make our geoblogs and post location extraction work.

Examples: The Trip Tracking BlurbBit or through an Interactive Tracking map. The Where's Roz (full) and Where's Roz (sidebar), isn't that exciting (because she's in the middle of no where) but it can easily be installed on a blog and it points to her latest post at the bottom (open the link in a new window and click i for details). I could do one like I'm Tracking Zac but I'll wait until someone asks for it.

Update 8/27: Roz is still struggling, now header for Tuvalu. I pull the location information directly from the Blog text so it is subject to Human error (or syntax changes). The last couple of posts had syntax issues that prevent correct extraction), I could fix the data externally but I can't update Roz's blog.

Update 8/01: You can see her latest struggles to cross the equator here (map of last 20 posts). She is torn between two Route Options, Tuvalu to the South or Kiribati to the north (the final leg will start next year from her destination). Up to now she has been rowing with the NE tradewinds mostly behind her , as she heads into the South Pacific the winds will turn East and then the SE tradewinds will fill in and move towards her bow pushing her off course instead of helping (Winds are shown as yellow lines on the map). One of our toughest sailing legs was the 1800 nM from Majuro to Fiji along a similar route.. We have a six foot keel and will keep moving when one of us sleeps (Roz doesn't).

Cruising World- Alvah Simon's Blogs

View a BlurbBit Summary Map or interactive Blog Map.

The flexibility of BlurbBits and our interactive BlurbsViewr maps allows us to map existing pages without changing anything on the original site. It's also a great way to tie together multiple sites (and data) if you decide to add a new blog to your site (and why wouldn't you?).

Virgin Global Row

Here's one for ya.. This guy is trying to row around Antarctica and I thought sailing was hard (at least we get to lay there AND move forward).

BlurbBit Blog Map or an Interactve Blog map. (extracted from GeoRSS).

17 days with ONLY 305 miles covered (18,000 nM is the predicted distance and it is expected to take 18-22 months). This will be one to follow.

Google just announced it yesterday (The rowboat and the cloud) and you can follow it on Google Earth.

You can also get the latest position and blog link through a Where? BlurbBit. You can install it on your own blog/website (click i for Info). Add &mi=in to initialize with the in View. You can also view a Blog Album and see the photos, location map and summary of the blog (some photos appear empty ??).

Sandpiper38

Sandpiper uses a modified version of Lat/Lng text so the map will be automatically updated when they add new posts ( View BlurbBit). Sandpiper uses the same technique we use on our blogs.. both quick status updates and full blog posts are combined in the same blog.

BlurbBit Blog Map or the Interactive Blog map

We did find some incorrectly defined lat/lngs that we've manually adjusted, hey when you can't check them how do you know!!

Sailing with Matsu

Matsu uses a Lat/Lng string to define their post location so the map will be automatically updated when they add new posts ( View BlurbBit).

BlurbBit Blog Map or the Interactive Blog map

They also use Picasa albums. Adding a location to each album would allow them to include the albums on their map, along with their blogs.

Yacht Doris

BlurbBit Blog/Albums Map or the Interactive Blog/Albums map including travel track.

Simon investigated sailing as a interest in 2007, bought a new boat in Feb 08 and took off in the Fall .. and sailed Single handed across the Atlantic. wow..

Simon already has a map on his blog but it doesn't change as you navigate the pages so we pay a performance penalty with no gain (a link would be better, BlurbBits dynamic geoblogs would be the best). He also uses Picasa albums to add photos to each post, sometimes the slide shows plays automatically and slows down the blog. We would recommend he changes his Lat/Lng format slightly (move N and W to the end of each section) so we can automatically map the posts. If he adds the location to the picasa albums we can automatically map those and I would switch the slideshows to BlurbBits and/or more them to the read more section with the new Dynamic GeoBlog functionality.

Ohana Kai

BlurbBit Blog Map or the Interactive Blog map

They actually have three sites including two blogs.. the two blogs are combined above. They only seem to use the blog to track their adventures while at sea (like we did originally) but their latest post shows where they finished their Atlantic Crossing. We've found it much easier to match our Picasa and Flickr photos to our blog content and have started to add more photos to our blog since using BlurbBits. A picture is worth a thousand words but sometimes it helps to have some blog text to back up the photos (like our snaps360 blog).

Dick and Libby Tarwathie

Dick and Libby use the same lat/lng format (for recent posts).. so we can automatically update the map based on their latest blog posts.

BlurbBit Blog/Album Map or the Interactive Blog/Album map

More BlurbBits: Recent Blog Posts, Picasa Albums (mapped)
A Picasa Album (from a mapped Picasa Web album)
Winlink Latest Position last 15 reports

We've been working with Dick on some timeout issues that sometimes occur (with slow connections and larger pages?). I would suggest using the new Dynamic geoblog features to highlight the locations since it requires much less bandwidth and no dependence on external feeds (like photos or tracking maps). I would also recommend adding BlurbBits as links (to get dynamic popups) and/or adding them to the fullpost section along with standard Picasa album links for those readers who want to go straight to the Larger size photos (and have a great internet connection). It's a great way to keep the performance optimized and provide in blog maps and photos.

Sunshine

Geotagged photos with optional track overview and last location.
Geotagged albums Click Open link to view photos in album.

Interactive maps
  • Blogs/Albums and Track
    The blogs have D M S so the positions might be slightly off..
  • Geotagged Photos and Track
    Most people don't take the time to geotag each photo (we do), but the resulting map is a good tracking method. The geotag becomes part of the file and can be re-used in all programs that read the data.
We would move the slideshow to a post and add a link (or even a popup BlurbBit). Wanna talk about small world.. I was checking out their Blog (testing this) and saw my buddies boat (it's the nice Tri), who just stopped by while driving it cross country!!

SV Rachel

BlurbBit Blog Map or the Interactive Blog map

In order to map their blog locations they just need to adjust the location of the N and W to conform to our format (DD MM.MMM [N|S] DDD MM.MMM [E|W]) hey we have to choose one. Even using this syntax we've found positions that don't map correctly in other blogs (extra characters, no spaces, multiple W etc). It may be easier to use the llz=dd.ddd,dd.ddd,zoom format.

They could also add our winlink blurbbit to the sidebar.

Winlink BlurbBit latest and recent positions

SV Mary Elizabeth

Picasa Photos albums with optional route summary.

BlurbBit Album Map or the Interactive Album map with route and additional track points.

Some suggestions.. I would remove the photos, the map and the slideshow from the sidebar, and move them to posts (with links) or popup BlurbBits. See gadget overload for more details/reasons. When testing performance make sure you clear your browsers cache before reloading (see Dynamic GeoBlogs), this will reload photos in your cache and give you a true sense of the loading speed people will experience the first time they visit (or see new data).

SoggyPaws


BlurbBit Blog/Albums Map or the Interactive Blog/Albums map

Soggy Paws maintains a couple of custom BlogSpot template blogs. The position format must be changed slightly (change - to space) to make the above maps automatic.

Wordpress

Wordpress doesn't allow javascript or iframes within WordPress but you can still map blogs if you put the correct lat/lng format.

Last Location or the BlurbBit Blog Map or the Interactive Blog map.

Wordpress does not support dynamic configurable feed lengths, so you'll only get the number of posts set by the user.

Mapped Picasa Albums
..

Picasa allows you to map your photo albums, it's a good way to let people know where the photos were taken (without having to do them all). We like to geotagged all our albums and photos so they appear on maps no matter how we filter them.

Click the BlurbBit link below to get our Albums. Clicking on the Geo-Photos button (top left) will show the album locations. The selected albums location can be seen via the Location Map button (side menu). The album summary is available via Notes and the photos IN the album can be seen via the open link button. Since we load the content from Picasa, any changes and updates automatically appear in the Widget, it's the best way to add all you albums to the side bar.

SailBillabong (ie. Us) BlurbBit Picasa Albums or the Interactive Picasa Albums map with travel track enabled.

Each album (Red Sea Album w/Location) can also be added to a blog entry AND photos can be filtered by tags to match content or highlight your favorites. Tag a new favorite and it will automatically appear in your BlurbBit (and your Blog). Check out Using Online Photos for all of the available options including Flickr. Visit our Sailing Blog to see how we use BlurbBits for our Flickr Photos, or our Photo Blog to see how we add maps to highlight our standard photos. You can also generate a Blog Album which summarizes your blog photos and locations (click Note to read a Blog Summary).

Here's a collection of some albums we've found.

juliemays BlurbBit Picasa Albums or the Interactive Picasa Albums map.

cruzingmurphs BlurbBit Picasa Albums or the Interactive Picasa Albums map.

jaramanpotter BlurbBit Picasa Albums or the Interactive Picasa Albums map.

svenvy BlurbBit Picasa Albums or the Interactive Picasa Albums map.

svtaipan BlurbBit Picasa Albums or the Interactive Picasa Albums map

Ascension BlurbBit Picasa Albums or the Interactive Picasa Albums map.

svtweed geotagged photos of Andaman Ilands. BlurbBit Picasa Photos or the Interactive Picasa Photos map.

svsilverfin BlurbBit Picasa Albums or the Interactive Picasa Albums map.

svcrystalblues BlurbBit Picasa Albums or the Interactive Picasa Albums map.

kestertonm BlurbBit Picasa Albums or the Interactive Picasa Albums map.

largostar BlurbBit Picasa Album Map or the Interactive Picasa Albums map.

travellerkelly BlurbBit Picasa Album Map or the Interactive Picasa Albums map.

Martin.Schaerer BlurbBit Picasa Album Map or the Interactive Picasa Albums map.

chmonkey BlurbBit Picasa Album Map or the Interactive Picasa Albums map.

nancymeridian BlurbBit Picasa Album Map or the Interactive Picasa Albums map.

hsalvenmoser BlurbBit Picasa Album Map or the Interactive Picasa Albums map.

dylangv BlurbBit Picasa Album Map or the Interactive Picasa Albums map.

scrivin BlurbBit Picasa Album Map or the Interactive Picasa Albums map.

mhbscv BlurbBit Picasa Album Map or the Interactive Picasa Albums map.

johng100 BlurbBit Picasa Album Map or the Interactive Picasa Albums map.

Balvenie Picasa:BlurbBit Picasa Albums or the Interactive Picasa Albums map.
Balvenie Blogs: BlurbBit Blog Map or the Interactive Blog map.

2009-02-03

Setup Help

Update:  A New Blog should NOT be difficult to setup (for modern templates, screen sizes). We have been investigating Posterous and have created a community blog and a technology blog. Posterous is an dead-simple email based service that also allows auto posting to facebook, twitter and other services.. a key part to any successful blog.

Please Contact Us for the latest setup options and service, including social media and community integration.

We can help

For a $50 fee (via paypal.. fully refundable) you get..

Your own blog (if you don't already have one) with..

Custom Blog template
  • Automatic GeoBlogs Map and expandable posts
  • Custom Two sidebar layout
    Optimized for both small (1024x768) & large (1680x1050) displays.
    Most current templates are designed ONLY for small displays and leave too much blank space. With our template, the outer sidebar should be considered a "bonus", but is available for both display sizes (smaller requires scroll).
  • Subscribe To Links, Blog Archive, Labels and Latest Updates links
  • Menu bar with Default About Us and Our Link Pages
    See Post Pages for Blogger instructions
  • Comments and Reactions setup on Full Post view
Additional Features
  • Configure default post template (for expandable post text and lat/lng formatting)
  • Setup/test Mobile Blogging option (Blog Send)
  • Optimize Comments (turn on comment moderation and Registered users)
If you want to try before you buy, contact us and we'll give you an email link to our sample blog (which is also an example of what you'll get).

Additional Options

We can also discuss custom options including combining your new blog with existing sites, custom maps and analytics, adsense or feedburner setup however it will be on a case by case quoted basis.

We can also map existing trip summary data (winlink, pangolin etc) or by a date, location basis, or add custom backgrounds and photos. We can even map existing GPS or chart data.

What we can't do..

If you look at this site (and our others at the top of this page) you'll realize we spend too much time helping others (at no charge). We cannot be a consulting service for Blogger questions/issues when there is plenty of help available online.

Whatever you read, blogging is not a get rich quick scheme, nor do we treat it that way. We offer our help and support freely, not as a money making venture. The sites above represent literally thousands of hours of our efforts, and to date we have made less than $500. This doesn't even cover our web hosting services, We hope you understand!!

If you do feel like contributing, please visit our travel store for some options.

Contact us for more details.

We are also available for consulting on various aspects of the cruising lifestyle. Getting yourself ready, boat/equipment preparation, route planning etc. We also have lot's of free tips at creative-cruising.com.

2009-02-01

Blogger Blog Basics

People transitioning from a website (or group email list) have asked.. What's a Blog? I know it seems crazy but yes some people are still wondering.

A blog is a collection of written text (called posts in Blogger) displayed in reverse-chronological order. When someone visits your Blog site they'll see the most recent entries on the main page but can also search through your archives. Take Blogger's Tour to get the full scoop or view their features list (remember it's all free).

How does it compare to a email?

What does your inbox look like? Full right.. The best thing about Blogger is you can email your Blog content and it will automatically post it and archive it for you. No more searching through email folders or trying to resend old emails to new friends you've just met or old friends who lost your latest update. With a blog they get the collection of your stories, highlights and BlurbBit maps all in one place.

Check our Sailing Blog.. 95% of those posts were made using only email!! If you're worried no one will read your blog, readers can subscribe to your blog via email and it will get sent automatically every time you add new content. You can handle your existing group email list and automatically email them (they'll never even know you're a blogger). Just think of it as a graphical email archiving system, with maps, photos, comments and feedback.

How does it compare to a WebSite?

One of the first things you'll notice is how easy it is to format. Just type and go.. all of the page navigation, searching, archiving and Web feeds are taken care of for you. You can also add tags to allow readers to filter posts based of location, your favorites or anything else you can think of and you can receive comments and reactions based on your content. With Blogger layout, javascript support, and the thousands of gadgets that are available, you can do almost anything you can think of. Look at BlurbBits, we enable you to map your blogs with dynamic popup maps AND interactive blog navigation maps all from a simple email.

A Blog Post

Each post has the main post content, and allows optional labels and Date/Time, but one of the most common transition complaints is there is that there is no central navigation structure like on a typical website. If enabled, each post is created as a post page. Once published this page URL does not change so you can easily link to it to create a menu bar like on the top of this page. We usually create a post for our main pages (like about us, contact us, our favorites, trip summary etc) and set the post date to an older date. We can then add a link to those to the sidebar (or menubar if you have one). The sidebar and title setup surrounding the post text remains the same for each blog post page.

Remember users can search by label, date (via the archives), post text, and view the latest updates (optional), so there are plenty of ways to navigate your blog. With our free interactive maps you can even navigate your posts on an interactive map. Check out our Blog. Click on a label to see all the blogs from a location, check out our latest updates to see what we've been changing/adding or search the blog archive. You can even search for text in the upper left hand corner (try billabong if your stuck). Use the interactive map links (under the title) to check out mapped versions (automatic if you add a location to each post). The All Sites interactive map combines our existing website with our latest blog posts automatically, so readers can navigate both sites seamlessly from a single map (blogs, journals, photo albums, videos etc).

Expandable

Imagine 1000's of people trying to help make your website better by adding new functionality, that's what happens with a flexible environment like Blogger. With feeds you can add your Blog content to existing websites and social networks.. automatically. You can focus on your content.. not your formatting.

If you know about our creative-cruising.com site or have met us in person, you know that we spend a lot of time researching and testing ideas/solutions before we recommend them to others. We've been blogging since June 05 and have developed free utilities and a process that make sharing your adventures and mapping your blogs easy. Check our Blogs on the top of this page.. it would be impossible to maintain them all as individual websites instead of blogs.

Getting Started

Sign up for your free Blogger Blog and add the Dynamic GeoBlog Gadget via the link above. You'll also need to setup email and other options to get the full functionality.

If you need help setting up the basic blog please contact us and we can set it all up for you (for a nominal fee).