Facebook App dev vol.8 : Adding a JSON video feed with YouTube APIs

Note from : Building Facebook Applications with HTML and JavaScript Ch.4 – 4

You can use JSON formatted data to add some dynamic content to your app. This memo is how to display a feed from a channel in YouTube.

Step1 : Adding the palceholder for our video

<div id=”videogroup”></div>

Step2 : Adding YouTube JSON call script before </body> tag

<script type=”text/javascript” src=”http://gdata.youtube.com/feeds/users/xxxxxx/uploads?alt=json-in-script&callback=populateVideos&max-results=7&category=xxxxxxxx”></script&gt;

Step3 : Adding the “PopulateVideos” Function in “.js” file.

function populateVideos(data) {
var entries = data.feed.entry;
var output = ‘<h2 class=”label”>Latest Videos</h2>’;

for (var i=0; i<data.feed.entry.length; i++) {
var entriesID=entries[i].id.$t.substring(38);
var entriesTitle=entries[i].title.$t;
var entriesDescription=entries[i].media$group.media$description.$t;
var entriesThumbnail=entries[i].media$group.media$thumbnail[1].url;

if (i==0) {
output += ‘<div class=”first”>’;
output += ‘<h3>’ + entriesTitle + ‘</h3>’;
output += ‘[testyoutube http://www.youtube.com/watch?v=’+entriesID+&#8217;?wmode=transparent&amp;HD=0&amp;rel=0&amp;showinfo=0&amp;controls=1&amp;autoplay=]’;
output += ‘<p>’ + entriesDescription + ‘</p>’;
output += ‘</div>’;
output += ‘<ul>’;
} else {
output += ‘<li><div class=”entriestitle”>’ + entriesTitle + ‘</div>’;
output += ‘<a href=”http://www.youtube.com/watch?v=&#8217; + entriesID + ‘&feature=youtube_gdata” target=”_blank”><img src=”‘ + entriesThumbnail + ‘” alt=’ + entriesTitle + ‘ /></a>’;
}
}
output +='</ul>’;
document.getElementById(‘videogroup’).innerHTML = output;
}

Step4 : That’s it! You might want to style with editing the CSS file

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s