Widget Connector Macro

Using the Widget Connector

To add the Widget Connector to a page:

1. In the Confluence editor, choose Insert > Other Macros.
2. Find and select the required macro.

Speeding up macro entry with autocomplete:

To edit an existing macro: Click the macro placeholder and choose Edit. A macro dialog window will open, where you can edit the parameters of the macro.

Parameters

Parameters are options that you can set to control the content or format of the macro output. Where the parameter name used in Confluence storage format or wikimarkup is different to the label used in the macro browser, it will be listed below in brackets (example).

Examples of macro sources

Google Gadgets

You 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
   

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
   

Widgetbox widgets

You will need to find the URL for the Widgetbox widget you want to display.

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

1. Ensure you are logged in to Widgetbox and that you are viewing the Widgetbox Gallery.
2. Find the widget you want then click its name, such as 'cyber-pet'.
3. The widget's summary page will open. Within the Get Widget section, click the Atlassian Confluence icon . The Widgetbox Add to Confluence dialog box appears, containing the URL required for the Widget Macro.
   If you cannot see this icon, click the more... link to reveal it.
4. In the Widgetbox Add to Confluence dialog box, click Copy.

5. Copy the URL from your browser's address bar. The URL looks something like this one:

   http://widgetbox.com/confluence/b8327e33-c8eb-4a38-b842-fba866ffdd28
   

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 on YouTube. Choose Share.

4. Choose Options, located under the video's URL.

5. Choose Long link, then copy the long URL. It looks something like this:

   http://au.youtube.com/watch?v=-dnL00TdmLY
   

   
   Note: You must use the long YouTube URL. The shortened URL (like this one: http://www.youtu.be/<video_key>) does not work in the widget connector.  If you are unable to view the video in some browsers, use https: rather than http in your link.

    

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
   

Yahoo Video

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

To find a Yahoo video's URL:

1. Go to Yahoo Video and search for the video you want.
2. Click the title of the video, such as 'Wiki Technology Trend: Past, Now and Future'.

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.yahoo.com/watch/423158/2424140
   

   If you are unable to obtain a unique URL from your browser's address bar, click the envelope (Share) icon on the lower section of the video screen and copy the contents of the Link field.

Dailymotion Video

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

To find a Dailymotion video's URL:

1. Go to Dailymotion and search for the video you want.
2. Click the title of the video, such as 'Wiki Technology Trend: Past, Now and Future'.

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://www.dailymotion.com/user/spacevidcast/video/x7zevj_spacevidcast-2009-promo-video_tech
   

   If you are unable to obtain a unique URL from your browser's address bar, click Menu at the lower right section of the video screen, select URL & Embed Code and copy the contents of the Link field.

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 Web Site's Widget URL box in the Macro Browser.

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
   

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/
   

blip.tv

This integration is currently broken. Please refer to CONF-27266 for details of the issue.

Viddler

This integration is currently broken. Please refer to CONF-27267 for details of the issue.

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 URL displays a slide show of Flickr photos that are tagged with the word 'Atlassian' http://www.flickr.com/photos/tags/atlassian/

Flickr Photos from a Specific User

This URL displays a slide show of photos from the Flickr photostream of user 'Atlassian': http://www.flickr.com/photos/atlassian/

Flickr Photos from a Specific Set

This URL displays a slide show of Flickr photos from the set 'Melbourne Cup - November 2008' created by user 'Atlassian': http://www.flickr.com/photos/atlassian/sets/72157608657271078/

A Specific Flickr Photo

This URL displays a slide show of photos from the Flickr photostream of the user 'Atlassian', starting with a specific photo: http://www.flickr.com/photos/atlassian/3003538919/

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
   

Note:

Twitter

Note: Due to a recent change to the Twitter API, the process for displaying Tweets has changed. The following instructions relate to v 2.1.6 of the Widget Connector plugin. Earlier versions of the Widget Connector no longer display tweets correctly. 

To embed a single tweet:

1. In Twitter, navigate to the tweet you wish to embed and choose Details to display just that tweet in your browser. 
2. Copy the page URL (the URL should be in the following format,  https://twitter.com/atlassian/status/346976521250037760).
3. In Confluence, paste the URL into the Widget Connector.
4. The single tweet will display, like the one below.
   

To embed a dynamic list of tweets:

1. In Twitter, create a Widget  (go to Settings > Widgets).
2. Configure the widget to display the tweets you wish to embed (for example, a user timeline, list of tweets or hashtag search).
3. Save the widget, then copy the page URL (the URL should be in the following format, https://twitter.com/settings/widgets/354381809263472640/edit)
4. In Confluence, paste the URL into the Widget Connector.
5. The list of tweets will display, like the one below. 
   

FriendFeed

To display the latest messages from a FriendFeed user, add the user's FriendFeed link as the URL in the Widget macro. For example:

BackType

To display the latest blog or website comments from a BackType user, add the user's BackType widget link as the URL in the Widget macro. For example:

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 'Using JIRA & Greenhopper for Agile Development'.

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/jleyser/using-jira-greenhopper-for-agile-development-presentation
   

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.

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.

Google Docs Presentations

This integration is currently broken. Please refer to CONF-24927 for details of the issue.

Google Calendar

You can embed a Google Calendar into your page and to do this, you will need to add the URL for the Google Calendar that you want to display.

To find the URL for a Google Calendar:

1. Log in to Google Calendar.
2. In the calendar list on the left side of the page, ensure the appropriate calendar is selected, click the down-arrow button next to the calendar name and then select the Calendar settings option.
   (Alternatively, if available, click the Manage Calendars link at the bottom of the calendar list and then click the name of the appropriate calendar.)
3. In the Calendar Address section, click the HTML button. A pop-up message with your calendar's public URL appears.

4. Copy the URL from this pop-up message. The URL looks something like this:

   http://www.google.com/calendar/embed?src=somebody%40example.com&ctz=Australia/Sydney
   

5. Paste the URL into the Widget macro code on your Confluence page.

Wufoo HTML Form Builder

To display an HTML form built in the Wufoo HTML Form Builder, add the form's link as a URL to the Widget Macro. For example:

http://examples.wufoo.com/forms/contact-form/

Wufoo Reports

To display a Wufoo Report built using the Wufoo Report Manager, add the report's link as a URL to the Widget Macro. For example:

http://examples.wufoo.com/reports/example-satisfaction-survey-report/

Get Satisfaction social support application

To display a feedback form for a Get Satisfaction community, add the community or company link as a URL to the Widget Macro. For example:

http://getsatisfaction.com/atlassian

Troubleshooting

If the URL given in the Widget Connector macro does not work, the macro displays an icon and the base URL.

For example, the following code:

http://example.com/invalid

will result in an image like the one below:

Code examples

See:

• Confluence Wiki Markup for Macros
• Confluence Storage Format for Macros