How To Setup Mobstac To Optimise WordPress Blog For Mobile Without Plugin


To those who don’t know what mobstac is, mobstac is one of the leading mobile technology company whose aim is to make website accessible and to be optimize for mobile devices, in other words, they help in creating a mobile version of a website using their mobile technology.
mobstac mobile screenshot The mobstac wordpress plugin is one of the top wordpress plugins to help optimize blog for mobile, with a sleek design and some other cool mobile widget, it can also optimize your blog for tablet.
As at the time of writing this post, the mobstac wordpress plugin wasn’t working: when you insert the correct API key in the settings page, it return invalid API key inputed, but if you love to mobstac and will like to use it to optimize your blog for mobile and tablet, then follow the tutorial below to setup mobstac for your WP blog.

    1. Go to Mobstac.com, register an account and create your blog mobile version using their tool at the dashboard. your mobile version of your blog URl will become http://xxxx.mobstac.com where xxxx is the mobstac name of your blog.
    2. Next, we need to create an m.yoursite.com subdomain for the mobstac mobile blog we created: to do this, add a CNAME record with alias m pointing to your mobstac site. If your mobstac site is http://xxxx.mobstac.com, create a CNAME with m as the alias pointing to xxxx.mobstac.com
    3. Then goto your mobstac dashboard, navigate to the domain parking page [click the dashbord tab -> settings -> general] park your newly created m.yoursite.com subdomain.

    Here comes the technical part; redirecting users accessing your blog via mobile to the mobstac mobile version of your blog. follow the instruction carefully so as not to miss it.

    • Insert the below JavaScript snippet right after the <head> tag in header.php
      follow the instruction on the screenshot below to know how to insert the below javascript.
      how to install mobstac javascript redirection code in header.php 

      Below is the mobstac javascript redirection code

      <script type="text/javascript">try { var MSTAC = new Object(); MSTAC.murl = "http://m.yoursite.com"; MSTAC.d = ".yoursite.com";
      MSTAC.isMobile = (function(a){if(/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))return true})(navigator.userAgent||navigator.vendor||window.opera);
      if (window.location.search.search("mstac=0") != -1) { document.cookie = 'mstac_override=1; path=/; domain=' + MSTAC.d + ';'; }
      if ((document.cookie.search("mstac=desktop") != -1) || (document.cookie.search("mstac_override=1") != -1)) {}
      else if (MSTAC.isMobile) { domain = MSTAC.d; mstac_cookie = 'mstac=mobile; path=/; max-age=31536000'; if (domain) { mstac_cookie +='; domain=' + domain; } document.cookie = mstac_cookie; maneref = ''; if (document.referrer) { maneref = '?maneref=' + encodeURIComponent(document.referrer); } window.location = MSTAC.murl + window.location.pathname + maneref; }
      else { var ms = document.createElement('script'); ms.type = 'text/javascript'; ms.src = MSTAC.murl + "/m/fastredirect/";
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ms, s); }} catch(err) {} </script>

      If you don’t want to mess with your wordpress codes, use the post layout plugin to insert the code to the header.

      NOTE Change yoursite.com to your blog URL and also change m.yoursite.com to your mobile blog subdomain you ceated in step 3.

    • Tutorial ended.

    Just hope someone find this tutorial useful.


    About Agbonghama Collins

    Agbonghama Collins is a webdeveloper and an internet geek. I love writing and sharing the little idea & information i know. Hope you enjoyed my Article.

    Follow me on Twitter, add him on Facebook or on Google+

    • http://deluxejournal.com otobong

      Is it free now? And can I show adsense with it?

      • http://wapden.net collizo4sky

        Yes you can display adsense on mobstac by setting it up in mobstac dashboard.

    • http://deluxejournal.com otobong

      Hello, boss, Ive followed your tutorial. Am testing it now

    • http://mobstac.com Lakshmi

      Hi,

      Thanks for writing about MobStac. The API key issue is sorted out now and you can easily use the MobStac WordPress mobile plugin to mobilize your site. Thanks

      • http://wapden.net collizo4sky

        Thanks for the feedback, am going to update the post, but that will be after i confirm it working fine. thanks mobstac.