In this screencast we will walk you through using Yahoo Query Language (YQL) in order to pull your WordPress RSS feed and parse it into a jQueryMobile web app. We will grab the thumbnail, link, title, and description in our app. And, we will also create a detail page to read the detail description that is given from the RSS feed.
Thank you to storbo726 for requesting this screencast!


Download Source Live Demo


 

Note:
Thanks GajusMusculus for adding in the comments how to solve the character issue. By adding into your header:
 <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>

 

23 Comments

Image of Thomas
Thomas
8 years ago

Hi Anthony,
first of all “Happy New Year”!
I’m following your excellent tutorials since a couple of months now and the only thing I can say is : “Thumbs up”. Really a big help, especially on the mobile sector I’m interested in.
This tutorial handles stuff I was searching for month’s…
Thanks for this help!!!
Best regards
Thomas

Image of Anthony James Founder/CEO
Anthony James Founder/CEO
8 years ago

Thanks for the kind words. Any other tuts that your looking for that you might want us to create?

Image of Dave
Dave
8 years ago

Great screencast again Anthonie, two questions i you don’t mind, One, is there a way to grab all of the content and ad this inside your mobile app or website and two, is there a way to get rid of these funky codes in the titles, codes like these ’s
Makes the title look ugly really
Thanks
Dave

Image of Thomas
Thomas
8 years ago

Hi Anthony,
what I would like to know is the following:
As using of PHP inside a native iOS-App is not permitted , how would you handle your example?
The idea behind my question is building an iOS-App using jQueryMobile, PHP, JavaScript and Phonegap. Isn’t there a way to communicate with this rss-reader and JavaScript. I’m quite familiar with PHP, but not with JavaScript.
And by the way: How do you like the 1.0 jQM-Version? I still face some problems on the animate n side… But great improvements anyway!
Best regards from Germany
Thomas

Reply
Image of Dave Baxter
Dave Baxter
8 years ago

Hi,
Am new to all this mobile development and only came across your YouTube channel today.
I don’t understand this example, can you explain why you needed to use Yahoo for the SQL, couldn’t you have just accessed the RSS feed directly from PHP ?
Also what did jQueryMobile do ? I could see you included the .js file but not quite sure what it done.
Dave

Image of Anthony James Founder/CEO
Anthony James Founder/CEO
8 years ago

Yes, you could use PHP to parse the xml. The JavaScript file is the jquerymobile javascript file. This may not be the best place to start with jQueryMobile. We have over 14 other tuts on it you can start here http://tuts.pinehead.tv/2011/03/27/introduction-to-jquery-mobile-2/

Reply
Image of SripadRaj
SripadRaj
8 years ago

Hello Anthony! 🙂
Your tuts are great. I jus love the simplicity.
Can you post some tutorials on making a restaurant e-menu app on jquery mobile.

Image of Anthony James Founder/CEO
Anthony James Founder/CEO
8 years ago

DM me on twitter @pineheadtv and we can discuss what your looking for in the e-menu app.

Reply
Image of Dave
Dave
8 years ago

I still have the question about pulling in all the content of the post into the app instead of a link to the original post, is that possible or is it as simple as having your RSS feeds setting on full?

Image of James
James
8 years ago

What if you want to have more than one feed? Like a list with 4 feeds
and you would click for each feed.
Thanks
JB

Image of Pablo
Pablo
7 years ago

Hi! I have donwloaded the source code and when I try to run it, it is not working.
It says:
Warning: Invalid argument supplied for foreach() in /homepages/22/d395491909/htdocs/e/reader.php on line 31
What could be the problem with line 31?

Image of Anthony James Founder/CEO
Anthony James Founder/CEO
7 years ago

Basically it means the XML feed is no longer valid.
Have you put in your xml feed?

Image of Pablo
Pablo
7 years ago

I have just downloaded the source code and try to run it.
The xml feed in the source code is http://feeds.feedburner.com/Pineheadtv and it seems it is working ok.
On the other hand the live demo is working ok but I don’t know how I can get the source code of the live demo.
Thanks in advance!

Reply
Image of david
david
7 years ago

Got the same problem as Pablo, set up the feedburner which is working fine http://feeds.feedburner.com/RedboxMultimediasBlog added and activated the wordpress plugin but still getting the error
invalid argumentsupplied foreach() in / web1/user27078/website/index.php on line 12
what XML feed are you talking about above ? bit of a newbie to this so would appreciate the help

Image of Anthony James Founder/CEO
Anthony James Founder/CEO
7 years ago

I’ll take a look at it. Did you follow the tut and build it yourself or are you just wanting the code?

Reply
Image of John
John
7 years ago

The source code given is not working, the live demo it working… why?

Image of Anthony James Founder/CEO
Anthony James Founder/CEO
7 years ago

I downloaded the git source and tested it and it works fine. You might consider the type of xml feed your putting in or if there is an issue with your xml feed.

Reply
Image of James
James
7 years ago

Great tutorial, however, I’m having some problems.
When the detail=$detail is added to the link, my links were literally displaying the entire post in the link.
Anyway to solve this?

Image of Pablo
Pablo
7 years ago

For those having problem with the source code (including me) I have founded that the problem in my case was not the source code… the source code is working ok.
This is the problem I had
Warning: Invalid argument supplied for foreach() in /homepages/22/d395491909/htdocs/e/reader.php on line 31
The only problem was that the php web server was not config correctly.
However I am having another problem now: In my feed there is no any field called enclousure so I can not display images properly. I have been trying to use feedburner and blogs from wordpress and blogger.
How can I have a blog with the same feed than pinehead.tv?
Thanks in advance

Image of Anthony James Founder/CEO
Anthony James Founder/CEO
7 years ago

Pinehead.tv uses feedburner. What is your feed url? I’ll test it and see whats up.

Image of david
david
7 years ago

im obviously haveing the same issues with my webserver as Pablo can Pablo tell us all that are having trhe same issues as to what the config should be inorder to get this to work

Reply
Image of david
david
7 years ago

Anthony can you do me a favour and see if my feed comes out ok would be appreciated
http://feeds.feedburner.com/RedboxMultimediasBlog
many thanks in advance, really want to get this working and would love to know what the webserver config issue i have is as i have talked to the hosting company and they say they dont have a problem

Image of Anthony James Founder/CEO
Anthony James Founder/CEO
7 years ago

Also your feed doesn’t have images associated with it so i just removed the img src.
Remember the rss only provides a “short description” of information. If you click the link it will take you to the next page (you’ll need to format it)

Reply
Image of Anthony James Founder/CEO
Anthony James Founder/CEO
7 years ago

It’s not a web server config issue it’s just your feed. Make sure you actually follow the screencast to learn how to build this since not every feed is the same.
David here is your code, literally all i did was plugin your source and it worked. I needed to remove the “” on the link because of your link url’s but it still pulled in the feed without issue just not formatted well.
http://tuts.pinehead.tv/jqmobile/rsswordpress/RedboxMultimediasBlog.zip
So just know this, not every feed is the same. Just trouble shoot and ask questions based off your issue. You can do it at pinehead.tv/community.

Image of david
david
7 years ago

Thanks for taking the time to have a look for me, much appreciated but still not working for me and getting the foreach arguement on line 34, even on Pineheadtv feedburner feed. Will re look at the screen cast and see if I can resolve the issue

Reply
Image of Justin
Justin
7 years ago

All of the content for the post on my feed is located under encoded. When I try to use that instead of desc it flips out and puts all of the content as list elements in reader.php.

Image of Anthony James Founder/CEO
Anthony James Founder/CEO
7 years ago

I’m happy to help you write your code. But you need to post it on a paste bin or on pinehead.tv/community with your feed so we can help.

Reply
Image of Pablo
Pablo
7 years ago

Hi again!
In order to avoid this problem: “Warning: Invalid argument supplied for foreach() in line 31” I had to allow URL fopen in my php web server.
But I am still having problems with the RSS Feed. I am using WordPress + FeedBurner but I am not able to display images.
Regarding the line 34
$img = $post->enclosure->url;
There is no any enclosure field in my RSS Feed. I have the field “media:content” but I can not parse that field because of the char “:”
Any idea?

Image of David H.
David H.
7 years ago

Same problem… I am not able to display images from my feed!!

Image of max
max
7 years ago

DEMO ERROR:
Pinehead.tv Simple Mobile Rss Site
Warning: Invalid argument supplied for foreach() in /content/disk/sites/pinehead/www/tuts/jqmobile/rsswordpress/reader.php on line 35

Image of Anthony James Founder/CEO
Anthony James Founder/CEO
7 years ago

Try again. Built a version for you to plugin your own feed and placed it in the wrong file.

Reply
Image of Anthony James Founder/CEO
Anthony James Founder/CEO
7 years ago

You can test your feed by changing the feed url on the end.
tuts.pinehead.tv/jqmobile/rsswordpress/testyourfeed.php?feed=http://feeds.feedburner.com/PineheadTV

Image of jqmfan
jqmfan
7 years ago

Thanks so much for the tutorial; appreciate it. The code works on your feed, and I got it to work partially on my feed, but the problem I’m having is as follow:
The description part of the feed is echoed together with the title (header), and does not progress to the description page once selected. Would appreciate any help/pointers you can provide.
Thanks once again.

Image of Brad
Brad
7 years ago

Great tutorial. One quick question how would I have it just display 3 items of the RSS feed instead of all of them?

Image of Anthony James Founder/CEO
Anthony James Founder/CEO
7 years ago

What you will want to do is add a for loop. That basically says as long as i < 4 then display the next one. Then inside of the loop you'll count each i++ For example.. for ($i = 0, $i <4, $i++) { RSS feed code. $i++ } As soon as i = 3 it will stop pulling in the rss feeds.

Reply
Image of David Joseph
David Joseph
7 years ago

Hey Anthony
I love your tutorials and everything on my rss reader works great, but was wondering how to get the date of the post in there as well, it calls it pubdate and I made a string called $date but when I put date=$date in the echo part nothing works. I have tried many things even shorthand calls but nothing seems to work. Also I would like to limit the posts to just like 5 or so, If you could help that would be great. How would I get files to you?

Image of Matt Rodriguez
Matt Rodriguez
7 years ago

Does anyone know how to add the “encoded” content on the details.php page? On the details.php page I want to view the entire full content of the post (not the description).
Here’s my reader.php page (http://www.rodriguezproject.com/ifl-iphone-app/reader.php)
Here’s my detail.php page (http://www.rodriguezproject.com/ifl-iphone-app/detail.php)
Thanks in advance for your yelp,
Matt

Leave a Reply

Your email address will not be published. Required fields are marked *