Widget Connector

Searching Help

The Widget macro, or Widget Connector, allows you to embed multi-media content from other web sites into your wiki page.

Basic Usage

Basic Usage

Just type the word 'widget' in curly brackets, and give it the URL (web address) of the thing you want to display.

{widget:url=http://example.com/my-location}

If the web-widget alias is enabled on your Confluence site, you can use web-widget instead of widget. See below.

Parameters Available

Parameters Available

Parameter Required Default Description
url   This is the URL provided by the external web site for embedding content from that web site onto another web page.
height   Specify the height of the display, in pixels (default) or as a percentage of the window's height. For example, to specify a height of 200 pixels:
{widget:url=http://www.flickr.com/photos/tags/sunmicrosystems/|height=200}

This code also specifies a height of 200 pixels:

{widget:url=http://www.flickr.com/photos/tags/sunmicrosystems/|height=200px}

This code specifies a height of 10 percent of the window's height:

{widget:url=http://www.flickr.com/photos/tags/atlassian/|height=10%}
width   Specify the width of the display, in pixels (default) or as a percentage of the window's width. For example, to specify a width and height of 200 pixels:
{widget:url=http://www.flickr.com/photos/tags/sunmicrosystems/|width=200|height=200}

This code also specifies a width and height of 200 pixels:

{widget:url=http://www.flickr.com/photos/tags/sunmicrosystems/|width=200px|height=200px}

This code specifies a width of 10 percent of the window's width:

{widget:url=http://www.flickr.com/photos/tags/sunmicrosystems/|width=10%}

Flickr Photos

Live Example of Flickr Photos

This example shows the Widget macro in action. It displays all photos from Flickr with the tag 'sunmicrosystems'.

What You Need to Type
{widget:url=http://www.flickr.com/photos/tags/sunmicrosystems}
What You Will Get

Google Gadget

Live Example of Google Gadget

This example shows the Widget macro in action. It lets you play with a Google Gadget, Gadzi's Monkey Virtual Pet.

What You Need to Type
{widget:url=http://www.google.com/ig/adde?synd=open&source=ggyp&moduleurl=www.gadzi.com/gadgets/monkey.xml|width=250}
What You Will Get

Google Calendar

Embedding a Google calendar into your wiki page is super simple. Simply enter the following wiki markup on your page:


{widget:url=http://www.google.com/calendar/embed?src=samtuiam3d73kje7s215a7hsnc%40group.calendar.google.com&ctz=America/Los_Angeles}

The URL is always the "HTML" calendar address which you can get from your Google calendar. You can customize this url (add border, change colors, change first day of the week, etc) via the Google calendar wizard and then enter the resulting URL into above widget macro.

You can import private as well as public calendars into the wiki, but keep in mind that a private calendar will be visible to everyone who can see the wiki page where the widget is posted. The Sun Guidelines on Public Discourse apply to the use of Google calendars, specifically:

Don't Tell Secrets

Anything you post is accessible to anyone with a browser. Some sites have a restricted content feature, but keep in mind that external content is NOT as secure as content that resides on a protected inTRAnet — you are responsible for the content you post and the restricted spaces you manage. Common sense at work here; it's perfectly OK to talk about your work and have a dialog with the community, but it's not OK to publish the recipe for one of our secret sauces. Content requiring a non-disclosure agreement or considered Sun Proprietary should NOT be published on Sun's community sites — even in spaces set up to restrict access to Sun employees only. If the judgment call is tough, on secrets or other issues discussed here, it's never a bad idea to get management or Sun legal help before you publish.

More Examples

The Widget macro supports embedded content from the following web sites:

More Examples of Macro Code

Google Gadgets

You will need to find the URL for the Google Gadget you want to display.

Here is one way to find a gadget's URL:

  1. Go to the Google Gadgets directory.
  2. Find the gadget you want then click its name, such as 'Spider'.
  3. The gadget's summary page will open. Copy the URL from your browser's address bar. The URL looks something like this one:
    http://www.google.com/ig/directory?synd=open&num=24&url=http://abowman.googlepages.com/spider.xml&output=html
    
  4. Paste the URL into the Widget macro code on your Confluence page.

You can also use the URL of the 'add gadget' page. The page is called 'Add "gadgetx" to your iGoogle page':

  1. There are a couple of ways to get to the 'add gadget' page:
    • Click a '+Google' button underneath the gadget when displayed on a page somewhere.
    • Or click 'Add Stuff' on your iGoogle page.
  2. Copy the URL from your browser's address bar. The URL would look something like this one:
    http://www.google.com/ig/adde?synd=open&source=ggyp&moduleurl=abowman.googlepages.com/spider.xml
    

Here is an example of the Widget macro code for embedding a Google Gadget:

{widget:url=http://www.google.com/ig/adde?synd=open&source=ggyp&moduleurl=abowman.googlepages.com/spider.xml}

YouTube

You will need to find the URL for the YouTube video that you want to display.

To find a YouTube video's URL:

  1. Go to YouTube and search for the video you want.
  2. Click the title of the video, such as 'Wikis in Plain English'.
  3. The video's summary page will open. Copy the URL from your browser's address bar. The URL looks something like this one:
    http://au.youtube.com/watch?v=-dnL00TdmLY
    
  4. Paste the URL into the Widget macro code on your Confluence page.

Here is an example of the Widget macro code for embedding a YouTube video:

{widget:url=http://au.youtube.com/watch?v=-dnL00TdmLY}

MySpace Videos

You will need to find the URL for the MySpace video that you want to display.

To find a MySpace video's URL:

  1. Go to MySpace Video and search for the video you want.
  2. Click the title of the video, such as 'Glacier Creek Confluence Time Lapse'.
  3. The video's summary page will open. Copy the URL from your browser's address bar. The URL looks something like this one:
    http://vids.myspace.com/index.cfm?fuseaction=vids.individual&videoid=3376248&searchid=20c789f6-1ae9-459a-bfec-75efcfc2847c
    
  4. Paste the URL into the Widget macro code on your Confluence page.

Here is an example of the Widget macro code for embedding a MySpace video:

{widget:url=http://vids.myspace.com/index.cfm?fuseaction=vids.individual&videoid=3376248&searchid=20c789f6-1ae9-459a-bfec-75efcfc2847c}

Google Videos

You will need to find the URL for the Google video that you want to display.

To find a Google video's URL:

  1. Go to Google Video and search for the video you want.
  2. Click the title of the video, such as 'An Evening With Wiki Inventor Ward Cunningham in Conversation'.
  3. The video's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this:
    http://video.google.com/videoplay?docid=-7739076742312910146&ei=nJAfSbrzPIWOwgOhv_GKDA&q=An+Evening+With+Wiki+Inventor+Ward+Cunningham+in+Conversation&emb=1
    
  4. Paste the URL into the Widget macro code on your Confluence page.

Here is an example of the Widget macro code for embedding a Google video:

{widget:url=http://video.google.com/videoplay?docid=-7739076742312910146&ei=nJAfSbrzPIWOwgOhv_GKDA&q=An+Evening+With+Wiki+Inventor+Ward+Cunningham+in+Conversation&emb=1}

Episodic

You will need an Episodic user account if you want to create and distribute videos via Episodic.

To embed an Episodic video onto a Confluence page:

  1. Find the video and copy the URL from the address bar of your browser. The URL looks something like this:
    http://app.episodic.com/shows/13/episodes/493
    
  2. Paste the URL into the Widget macro code on your Confluence page.

Here is an example of the Widget macro code for embedding an Episodic video:

{widget:url=http://app.episodic.com/shows/13/episodes/493}

Vimeo

You will need to find the URL for the Vimeo video that you want to display.

To find a Vimeo video's URL:

  1. Go to Vimeo and search for the video you want.
  2. Click the title of the video, such as 'The Wiki Show - Allison the Russian High Kicker'.
  3. The video's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this one:
    http://www.vimeo.com/909808
    
  4. Paste the URL into the Widget macro code on your Confluence page.

Here is an example of the Widget macro code for embedding a Vimeo video:

{widget:url=http://www.vimeo.com/909808}

Metacafe

You will need to find the URL for the Metacafe video that you want to display.

To find a Metacafe video's URL:

  1. Go to Metacafe and search for the video you want.
  2. Click the title of the video, such as 'Wikis In Plain English (How To)'.
  3. The video's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this one:
    http://www.metacafe.com/watch/679493/wikis_in_plain_english_how_to/
    
  4. Paste the URL into the Widget macro code on your Confluence page.

Here is an example of the Widget macro code for embedding a Metacafe video:

{widget:url=http://www.metacafe.com/watch/679493/wikis_in_plain_english_how_to/}

blip.tv

You will need to find the URL for the blip.tv video that you want to display.

To find a blip.tv video's URL:

  1. Go to blip.tv and search for the video you want.
  2. Click the title of the video, such as 'River cruising on the Rhine'.
  3. The video's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this one:
    http://blip.tv/file/996864/
    
  4. Paste the URL into the Widget macro code on your Confluence page.

Here is an example of the Widget macro code for embedding a blip.tv video:

{widget:url=http://blip.tv/file/996864/}

Viddler

You will need to find the URL for the Viddler video that you want to display.

To find a Viddler video's URL:

  1. Go to Viddler and search for the video you want.
  2. Click the title of the video, such as 'Gliffy Diagramm in Conflu...'.
  3. The video's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this one:
    http://www.viddler.com/explore/Markus_Z/videos/1/
    
  4. Paste the URL into the Widget macro code on your Confluence page.

Here is an example of the Widget macro code for embedding a Viddler video:

{widget:url=http://www.viddler.com/explore/Markus_Z/videos/1/}

Flickr

You can embed a slide show of photos from Flickr by supplying a URL that specifies one of the following:

  • Photos with a specific tag.
  • Photos belonging to the photostream of a specific Flickr user.
  • A set of photos as defined by the Flickr user.
  • A user's photostream starting at a specific photo.

If you want to do something else, we suggest that you try any Flickr URL. It should work.

Below are some examples of the Widget macro code for embedding Flickr images.

Flickr Photos with a Specific Tag

This example displays a slide show of Flickr photos that are tagged with the word 'sunmicrosystems'.

{widget:url=http://www.flickr.com/photos/tags/sunmicrosystems/}
Flickr Photos from a Specific User

This example displays a slide show of photos from the Flickr photostream of user 'tehduh'.

{widget:url=http://www.flickr.com/photos/tehduh/}
Flickr Photos from a Specific Set

This example displays a slide show of Flickr photos from the set 'Melbourne Cup - November 2008' created by user 'Atlassian'.

{widget:url=http://www.flickr.com/photos/tehduh/sets/72157613329927201/}
A Specific Flickr Photo

This example displays a slide show of photos from the Flickr photostream of the user 'tehduh', starting with a specific photo.

{widget:url=http://www.flickr.com/photos/tehduh/3031951123/}

Skitch.com

You will need to find the URL for the Skitch image that you want to display.

To embed a Skitch image onto a Confluence page:

  1. Go to Skitch.com.
  2. Find the image and copy the URL from the address bar of your browser. The URL looks something like this:
    http://skitch.com/atlassian/411g/example-image
    
  3. Paste the URL into the Widget macro code on your Confluence page.

Here is an example of the Widget macro code for embedding a Skitch image:

{widget:url=http://skitch.com/atlassian/411g/example-image}

Twitter

To display the latest messages from a Twitter user, give the user's Twitter link as a URL in the Widget macro.

{widget:url=http://twitter.com/username}

The example below will display Sun Microsystems' messages:

{widget:url=http://twitter.com/sunmicrosystems}

FriendFeed

To display the latest messages from a FriendFeed user, give the user's FriendFeed link as a URL in the Widget macro.

{widget:url=http://friendfeed.com/myname}

SlideShare

You will need to find the URL for the SlideShare presentation that you want to display.

To find a SlideShare presentation's URL:

  1. Go to SlideShare and search for the presentation you want.
  2. Click the title of the presentation, such as 'Social Media at Sun Microsystems'.
  3. The presentation's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this one:
    http://www.slideshare.net/lordorica/social-media-at-sun-microsystems
    
  4. Paste the URL into the Widget macro code on your Confluence page.

Here is an example of the Widget macro code for embedding a SlideShare presentation:

{widget:url=http://www.slideshare.net/lordorica/social-media-at-sun-microsystems}

SlideRocket

You will need to find the URL for the SlideRocket presentation that you want to display.

To find a SlideRocket presentation's URL:

  1. Log in to SlideRocket and go to your library of presentations.
  2. Copy the 'web link' for the presentation you want to display. This will give you a URL that looks something like this one:
    http://app.sliderocket.com/app/FullPlayer.aspx?id=132f9db7-b0fb-4f51-b974-36652774971b
    
  3. Paste the URL into the Widget macro code on your Confluence page.

Here is an example of the Widget macro code for embedding a SlideRocket presentation:

{widget:url=http://app.sliderocket.com/app/FullPlayer.aspx?id=132f9db7-b0fb-4f51-b974-36652774971b}

Scribd

You will need to find the URL for the Scribd presentation that you want to display.

To find a Scribd presentation's URL:

  1. Go to Scribd and search for the presentation you want.
  2. Click the title of the presentation, such as 'My Sea Friends Coloring Book'.
  3. The presentation's summary page will open. Copy the URL from the address bar of your browser. The URL looks something like this one:
    http://www.scribd.com/doc/5683554/My-Sea-Friends-Coloring-Book
    
  4. Paste the URL into the Widget macro code on your Confluence page.

Here is an example of the Widget macro code for embedding a Scribd presentation and displaying it with a height of 600 pixels:

{widget:url=http://www.scribd.com/doc/5683554/My-Sea-Friends-Coloring-Book|height=600px}

Google Docs Presentations

You can embed presentations from Google Docs, but not other document types. You will need to find the URL for the Google Docs presentation that you want to display.

To find the URL of a Google Docs presentation:

  1. Publish your presentation in Google Docs.
  2. View your published document, then copy the URL from your browser's address bar. The URL will look something like this:
    http://docs.google.com/Presentation?docid=ddpqn8g5_0fx96zmmq&mm=en_GB
    
  3. Paste the URL into the Widget macro code on your Confluence page.

Here is an example of the Widget macro code for embedding a Google Docs presentation

{widget:url=http://docs.google.com/Presentation?docid=ddpqn8g5_0fx96zmmq&mm=en_GB}

Troubleshooting

Troubleshooting

If the URL given in the Widget macro does not work, the Widget macro displays an icon and the base URL. The icon will be linked to the full URL given in the macro code.

For example, the following code:

{widget:url=http://example.com/invalid}

will result in an image like the one below:

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

Sign up or Log in to add a comment or watch this page.


The individuals who post here are part of the extended Sun Microsystems community and they might not be employed or in any way formally affiliated with Sun Microsystems. The opinions expressed here are their own, are not necessarily reviewed in advance by anyone but the individual authors, and neither Sun nor any other party necessarily agrees with them.

Copyright 1994-2009 Sun Microsystems, Inc.
Powered by Atlassian Confluence
Sun Guidelines on Public Discourse Privacy Policy Terms of Use Trademarks Site Map Employment Investor Relations Contact