Contents

MediaWiki Widgets Installation

Mediawiki Widgets allow for the use of a range of useful Web 2.0 widgets within MediaWiki articles. These allow for the inclusion of more dynamic, web based content within mediawiki pages.


Installation

To install the MediaWiki Widgets extension please follow these steps:

Install the Smarty PHP templating engine

The Widget extension uses Smarty PHP templating engine to provide simple templating functionality within widget pages. All parameters passed to widget are converted into Smarty parameters.

Install the Widget

  1. Download the Widget Extension and extract it to $IP/extension/ folder
  2. Add the following to LocalSettings.php:
    require_once("$IP/extensions/Widgets/Widgets.php");
  3. Create Widget Pages for each widget you wish to install in the Widgets Namespace. For further instructions visit the MediaWiki Widgets Repository.

Folder permissions

Also, $IP/extensions/Widgets/compiled_templates/ folder should be made writable by web server (this is where Smarty stores pre-compiled templates).

User rights

This extension adds Widget namespace, but due to potential security implications that can result from using insecure widget code, this namespace is only editable by users who have editwidgets permission (widgeteditor group is also created to add users to, see Help:User rights management for more details).

To allow widgets to be editable by sysops, add the following to your 'LocalSettings.php' file: 

$wgGroupPermissions['sysop']['editwidgets'] = true;


Currently Installed Widgets

The following widgets have been installed:



Usage and Examples

You can view a page with an example of each embedded in the page below.


Blip.tv Feed

To insert this widget, use the following code:


{{#widget:Blip.tv |id=329701 |width=400 |height=255 }} Width and hight are optional, 400x255 is a default, "id" is a video number from embed code URL (not blip.tv page URL).

Example




Feed

To insert this widget, use the following code:


{{#widget:Feed |feedurl=http://www.techpresentations.com/feed/ |chan=y |num=5 |desc=50 |date=n |targ=n }} ==== Parameters ====

  • feedurl - URL of the feed to show
  • chan - show channel info or not (y/title/n)
  • num - number of items to show (0 means all available)
  • desc - number of characters to show from description (0 means show full description)
  • date - show date (y/n)
  • targ - open links in new window (y/n)

Sample result




Flickr

This widget allows users to add a Flickr badge to a wikipage.

To insert this widget, use the following code:


{{#widget:Flickr|query=searchterm}} ==== Example ====


www.flickr.com



Flickr/SlideShow

This widget allows you to add a Flickr search slideshow to your wiki page.

To insert this widget, use the following code:


{{#widget:Flickr/SlideShow|query=searchterm|width=300|height=300}} Width and height are optional, 500 is a default. Note: Small sizes don't work very well in slideshow.

Sample result




Google Calendar

This widget allows you to add Google Calendar widget to your wiki page.

To insert this widget, use the following code:


{{#widget:Google Calendar |id=si8ocqn3duj6f8int3h57jm8qeunplut@import.calendar.google.com |color=528800 |id=p2m2av9dhrh4n1ub7jlsc68s7o@group.calendar.google.com |color=2952A3 |id=usa@holiday.calendar.google.com |color=B1440E }} ==== Parameters ====

  • id - is a calendar ID (including @calendar.google.com, come match user email addresses) - can be found on calendar settings page
  • title - new title if you want to override calendar title (optional)
  • height and width define calendar dimensions, 100%x600 is default (only width can be defined in %).
  • color - events color (hex value. e.g. 5229A3) - only color used in Google's wizard can be used.
  • bgcolor - events color (hex value. e.g. ffcc66)
  • weekstart - first day of the week (1-7)
  • lang - interface language (en, fr, ru and etc).
  • view - default view MONTH (default)/WEEK/AGENDA)
  • timezone - time zone defined as a string like "America/New_York", should be automatically detected if omitted
  • You can also trigger parts of the interface on and off:
    • showtitle - true (default)/false - shows title
    • shownav - true (default)/false - shows navigation arrows
    • showdate - true (default)/false - shows date
    • showtabs - true (default)/false - shows view tabs
    • showcals - true (default)/false - shows a calendar list
    • showprint - true (default)/false - shows a print icon
    • showtz - true (default)/false - shows timezone
    • border - true/false (default) - draws thin border around the widget
  • app - for Google Apps for Your Domain Calendars, specify the domain name for the account (

http://www.google.com/calendar/hosted/ yourdomain.com/render)

Example





Google Documents

Allows for the embedding of Google Docs in mediawiki pages.

To insert this widget, use the following code:


{{#widget:Google Document |key=dcn37mcz_28dq983f3t |width=500 |height=300 }} ==== Parameters ====

  • docid - docID parameter in document URL
  • width and height define document dimensions, 500x300 is default


Google Forms

This widget allows you to add Google Spreadsheet Forms to your wiki page.

To insert this widget, use the following code:


{{#widget:Google Form |key=po-s58YMwf85Q3UxRzdGOBw |width=600 |height=750 }} ==== Parameters ====

  • key - key parameter in emailing/embedding URL
  • width and height define form dimensions, 300x400 is default, but you might want to copy it from embed code since size depends on fields you have.

Example





Google Maps

This widget allows you to add Google Maps widget to your wiki page.

To use this widget include the following code in your page:


{{#widget:Google Maps |key=ABQIAAAAq_i4aTseMGLic8bgu1NQHRRuMGSDM4hOrlKevQrS9qsdJ_NOCxRsXLLNmhAg5xMn9btyuqHxCavIxw |width=600 |height=400 |lat=55.754796 |lng=37.621479 |zoom=12 |static=yes |centermarker=yes }} ==== Parameters ====

  • key - Google developer key for your site (you must get your own or it will not work).
  • height and width define map dimensions, 420x350 is default
  • lat - map center latitude
  • lng - map center longitude
  • zoom - zoom level (defaults to 16)
  • xml - URL of XML (KML/GeoRSS) data source (only one can be used for now) *
  • Markers:
    • centermarker - if set, then marker is added in the center of the map
    • Cusrom markers are defined using marker.name.lat and marker.name.lng
  • Controls:
    • maptypecontrol - buttons that let the user toggle between map types (such as Map and Satellite)
    • largemapcontrol - displays a large pan/zoom control used on Google Maps
    • smallmapcontrol - displays a smaller pan/zoom control used on Google Maps
    • smallzoomcontrol - displays a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps
    • scalecontrol - displays a map scale
    • overviewmapcontrol - displays a collapsible overview map in the corner of the screen
    • hierarchicalmaptypecontrol - displays a selection of nested buttons and menu items for placing many map type selectors

Map types

By default, map is displayed using dynamic user interface with movable map, controls, loadable XML and so on.

If you want static map image to be displayed, add static=yes which will tell widget to use Google Static Maps API. It does not support XML (KML or GeoRSS) and controls, but supports markers. Use this one when you want map to load faster and to avoid JavaScript slowing down your page. Static map is also used for graceful degradation when dynamic map is specified, but client doesn't support dynamic features like JavaScript.

Example





Google Presentations

Allows users to embed Google Presentation documents.

To insert this widget, use the following code:


{{#widget:Google Presentation|docid=dcn37mcz_22cmnwnwf8}} ==== Parameters ====

  • docid - docid parameter in document URL
  • size - (optional) allows you to change the size of presentation from small (410x342) to medium (555x451) or large (700x599)

Example





Google Spreadsheets

To insert this widget, use the following code:


{{#widget:Google Spreadsheet |key=po-s58YMwf85Q3UxRzdGOBw |width=500 |height=300 }} ==== Parameters ====

  • key - key parameter in document URL
  • width and height define spreadsheet dimensions, 500x300 is default, but you might want to copy it from embed code since size depends on fields you have

Security NOTE

Keep in mind that to use this widget you must make the document you're publishing to be open for everybody to see which might be undesirable for some uses (intranets, closed groups and etc.)

Example





Google Street View

This widget allows you to add Google Street View widget to your wiki page.
User:Sergey_Chernyshev

To insert this widget, use the following code:


{{#widget:Google Street View |key=ABQIAAAAq_i4aTseMGLic8bgu1NQHRRuMGSDM4hOrlKevQrS9qsdJ_NOCxRsXLLNmhAg5xMn9btyuqHxCavIxw |lat=40.758153 |lng=-73.985355 |yaw=370.64659986187695 |pitch=-20 |zoom=0 }} ==== Parameters ====

  • key - Google developer key for your site (you must get your own or it will not work).
  • lat - lattitude of street view location
  • lng - longitude of street view location
  • height and width define view dimensions, 420x350 is default
  • yaw - defines the rotation angle around the camera locus in degrees relative from true north. Yaw angles are measured clockwise (90 degrees is true east)
  • pitch - defines the angle variance "up" or "down" from the camera's initial default pitch, which is often (but not always) flat horizontal. (For example, an image taken on a hill will likely exhibit a default pitch that is not horizontal.) Pitch angles are measured with negative values looking up (to -90 degrees straight up and orthogonal to the default pitch) and positive values looking down (to +90 degrees straight down and orthogonal to the default pitch)
  • zoom - defines the zoom level of this view (effectively proscribing the "field of view") with 0 being fully zoomed-out. Different Street View locations may provide higher or lower zoom levels.

Example





Google Video

This widget allows you to add Google Video player to your wiki page.

To insert this widget, use the following code:


{{#widget:Google Video |docid=-4567104036778249401 |width=400 |height=326 }} Width and hight are optional, 400x326 is a default, "docid" is a docid parameter in the URL.

Example


[[Category:Widgets]]


Picasa

This widget allows you to add Picasa Web albums to your wiki page.

To insert this widget, use the following code:


{{#widget:Picasa |user=victor.laskin |album=5196794879516869825 |width=600 |height=400 |captions=1 |autoplay=0 }} ==== Example ====





Scribd

To insert this widget, use the following code:


{{#widget:Scribd |id=2881106 |access_key=key-2iauog0xawlbp6a4yxph |name=SS-MediaCard-2008-English-Long |width=450 |height=500 }} ==== Parameters ====

  • id is a number in the video page URL
  • access_key is a string that must be copied from embed code for the document
  • width and hight are optional, 450x500 is a default
  • name is optional title of the document

Example


SS-MediaCard-2008-English-Long - Upload a doc
Read this doc on Scribd: SS-MediaCard-2008-English-Long




SlideShare

This widget allows you to add SlideShare slideshows to your wiki page. It replaces original SlideShare extension.

To insert this widget, use the following code:


{{#widget:Slideshare |doc=semantic-media-wiki-semantic-forms-1205504882436734-4 |width=425 |height=348 }} Width and hight are optional, 425x348 is a default. "doc" is a parameter from embed code they give.

Related Links

hello kitty digital camera

Example





Widgetbox

This widget allows you to add any widget from Widgetbox widget library.

To insert this widget, use the following code:


{{#widget:Widgetbox|id=38032dd9-3488-4157-b0b9-a8c9c4a76223}} 'id' is panelId URL parameter in their embed code.

Example





Retrieved from "http://jaspercat.net/wiki/index.php?title=MediaWiki_Widgets"