Foleeo: embeddable video, photo, and music widget


	Foleeo: embeddable video, photo, and music widget

enbar

10-31-2007 12:33 AM

568 views

tags:

web, design, flash, tools, widgets, image, photo, music, video

enbar says:

Nicely designed. Visit the site for a preview. Only works with three sites: Flickr, Last.fm, and YouTube.

1 Comment |

Add a Comment

10-31-2007 1:43 AM

ratilfar

Thanks!

Login to Comment. Not a member yet? Sign up

New tool from Facebook extends its Web pr...

Widgets For Your Blogs

Interesting Web Browsers You Have Never He...

Grendel's Den Design Studio

50 Must-Read Resources For Incredible Web ...

How the mighty Google shall look in 2084

More clips from enbar

Apollo 14 veteran claims aliens have visit...

Get a First Life dot com

That "do you have any Grey Poupon" joke is...

Today's Top Clips

visit the Top Clips page

View the Top Clips from October 31, 2007

Embed This Clip In Your Site...

<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/ec60d906-8609-4aef-9c57-d18be5fd6e3c/CD665B53-37B2-4BD4-9529-A1AE5B8B6ED7/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://foleeo.com/widgets/" href="http://foleeo.com/widgets/" style="font-size: 11px;">foleeo.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://foleeo.com/widgets/"><DIV id="header"><H1><A title="Go back to the homepage" href="http://foleeo.com/">Foleeo™</A></H1><UL id="menu"><li style="margin-left:16px;padding-left: 0px;"><A title="Get widgets to show off your favorite music and videos!" id="widgets" href="http://foleeo.com/widgets/">Widgets</A></LI><li style="margin-left:16px;padding-left: 0px;"><A title="Learn more about us as a company." id="about" href="http://foleeo.com/about/">About Us</A></LI><li style="margin-left:16px;padding-left: 0px;"><A title="Get behind the scenes of Foleeo!" id="blog" href="http://foleeo.com/blog/">Blog</A></LI><li style="margin-left:16px;padding-left: 0px;"><A title="Having trouble figuring something out?  Check out our Help section." id="help" href="http://foleeo.com/help/">Help/FAQ</A></LI></UL><DIV class="clearBoth"></DIV></DIV></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://foleeo.com/widgets/"><DIV class="chunk noborder">
<DIV class="chunk">
					<H3>Create your own music, video, and photo widget!</H3>
				</DIV>
<DIV id="previewBox">
					<P class="highlight">Live Preview:</p> <DIV id="preview">
						<EM id="previewMessage" class="highlight">Mess around with the settings on the left to see a live preview here.</EM>
					</DIV>
				</DIV>
<DIV id="flashWarning">
					<P><A href="http://adobe.com/go/getflashplayer/">Flash Player 7 (or newer) is REQUIRED to use this page.</A></p> </DIV>
<FORM action="" name="createWidget" id="createWidget">
					<OL>
						<li style="margin-left:16px;padding-left: 0px;"><DIV class="chunk">
							<H4>Widget Type:</H4>
							<P><SELECT id="type" name="type">
								<OPTION value="youtube">Videos (YouTube)</OPTION>
								<OPTION value="flickr">Photos (Flickr)</OPTION>
								<OPTION value="lastfm">Music (Last.fm)</OPTION>
							</SELECT> <LABEL class="footnote" for="type"><A id="signup" href="http://youtube.com/signup">Get a YouTube account!</A> (<A href="http://foleeo.com/help/widgets/why-do-i-need-a-lastfm-account-do-you-support-other-services/">Why?</A>)</LABEL></p> </DIV></LI>
<li style="margin-left:16px;padding-left: 0px;"><DIV class="chunk">
							<H4>Username:</H4>
							<P><INPUT type="text" id="username" name="username" /> <SPAN class="footnote" id="label_username"></SPAN></p> <DIV class="extra_options" id="flickr_options">
								<DIV class="extra_options_spacer">
									<H5>Additional Options <IMG id="indicator" alt="Loading..." src="http://foleeo.com/images/indicator-small.gif" /></H5>
									<P><SELECT id="flickr_stream" name="flickr_stream" disabled="">
										<OPTION value="recent">Recent Photos</OPTION>
										<OPTION value="favorites">Favorite Photos</OPTION>
										<OPTION value="set">Specific Photoset</OPTION>
									</SELECT> <LABEL id="label_flickr_stream" for="flickr_stream">What kind of photostream to use?</LABEL></p> <P><SELECT id="flickr_set" name="flickr_set" disabled=""></SELECT> <LABEL id="label_flickr_set" for="flickr_set">Which photoset?</LABEL></p> </DIV>
							</DIV>
						</DIV></LI>
<li style="margin-left:16px;padding-left: 0px;"><DIV class="chunk">
							<H4>Choose your options:</H4>
							<TABLE cellspacing="0" cellpadding="0" border="0" id="options_table"><TBODY><TR><TD class="column1"><P><INPUT type="text" value="380" id="width" name="width" /> <LABEL class="footnote" for="width">Width</LABEL></p> <P><INPUT type="text" value="580" id="height" name="height" /> <LABEL class="footnote" for="height">Height</LABEL></p> </TD><TD class="column2"><P><SELECT id="view" name="view" disabled="">
											<OPTION value="full">Full, with artwork</OPTION>
											<OPTION value="playlist">Playlist only</OPTION>
										</SELECT> <LABEL class="footnote" for="view">View style</LABEL></p> <P><SELECT id="theme" name="theme">
											<OPTION value="dark">Darkness</OPTION>
											<OPTION value="light">Light</OPTION>
										</SELECT> <LABEL class="footnote" for="theme">Visual theme</LABEL></p> </TD></TR><TR><TD colspan="2"><P><INPUT type="checkbox" checked="true" id="ratio" name="ratio" disabled="" /> <LABEL id="label_ratio" for="ratio" class="footnote">Maintain a 4:3 size ratio (recommended)</LABEL>
<INPUT type="checkbox" checked="true" id="controller" name="controller" disabled="" /> <LABEL id="label_controller" for="controller" class="footnote">Display navigation controller for images</LABEL></p> </TD></TR></TBODY></TABLE><P><A id="resetDefaults" href="">Reset to default settings?</A></p> </DIV></LI>
<li style="margin-left:16px;padding-left: 0px;"><DIV class="chunk">
							<H4>Copy the code:</H4>
							<P><TEXTAREA id="embed" name="embed" disabled="" title="Drag your image files here to host them on ImageShack."></TEXTAREA></p> <P><INPUT type="checkbox" id="terms" name="terms" /> I agree to the <A href="http://foleeo.com/legal/terms/">terms of use</A>.</p> <P><INPUT type="button" value="Give me the code already!" id="submit" name="submit" disabled="" /></p> </DIV></LI>
<li style="margin-left:16px;padding-left: 0px;"><DIV class="chunk noborder">
							<H4>What do I do with it?</H4>
							<P>You’ll want to go into edit mode for wherever you want your widget to show up, and simply paste the code from step 3 and save!</p> <P>Soon we’ll have a number of tutorials for specific sites and services to help guide you through the process.</p> </DIV></LI>
					</OL>
</FORM>
				<DIV class="clearRight"></DIV>
			</DIV></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/CD665B53-37B2-4BD4-9529-A1AE5B8B6ED7/blog/" title="blog or email this clip"><img src="http://content6.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>