I am using some jQuery scripts to get a JSON feed from Flickr and YouTube and generate the HTML from them on my WordPress site
For Flickr I use
<!-- Script to grab photos from Flickr feed -->
<script type="text/javascript">
// Set variables needed for query
var URL = "http://api.flickr.com/services/feeds/photos_public.gne";
var ID = "<?php echo get_option('of_flickrid') ?>";
var jsonFormat = "&lang=en-us&format=json&jsoncallback=?";
var ajaxURL = URL + "?id=" + ID + jsonFormat;
// Get the last photos of the flickr account, parse it into HTML code
$.getJSON(ajaxURL, function(data){
var htmlString = "<h1><?php echo get_option('of_photostext') ?></h1>";
// Now start cycling through our array of Flickr photo details
$.each(data.items, function(i,item){
// I only want the ickle square thumbnails
var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
// Here's where we piece together the HTML
htmlString += '<a href="' + item.link + '" target="_blank">';
htmlString += '<img title="' + item.title + '" src="' + sourceSquare;
htmlString += '" alt="'; htmlString += item.title + '" class="rounded"/>';
htmlString += '</a>';
if(i === 11){
return false;
}
});
// Pop our HTML in the #images DIV
$('#photos').html(htmlString);
}); // End getJSOON
</script>
<!-- End of Script to grab photos from Flickr feed -->
and for YouTube:
<!-- Script to grab videos from YouTube feed -->
<script type="text/javascript">
// Set variables needed for query
var URL = "https://gdata.youtube.com/feeds/api/users/";
var UserName = "<?php echo get_option('of_youtubeid') ?>";
var jsonFormat = "/uploads?v=2&alt=jsonc&max-results=2&jsoncallback=?";
// Construct the JSON feed of the YouTube user's channel
var ajaxURL = URL + UserName + jsonFormat;
// Get the last videos of the YouTube account, parse it into HTML code
$.getJSON(ajaxURL, function(data){
var htmlString = "<h1><?php echo get_option('of_videostext') ?></h1>";
$.each(data.data.items, function(i,item){
// Here's where we piece together the HTML
htmlString += '<iframe class="videos" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/';
htmlString += item.id;
htmlString += '?autoplay=0" frameborder="0"></iframe>';
});
// Pop our HTML in the #videos DIV
$('#videos').html(htmlString);
});
</script>
<!-- End of Script to grab videos from YouTube feed -->
The scripts are running pretty well in all browsers except Opera.
When I remove the callback function from YouTube JSON link, it works on Opera but stops on IE and vice versa.. What in the world might be going on?
You don’t need to append the query string to your URL for jQuery AJAX calls. Use the data parameter described in the documentation. Here’s an example:
For your situation I’d try the following code for Flickr:
And for YouTube: