|
ExampleYouTube
YouTube から動画を取得して、サムネイルをリスト表示します。
jQuery.getJSON を使って YouTube から新着の動画を取得し、そのサムネイルをリスト表示しています。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="YouTube - opensocial-jquery">
<Require feature="dynamic-height" />
<Require feature="settitle" />
</ModulePrefs>
<UserPref name="tag" default_value="dog" required="true" />
<Content type="html"><![CDATA[
<script type="text/javascript" src="http://example.com/opensocial-jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
// Retrieves a preference as a string.
var tag = $.pref('tag');
// Sets the gadget title.
$(window).title(tag + ' - YouTube');
// Fetches content from the YouTube that content into the callback function.
var url = 'http://gdata.youtube.com/feeds/videos';
var data = { vq: tag, 'max-results': 21, alt: 'json' };
$.getJSON(url, data, function(json) {
$.each(json.feed.entry, function() {
var img = $('<img width="80" heieht="60" />')
.attr('src', this.media$group.media$thumbnail[0].url);
$('<a target="_blank" />')
.attr('href', this.media$group.media$player[0].url)
.append(img)
.appendTo('#videos');
});
// Adjusts the gadget height.
$(window).adjustHeight();
});
});
</script>
<style type="text/css">
<!--
#videos img {
border: 0;
margin: 2px;
width: 80px;
height: 60px;
}
-->
</style>
<div id="videos"></div>
]]></Content>
</Module>
|
Sign in to add a comment