# My first Google Gadget to embed a flickr photoset with Galleria navigation

The xml link for this [is here](http://hosting.gmodules.com/ig/gadgets/file/108150762089462716664/flickrGalleria.xml)

Google Gadgets are really easy all you need to do is wrap some XML around html content.

Here’s more [info on getting started](http://code.google.com/apis/gadgets/docs/gs.html) and there is even an online editor for [creating and hosting your own gadgets](http://code.google.com/apis/gadgets/docs/tools.html#GGE)

*If you’re interested in developing gadgets for Google Apps, the following guides will help you get started writing gadgets for the different Google Apps containers:*

\- *[Gmail gadgets](http://code.google.com/apis/gmail/gadgets/)*
\- *[Calendar gadgets](http://code.google.com/apis/calendar/gadgets/)*
\- *[Sites gadgets](http://code.google.com/apis/sites/gadgets/site_gadgets.html)*
\- *[Spreadsheet gadgets](http://code.google.com/apis/spreadsheets/gadgets/)*

The code I used

<?xml version=”1.0” encoding=”UTF-8” ?>
<Module>
 <ModulePrefs title=”\_\_UP\_myname\_\_” author=“mhawksey”author\_email=“m.hawksey@gmail.com” author\_location=“Edinburgh”directory\_title=“FlickrGalleria” title\_url=”\_\_UP\_mylink\_\_”description=“Emebed a flickr photoset with Galleria navigation”> 
 <Require feature=“dynamic-height”/>
 </ModulePrefs>
 <UserPref name=“myname” display\_name=“Title” required=“true”default\_value=“Galleria/Flickr Show” />
 <UserPref name=“mylink” display\_name=“Title link” />
 <UserPref name=“photoset” display\_name=“Photoset” required=“true”default\_value=“72157626051720912”/>
 <UserPref name=“mywidth” display\_name=“Width” default\_value=“100%”/>
 <UserPref name=“myheight” display\_name=“Height”default\_value=“600px” />
 
 <Content type=“html”>
 <!\[CDATA\[ 
 <script type=”text/javascript”>
 \_IG\_AdjustIFrameHeight();
 </script>

 <style type=”text/css”>
\#galleria {
 width: \_\_UP\_mywidth\_\_; 
 height: \_\_UP\_myheight\_\_;
}
</style>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script src=”http://www.rsc-ne-scotland.org.uk/mashe/galleria/galleria.js”></script>
<script src=”http://www.rsc-ne-scotland.org.uk/mashe/galleria/plugins/galleria.flickr.js”></script>
<script>Galleria.loadTheme(‘http://www.rsc-ne-scotland.org.uk/mashe/galleria/themes/classic/galleria.classic.js’);</script>
<div id=”galleria”>Loading…
<script type=”text/javascript”>
 api\_key = ‘4bb2dc0f5e1ef29c928d7e138c489508’
 var flickr = new Galleria.Flickr(api\_key);
 flickr.getSet(‘\_\_UP\_photoset\_\_’, function(data) {
 $(‘#galleria’).galleria({
 data\_source: data,
 image\_crop: false,
 show\_info: true,
 autoplay: false,
 transition: ‘fade’,
 preload: 3,
 });
});
</script>
</div> 
 \]\]> 
 </Content> 
</Module>​