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.

Answers (3)

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.

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]].

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/

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...

<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.

<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.

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.