Monday, December 20, 2010

Enable Blogger Mobile Templates Support for WP7 and Opera Mobile

Blogger recently released a new feature to their Blogger in draft platform that allows the website to automatically detect mobile browsers and render the page using a small-screen friendly template. This fixes a HUGE issue I have been working on for the last few weeks ever since I released the PhraseMeme Scanner application, namely publishing content that will be consumed by both large and small screen devices. Previously I was planning on having two version of the website with one being optimized for mobile and one for desktop, but now I can store all the content on Blogger and use the mobile templates to render for small-screen devices.

The Show mobile template currently works with the default iPhone and Android browsers, but it does not work with the Opera Mobile, Pocket IE, or Windows Phone 7 Internet Explorer browsers. I assume there are other mobile browsers that also don’t work, but there is a simple way to add support for any browser by using JavaScript to redirect users.  Here is the code that I wrote to detect mobile browsers and redirect accordingly:

The templates work by appending a m=1 parameter to the blog URL or (m=0 to force full webpage on mobile devices), so all that the above code has to do is look for that parameter and add it if a mobile device is detected. You can add the above script to your blog using either the blog template or the HTML/Javascript Gadget. Adding it to the blog template will cause it to run before the page is fully loaded, but you should save your current template first to make sure you don’t mess anything up;

I added a feature request for Blogger to support more mobile browsers, but for now the above script should let you start using this amazing feature.


Greg Bray said...

NOTE: I just found out that since the Mobile Templates remove all of the gadgets from your template it will also remove any Google Analytics tracking codes that you have added, so mobile users will not be included in your site analytics. This will be fixed once you can edit the mobile templates, but for now there is no way that I can tell to add the tracking code back in for Mobile viewers.

ValuTrack Barcode Solution said...

Hi Greg,
That's some thing i am looking to do. Can you help me out how can i track Mobile Users and Visited Pages in Google analytic, i have just changed the Website Template and it seems i lost Pretty much traffic from Mobile.

Greg Bray said...

Sorry... not much else I can say. The above worked for me, but it still has a lot of issues. The blogger mobile templates still need some work I think.

Post a Comment

Blog.TheG2.Net - Your guide to life in the Internet age.