Twitter Cards - Issues on Mobile Platforms CLOSED

LMAWpodcast · 2016-02-11T03:36:54.639Z

Evening.

I’m new to developing anything for Twitter and I have what might be a simple question with a simple answer. If that’s the case, please just link me to that simple answer as I’ve been unable to find it.

I host a podcast at LegendsMythsAndWhiskey.com. The website is on the Wordpress platform and I’m using a plug-in called JM Twitter Cards.

The Plugin works phenomenally with non-player posts; and to be fair, it works with player posts (audio/mpeg) in desktop browsers. On mobile platforms however (and possibly only on the iPhone Twitter app as it is the only thing I have to test on) I see only the image, the play icon laid over the image, and the description. Tapping the play button does nothing.

I can’t seem to find a lot of people doing specifically what I’m doing. Video, yes. Audio, not so much. I suspect the problem is that the plugin doesn’t permit me a place to specify that the content is audio/mpeg, and when I select “Player” as the option (vs. summary or something else) I think the plugin is assuming video/mp4.

I’ve attached some screenshots of the desktop version. Also, the IFRAME page for this post is located here: https://legendsmythsandwhiskey.com/wp-content/uploads/2016/02/16.html.

2-pin-clicked.PNG526x784 342 KB

LMAWpodcast · 2016-02-11T03:37:34.065Z

And here’s the 3rd image since I’m new and can only post 2 per post.

3-plugin-settings-on-post.PNG1164x620 293 KB

LMAWpodcast · 2016-02-11T03:40:13.738Z

Something else worth noting is the my IFRAME page is and HTML page that contains an IFRAME to my player which is hosted at ZenCast.fm. I am attempting to avoid tracking metrics in more than one place. Otherwise I’d just upload this stuff to SoundCloud and be done with it. Thanks.

LMAWpodcast · 2016-02-11T17:31:51.413Z

Hate to be an obnoxious bumper, but I need help on this if there’s anyone who has any input and a moment to share that input.

LMAWpodcast · 2016-02-12T13:56:01.781Z

Maybe I have asked a really complex question, or maybe I’m just getting lost in the shuffle of other posts, but I really do need some help on this. I’m trying to solve it on my own but I can’t see what I’m doing wrong. Can anyone help me out?

LMAWpodcast · 2016-02-13T19:59:06.975Z

Found a way to specify the both audio/mpeg and audio/mp4; codecs=“mp4a.40.2”, though my audio files are not mp4a’s they are mp3s. That didn’t fix the problem either.

Since it’s apparent that I’m working by myself on this I figured I may as well post everything I try/discover while working through this. Maybe it will help someone.

LMAWpodcast · 2016-02-14T05:00:49.492Z

Originally my blog post listed the IFRAME page as an HTML file that contained an Image set above an IFRAME that had my media player in it. On the off chance that was the problem (even though it worked fine on desktop Twitter), I decided to put the player and the artwork on the same page.

So now, this post: https://legendsmythsandwhiskey.com/2016/02/10/episode-sixteen-the-fortunate-cricket-and-the-riddle-solver-and-the-boy/

Points to this IFRAME via the JM Twitter Cards wordpress plugin: https://legendsmythsandwhiskey.com/tweetplay/16.html

The code for that page is below.

















Your browser does not support the audio element.

Still, while the card works in desktop browsers, it doesn’t work on mobile. It appears correctly on mobile, but pressing the play button does nothing.

LMAWpodcast · 2016-02-14T05:47:08.986Z

Little bit of a breakthrough.

After combing through everything I noticed that the link to my audio, hosted on zencast, is actually hosted on the amazon CDN. By making the IFRAME field in the JM Twitter Plugin the address of the .mp3 on Amazon instead of the player on Zencast.fm, I was able to get things to work. But not very handsomely as you can see below (this is on an iPad mini 4):

11.jpg750x1000 79.3 KB

12.jpg750x1000 41.6 KB

I also simplified the code on my html container page:

<!DOCTYPE html)




audio {  
   width:480px; 
}






  
  Your browser does not support the audio element.

It seems like the challenge tomorrow - as I’ve had quite enough tonight - is to make this look prettier than it does.

LMAWpodcast · 2016-02-16T23:11:43.849Z

Seems like what I have is the best it can get. I’ll go’head and close this thread.

andypiper · 2016-02-17T09:22:27.750Z