Sep 7, 2012

How to make your blog Mobile friendly with Mobstac - Complete with social sharing and advertising

Website and blog owners who do not have a mobile compatible version of their pages loose out on traffic and user interest everyday.

As more and more people depend on their mobile devices, there is need to serve them a Compressed version of your page.
It is possible to view the PC versions of a webpage on a Mobile phone browser but the large 1028 X 800 resolution of the page creates long horizontal and vertical scroll bars, making mobile browsing difficult.
m.Ngbuzzblog.com on Mobstac theme
Mobstac On M.NgbuzzBlog.com


Blogger, Wordpress, Simple machines Forum and lots of other content management systems support Mobile versions by default. They already have default WAP2.0 versions of their themes (which is usually ugly and does not allow for much customization.

In this post i'll try to clearly describe how i created a more beautiful and customizable Mobile Version of NgbuzzBlog.com (http://m.ngbuzzblog.com)
The steps listed here specifically talks about Blogspot but applies to wordpress, SMF and other CMS users.

The Mobstac Mobile template Redirection service boast of best industry standards (HTML5) and is FREE, but certain services are limited to premium members only for $5 per month (which is totally worth it) - i hope with support from google, premium services will be free too.

How to Create and Customize Your Mobile theme Using Mobstac

  1.   Visit http://mobstac.com/ and Enter your website URL in the Field provided and Preview
                     Mobile Mobstac site preview
    A Mobile compatible version of your site will be generated.Click Continue to proceed and fill out the short registration form.
  2. Copy the Code generated and paste at the <Head> section of your Page template:
    Log in to Blogger dashboard >> Backup your blogger template >> Template Edit HTML and use CTRL+F to find <head>
    Under the <head> tag, Paste the Mobstac Code generated and save changes.
    This will detect and redirect mobile browsers to the correct theme. 
  3.  To test if you've got the installation working Properly visit these two URLs:
    New URL: Yoursite.mobstac.com
    Old URL:   Yoursite.blogspot.com   (NOTE: Both should redirect to the new Mobstac URL
    If you still see the Old Blogger Mobile template after Mobstac installation, Read this Post on how to make your URL redirect to Mobstac Mobile correctly
Now your site has a beautiful Mobile version - You can make the following customizations in the Mobstac dashboard:
  • Creating custom CNAME DNS records to shorten long URL (m.ngbuzzblog.com) 
  • Adding Facebook Comment box
  • Mobstac Design Tab: Change Theme colors, And Add Navigation Menu
  • Mobstac Feeds Tab: Paste Blog Feed URL for mobstac to crawl content from
  • Mobstac Advertising tab: Enter Google Adsense Publisher ID ONLY for mobstac to show your Google Ads Below or above Page, Also enter custom html/js scripts(e.g facebook/ twitter page Buttons)
  • Mobstac Sections tab: Add a List of Drop Down Categories to your menu bar
More on Mobstac coming soon.. Comments? Questions?

No comments:

Post a Comment