JavaScript JSON Example

DeveloperWun

Is there any code out there that will show me how to AJAX get a gallery feed via JSON? I have two clients who want to display their gallery on their site but the iframe method just doesn't work too well. It gets clipped and they want to customize the look and feel of it on their site.

I can get an XML feed of the data, but want to get it via JSON, or at least be able to pull it in via JQuery if it has to be XML. My code below doesn't work. I get this error:

Object {responseData: null, responseDetails: "Feed could not be loaded.", responseStatus: 400}


Here's my code:

<script type="text/javascript">
$(function () {
var FEED_URL = "http://api.smugmug.com/hack/feed.mg?Type=nicknameRecentPhotos&Data=omphotography&format=atom10&Sandboxed=1";

$.ajax({
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(FEED_URL),
dataType: 'json',
sandboxed: 1,
success: function (data) {
console.log(data);
}
});
});
</script>


*And please don't tell me to double encode it. I already tried that.

thenickdude

SmugMug explicitly blocks access to RSS feeds by returning a "503 Service Unavailable" response when the user agent starts with "Feedfetcher-Google" (the full user agent used by Google for your feed equated to "Feedfetcher-Google; (+http://www.google.com/feedfetcher.html; feed-id=16477701512634327760)"). Not sure why they do this, or if it is intentional or not.

You'll have to create your own server-side script which fetches the RSS from SmugMug and returns it to your JS as JSONP (so that you can set the User Agent to whatever you like while simultaneously getting around the Same-Origin Policy restrictions that prevent you from just loading it from SM directly).

DeveloperWun

I went with this:

http://www.the-art-of-web.com/php/atom/

Works fine. Now I just have to figure out how to build out a WordPress plugin/widget type deal for the data.