jquerymobile.jp

Create A jQuery Mobile WordPress RSS Reader For Your Site

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

50 thoughts on “Create A jQuery Mobile WordPress RSS Reader For Your Site

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

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

      1. Upps, My Code was gone 😉
        I’m sorry, I assume it’S not allowed to paste html-tags in here…

        meta http-equiv=”content-type” content=”text/html; charset=UTF-8″

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

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

      1. Cheers Anthony, i know understand what the jQueryMobile files are used for.

        Excellent tutorials by the way.

        Now I have to decide which framework or IDE to start learning.

        Dave

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

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

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

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

      1. I did follow the tut (it is really a great tut!!) but after I follow the tut I get this problem, so I decided to just try to download the source code… same problem.

      2. Hi i followed the tut but even using your feed it is not working still getting the foreach arguement but have contacted my hosting company to see if they have white listed yahoo api. they say the problem is not at the server end, can you do me a favour and see if you can load http://feeds.feedburner.com/RedboxMultimediasBlog

        and have it display on your test server. Also still wondering what XML feed your talking about if I can view the feedburner fine in my browser thanks

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

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

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

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

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

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

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

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

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

      1. I already posted this on the pinehead.tv/community but thought I should repost it here just in case.

        I went through the tut to create a mobile rss reader from a wordpress blog using PHP and jquery mobile. However, the end result only pulls in about two sentences of text. I want to pull in the full content. I have spent hours on this one thing and have tried many different ways, but nothing has been successful. Help is needed.

        My feed is: http://actbridgeinc.com/feed/ or http://feeds.feedburner/actbridge . I’ve tried it both ways with the same result.

        Here are links to the code I am currently using.

        Reader.php
        http://pastebin.com/pWQXr7KF

        Detail.php
        http://pastebin.com/8ELZ3DAq

        I’ve seen this question posted on comments before so I know others need it as well. Any help getting all the content on there would be greatly appreciated! Thanks.

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

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

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

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

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

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

Leave a Reply

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