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.
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.
- 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.
- 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
- 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.
Below is the mobstac javascript redirection code
[javascript]<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>[/javascript]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.