Wednesday, January 25, 2012

How to make a Pop-Up to direct user to iTunes Store

Ever visit a website and you get a pop-up windows saying "There is an app for this, would you like to see?",  (check this out) and wonder "Why can't I do that for my website"?  Well, you can. 

This work for only iOS devices, but the code can be modified to accept Android or Windows users.  I do not have them linking because I do not have any apps in those market.

In blogspot (or any website), navigate to Design > Edit HTML.  Right below the insert the following code.

<script src='http://brzenski.hostei.com/JavaScript/MathClassRedirectShort.js' type='text/javascript'/>


Basically I am saying "Run this script" called MathClassRedirectShort.js.  Here is what the javascript says:
 
function detectMobileOS() {
 if (document.cookie.indexOf("MobileOS_redirect=false") < 0) {
  if (!navigator.userAgent.match(/Opera/i) && 
                       !navigator.userAgent.match(/Dolphin/i)) {
   if ((navigator.userAgent.match(/iPhone/i)) || 
                                   (navigator.userAgent.match(/iPod/i))) {
    setMobileOSCookies();
    if (confirm("This website has an app for iPhone and iPod Touch! 
                      Click OK to view Math Class on the Appstore."))
     window.location = "http://itunes.apple.com/us/app/math-class/id463190562";
   } else if(navigator.userAgent.match(/iPad/i)) {
    setMobileOSCookies();
    if (confirm("This website has an app for the iPad! 
        Click OK to view Math Class on the Appstore."))
     window.location = "http://itunes.apple.com/us/app/math-class/id463190562";
   } 
  }
 }
}

function setMobileOSCookies() {
 var date = new Date();
 var days = 90;
 date.setTime(date.getTime()+(days*24*60*60*1000));
 var expires = "; expires="+ date.toGMTString();
 document.cookie = "MobileOS_redirect=false" + expires; 
}

detectMobileOS();

You host this wherever you want (sites works good).  At the top is the function, we exclude Opera and Dolphin, and then use the IF statements to look for what device you have.  If you have an iphone, display "THIS", set the cookie, and return.

At the bottom is the cookie function, that makes a cookie for 90 days, regardless of what happens (I hope!).

You can add more else if () functions to look for "android", "window", or whatever other browsers/devices are.  I could not find out how to do this to save my life, then I found a bunch of obscure examples at once, so here I am posting it hopefully for others to find.



No comments:

Post a Comment

FIND ME ON
Twitter | YouTube | AppStore | Etsy | Zazzle