AddtoHome Code and Wordpress with iOS8 No Longer Works! Help Pls WordPress
- REFUNDED
OK....have a tricky situation for you guys. On EACH post of my WP website I am using a custom AddToHomescreen ("ATH") icon and page title.
(I will tell you that the best way to help me solve this problem is by someone that has a device with iOS7 installed, and a separate device with iOS8. I am using an iPhone 5S and iPhone 6+. I realize this may limit my replies, and it's not totally necessary...just may help to see the differences in what is happening.) Please test these links on mobile device to see my problem - you will not see issue on desktop.
I am using the JavaScript widget from Matteo Spinelli at http://cubiq.org - the AddtoHomescreen V3 code (NOT the WP Plugin, because I am using the actual code on each post of my site, not one icon sitewide)....I have my own reason for doing this, and I am not/cannot willing to change.
The ATH icon is no longer working with V3 and Wordpress. Instead of showing the custom instructed icon it's using the default web clip screenshot, and instead of using the given page title, it's using the page url.
Please note that I have successfully been running and using V2 of this code on iOS7 for several months and it has been working great, as evidenced on several posts of my site, including here:
http://undercoverdiner.net/diner/oi1005/
http://undercoverdiner.net/diner/oi1022/
http://undercoverdiner.net/diner/oi1001/
(You will need to test on mobile device - test on iOS7 and 8 to see diff)
You will see the code for the ATH portion of this post at this pastebin, this is Version 2: http://pastebin.com/Z2BmDWzm
Version 3 of this code, mimics the ATH behavior on Android devices as well, which V2 did not - which was my main reasoning behind upgrading to V3, along with the hope that it would fix the issue of working on iOS8/Wordpress. However, after installing V3 I seemed to only have more problems.
It now works FINE OUTSIDE of Wordpress, but does not work within Wordpress on an iPhone 6+ or iPad Air 2. (I'm not sure about other devices as I don't have anymore.)
So, I set up V3 and tested it OUTSIDE of a WP environment and IT WORKS exactly like it should! Even on an iPhone 6+ and iPad Air 2 running iOS8!! (I am telling you this because the problem comes in when I switch to WP and try to use these devices.)
Take a look here: http://undercoverdiner.net/test4.html
(You will need to test on mobile device)
Here is the pastebin: http://pastebin.com/BLC4jUjS
So....Here's where I need you...the new version of this code is not working within Wordpress as you have seen above with iOS8, at least on an iPhone 6+ or bigger.
- And it is not working with Wordpress on Android devices (as it should be) ...
I realize I have given a lot of info to consume, but I hope I have given enough examples to show the differences both in and out of Wordpress.
I am confident that the problem has to be within the Javascript of the code. I have tried so many different image sizes to see if that was the problem, and to throw a big monkey wrench into this thing, if you go to "add bookmark" with the link below, using the NEW script...the icon works/shows, BUT the ATH does not! Ha! Go figure....
NEW V3 CODE IN WORDPRESS: http://undercoverdiner.net/diner/ath1/
(icon works right if you "add bookmark" but NOT if you "add to homescreen"....?????)
Here is the github link to the code: https://github.com/cubiq/add-to-homescreen
If anybody can figure it out, I'll be indebted forever....thank you and good luck.
- Ellie
Answers (3)
webGP answers:
Hello!
I'm not sure that I understood your problem correctly , but if the problem affects only the title and picture (icon), it's probably due to an incorrect code embed. ATH uses meta tags and link tags. This tags have to be used in head section. In your wordpress example these tags are embeds in div within page, but not in head section. If you move this part of code to head section it should works.
Bests
webGP
ellie123 comments:
All of the code is already in the head of the post....except the "on demand" part which operates as expected.
The problem is not where the code is, as I said....its in the head of the post (via a plugin I enclose it between [raw]<head>ALL CODE GOES HERE</head>[/raw])
As I said the version 2 code has been working fine ....
ellie123 comments:
Again, the code works correctly OUTSIDE of Wordpress.....its only once NEW CODE used in Wordpress AND with ios8 that the problem is occurring.
The old code, which is very similar, works fine on ios7...so I know the placement is correct. I have used it this way for months and months. The change is with ios8 and Wordpress.
John Cotton answers:
You are outputting the meta info in the middle of the page, you need to do it in the head tag (probably use wp_head, but there are other ways too).
John Cotton comments:
From the look of your code, you could keep this part
<a onclick="addToHome.show(true); return false" href="#"><img alt="" src="http://undercoverdiner.net/media/appleaddtohome2.jpg" /></a>
where it is.
You just need to move the meta/icon/script elements to the html head. Almost certainly you'd do that with with the [[LINK href="http://codex.wordpress.org/Plugin_API/Action_Reference/wp_head"]]wp_head hook[[/LINK]].
ellie123 comments:
All of the code is already in the head of the post....except the "on demand" part which operates as expected.
The problem is not where the code is, as I said....its in the head of the post (via a plugin I enclose it between [raw]<head>ALL CODE GOES HERE</head>[/raw])
As I said the version 2 code has been working fine ....
ellie123 comments:
The full code is on each post, with custom icon images and page titles. I am assuming the JavaScript code needs to be changed in order to work with Wordpress and ios8.
Have you checked the pastebins?
What I need is for someone to install the script and then try to replicate what I am trying to do on their Wordpress site. This would be the easiest way for somebody to understand what is happening.
Or I could supply access to my site a select few respondents, however, I don't want to give out this info unless someone really understands my issue.
(Like, of course I had it in the head section if it's been working all this time....ya know?)
I appreciate your reply...hope you can help
John Cotton comments:
<blockquote>The problem is not where the code is, as I said....its in the head of the post (via a plugin I enclose it between [raw]<head>ALL CODE GOES HERE</head>[/raw])</blockquote>
You need to look at your HTML....you've got a head block within the body block which is not allowed.
Your invalid HTML is probably causing the js plugin to fail.
ellie123 comments:
Have you tested the version 2 code pages on a device? If so, you will see that the code is running fine - the ONLY problem is when I try to view the same page on an iPhone 6+ running iOS* as opposed to an iPhone 5S running iOS7.
That tells me that this code is fine....can you confirm? Maybe if we take this step by step....
http://undercoverdiner.net/diner/oi1005/
http://undercoverdiner.net/diner/oi1022/
http://undercoverdiner.net/diner/oi1001/
ellie123 comments:
The following code is from a WP Post and WORKS PERFECT on an iOS7 device...however, this is V2 of the code. I have been using it this way for months and months and everything has been working perfect. The only "plugin" that I am using is the [raw] plugin that lets me put the <head> code in.
You can see a working version of this page by pulling this up on your mobile device:
<a href="http://undercoverdiner.net/diner/oi1005/">CLICK HERE TO SEE PAGE</a>
If you pull the same page up on an iOS8 device you will see the behavior is correct but the ATH icon is not, thus the need to upgrade to V3. Theoretically, I should be able to insert the code the same way...
[raw]<head>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-mobile-web-app-title" content="Burger King"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=.5, maximum-scale=1.5"/>
<link rel="stylesheet" href="http://undercoverdiner.net/athV2/add2homered.css"/>
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg"/>
<link href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg" rel="apple-touch-startup-image" />
<link rel="apple-touch-startup-image" href="http://undercoverdiner.net/media/startup.png"/>
<link href="http://undercoverdiner.net/media/startup.png" rel="apple-touch-startup-image" />
<link rel="shortcut icon" href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg" />
<link rel="shortcut icon" type="image/ico" href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg" />
<link rel="shortcut icon" sizes="196x196" href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg"/>
<link rel="shortcut icon" href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg" type="image/x-icon"/>
<link rel="icon" href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg" type="image/x-icon"/>
<link rel="shortcut icon" href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg" type="image/vnd.microsoft.icon" />
<link rel="shortcut icon" sizes="16x16" href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg"/>
<link rel="shortcut icon" sizes="196x196" href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg"/>
<link href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg" rel="apple-touch-icon-precomposed" sizes="196x196" />
<link href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg" rel="apple-touch-icon-precomposed" sizes="57x57" />
<link href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg" rel="apple-touch-icon-precomposed" sizes="72x72" />
<link href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg" rel="apple-touch-icon-precomposed" sizes="114x114" />
<link href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg" rel="apple-touch-icon-precomposed" sizes="144x144" />
<link rel="shortcut icon" sizes="196x196" href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg">
<link rel="shortcut icon" sizes="128x128" href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg">
<link rel="apple-touch-icon" sizes="128x128" href="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg">
<script type="text/javascript">
var addToHomeConfig = {
autostart: true,
animationIn: 'drop',
animationOut: 'fade',
lifespan:16000,
expire:2,
touchIcon:false,
message:'<p style="text-align: center;"><strong>Hello Undercover Diner!</strong></p><p style="text-align: center;"><img style="border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: #000000 0px 1px 2px; width: 180px; height: auto;" alt="" src="https://s3.amazonaws.com/jufs/ellie123/42044521603947/282371939851523278/burger-king.jpg"/></p><p style="text-align: justify;">Add this app icon to your device homescreen. Tap your browser bar, then tap %icon and choose Add to Home. When you tap the icon you will come directly to this page, which has all the details you need and the link to your Onsite Report Form.<br/></p>'
};
</script>
<script charset="utf-8" type="application/javascript" src="http://undercoverdiner.net/athV2/add2home.js"></script>
</head>
[/raw]
ellie123 comments:
(Sorry....I don't know how to damn link on here for you...LOL....I am blonde, so maybe that explains it)
John Cotton comments:
<blockquote>Theoretically, I should be able to insert the code the same way...</blockquote>
You can insert it, but it's not correct.
You shouldn't have a <head> tag within the <body> tag.
What I suggest you do - as a test - is put that HTML properly in the real <head> tag (probably by editing your theme header.php file) and see if it works.
If it does, then that tells you what the problem is. If it does, you can look elsewhere.
<blockquote>The only "plugin" that I am using is the [raw] plugin that lets me put the <head> code in.</blockquote>
The JS file is a plugin in the sense that it's not your code. It's not a WordPress plugin, but it's plugged in nevertheless.
John Cotton comments:
<blockquote>Theoretically, I should be able to insert the code the same way...</blockquote>
You can insert it, but it's not correct.
You shouldn't have a <head> tag within the <body> tag.
What I suggest you do - as a test - is put that HTML properly in the real <head> tag (probably by editing your theme header.php file) and see if it works.
If it does, then that tells you what the problem is. If it does, you can look elsewhere.
<blockquote>The only "plugin" that I am using is the [raw] plugin that lets me put the <head> code in.</blockquote>
The JS file is a plugin in the sense that it's not your code. It's not a WordPress plugin, but it's plugged in nevertheless.
Romel Apuya answers:
hi,
try adding
<meta name="apple-mobile-web-app-capable" content="yes" />
in your meta in the header
Romel Apuya comments:
Hi,
how are you adding the css and javascript??
is it via wp_enqueue_scripts??
Romel Apuya comments:
also try putting the ath css and javascript in one directory.
ellie123 comments:
All of that is already done....
Romel Apuya comments:
hi have you tried debugging it
Debug mode
ATH v3 also introduces debug mode. By setting debug: true some of the preliminary checks are skipped and the message is shown on desktop browsers and unsupported devices as well.
You also have the addToHomescreen.removeSession() function in your tool belt, which clears the current session. This is very useful when testing various options and the callout seems not to be willing to show up again. This is common because ATH is very conservative, to avoid showing the message by mistake it tries to show it the less as possible.
Romel Apuya comments:
hi,
Ive tested on my iphone5.. ios 8.1.3
http://undercoverdiner.net/diner/ath1/
and it seems working..
i think you need to clear your sessions first
try adding this in the javascript you have.
addToHomescreen.removeSession();