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.

• Any Map (Our Current location View BlurbBit w/Location)
  The "original" link - unmodified View BlurbBit w/Location
• From the Galley Blog Album (View BlurbBit)
  use Notes (sidemenu) for a blog post summary
  

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 Embedded below post, 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).