Import Featured Image with Google Feed API

3 Views

I am attempting to display recent blog posts from a wordpress blog on my non-wordpress HTML site with Google Feed API.
I managed to display the feed but now I am stuck getting the featured images to display as well. Currently it only displayes the list of the 10 recent “headlines” if you will.
Here is the code: 

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://www.google.com/jsapi"> </script>
        <script type="text/javascript">
            google.load("feeds", "1")
        </script>
<script type="text/javascript">
                        var feedUrl = "http://www.harbordev.com/blog/feed/";
                        var feedContainer=document.getElementById("feedContainer");

                        $(document).ready(function() {
                            var feed = new google.feeds.Feed(feedUrl);
                            feed.setNumEntries(10);
                            feed.load( function(result) {
                                list = "<ul>";
                                if (!result.error){
                                    var posts=result.feed.entries;
                                    for (var i = 0; i < posts.length; i++) { 
                                        list+="<li><a href='" + posts[i].link + "'target=_blank'" + "'>" + posts[i].title + "</a></li>";
                                    }
                                    list+="</ul>";
                                    feedContainer.innerHTML = list;
                                }
                                else {
                                    feedContainer.innerHTML = "Unable to fetch feed from " + feedUrl;
                                }                   
                            });
                        });
                    </script>            
</head>

<body> 
<section class="section swatch-white">
                <div class="container">
                <div class="row">
                <div class="col-md-12" id="feedContainer">

                    </div>
                </div>
                </div>
</section>
</body

How do I show the images as well? On a different entry on here I saw a suggestion like this:

Read More
var bmfx = entry.mediaGroups[0].contents[0].thumbnails[0].url;

Should this work, where would I insert it? My Javascript skill is mediocre unfortunately, therefore if someone can point me in the right direction or assist with some code I would greatly appreciate it.

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. You can see the documentation of the resulting JSON here. The images are in the content field (posts[i].content):

    for (var i = 0; i < posts.length; i++) { 
    list+="<li><a href='" + posts[i].link + "'target=_blank'" + "'>" + 
    posts[i].title + "</a><p>" + posts[i].content + "</p></li>";
}

    If you want to show only the images, you could do that with jQuery

    var images = "";
$(posts[i].content).find('img').each(function() {  
   images += this.outerHTML;
});

    And then instead of posts[i].content, append images variable to the list