Aired July 12, 2013
One of the amazing parts about Wikia is the number of extensions that exist that can be enabled on your wiki. These extension include MediaWiki and Wikia developed tools to help your communities grow, display content and manage content. This webinar will cover a selection of these extensions including: Calendar, Maps, Polls, Random Selection, Variables, References, DPL and Image map!
Slides & Transcript
Welcome to the our July webinar, Wiki Extensions.
I’m Sarah Morales a Director of Community Support at Wikia and today joining me is Tim Quievryn a Director of Technical Community Support and George Pribul, also known as Kirkburn, a Community Manager at Wikia.
Today we are going to overview the basic extensions available on your wiki and how to enable them. Tim & Kirkburn will then do a deep dive into available extensions that are a bit more advanced and you may not have heard of, and at the end we will do a Q&A. Feel free to ask questions at any time
So you may be thinking, so what exactly is an “extension”?
Extension is the technical term for a feature or tool on Wikia. This includes features like chat, blogs, comments and message wall. It is a part of our software that can be turned on or off, and extends a resource to you as an editor. Extensions can be almost anything - an editing tool, a wiki management tool and even a staff tool.
On wikia we have many extensions, a subset of which are optional. These can be either enabled as an admin or through a request to staff. To enable as an admin, you just need to visit Wiki Features, which can be found in the admin dashboard. All you have to do here is simply choose to enable or disable the feature.
Before any feature though is enabled, we highly recommend you talk with your community about it. Some extensions automatically disable other features, such as message wall, which when enabled, disables and archives talk pages. Others may encourage users to do certain actions, such as achievements. If you are on an active community, it’s important to make other admins and editors aware of your interest, and to discuss the decision with your community first. Once everyone agrees, you can then enable it there or contact staff if it is a feature that is not available or on by default.
One of the extensions we’ve been working on lately is Maps. Maps allows for the embedding of Google Maps or OpenLayers Maps into a wiki page. Maps are a great tool for many wikis, no matter what your subject matter is. If you are a wiki about museums, you could want to show where a museum is located. If your wiki is about a television show, you could want to show a map of where a scene was set. If you are a wiki about highways, you may want to map and highlight the roadway from end to end. Maps can enabled by request and there are lots of ways maps can come in handy.
The basic syntax of maps is shown here on the screen. The brackets may make it look like we are calling a template, but the pound sign indicates to the software that we are using a function of a specific feature. In this case, we are using Maps’ display_map function. In this first example here, we are simply asking Maps to display San Francisco. Because all we are doing is giving Maps extension the location (San Francisco), it fills in the map with its default settings. That means using the Google Maps service, marking a single point as indicated by the red marker, and showing the map view, not the satellite or any other view.
Now, if you want to dive down deeper and make a more visual or interactive map, you can define further by adding more specific parameters. In this example, I am adding layers onto the map to show the current traffic in San Francisco and the bicycle routes that run through this city. We will give you a link at the end of this section to show you how to find all the Maps parameters but let’s first look at one more example.
Here in this next example, I am making a few major changes to my map. This time, I am asking the map to display three different cities in the San Francisco Bay Area, and I am also changing the map service from Google Maps to OpenStreet Maps’ OpenLayers service. As you can see OpenLayers creates a very different and unique look to your map.
Let’s take a look at a wiki that relies on the Maps extension. Routes Wiki is a popular wiki that describes some of the historic and modern highways of France. They use maps to illustrate the route, length, and direction of these highways. In this particular example, Routes Wiki is showing the satellite view of Google Maps and has also drawn a red line between the two markers to indicate the end points and route of a particular roadway.
Here are some final tips about the Maps extension. The syntax on these maps can get tricky, especially if you’re just starting to use the extension. Not to worry! The Maps extension has a built in visual editor. Simply to go Special:MapEditor, click what tool what you would like to use from the top menu - marking a single point, making a line, drawing a cartographic shape - and then use the interface to zoom in, out, or pan towards the point you are trying to mark. Once you’ve made the map to your specifications, you can click “Export to wiki code” from the bottom toolbar, copy the output, and then paste it into your page. As for all the special things you can do with Maps, all of the available parameters and live examples can be found on the documentation pages linked here: http://www.semantic-mediawiki.org/wiki/Maps_examples
Let’s move on to Random Selection. This is enabled by default on your wiki. Many wikis like to have fun facts or trivia posted on the home pages or different portals on their wiki. While it’s always nice to see something unique about the wiki in that space, it’s even better if there’s a little variety to what the user sees. Random Selection lets you list a few different options before randomly choosing one to display.
Let’s look at a basic example. In this page, we are going to ask what is someone’s favorite color but actually have the color chosen randomly. To do so, you must start with a choose tag around the options you want the answer to be chosen from. Then each option must be wrapped in an option tag before you close out the choose tag. This will then result in a user, when they refresh the page, to be presented with a randomly-chosen colour. So, when you go this page, you could see any of three different colors - Yellow, Red, or Invisible.
Let’s change some of the choices to show you what else you can do with RandomSelection. The first thing you may notice is the weight parameter added to the option tag. The first option is three times as more likely to be chosen than the last option. You will also notice that we are calling a template as the option text. Any wikitext within the option tags will be rendered. So in this case, I am using the Born template, which says “I was born in PLACE A, but now I live in PLACE B” and using RandomSelection to randomly determine what PLACE A and B are.
Here is an example from the Aion Wiki. This randomly adds an image to the welcome message so all welcome messages are not the same cookie cutter style. That wraps up Random Selection. It’s a pretty neat tool with simple syntax. Remember, you can put any wikitext inside the option tag, from images to templates, to ordered or unordered lists. More details: http://www.mediawiki.org/wiki/Extension:RandomSelection
Another popular extension here at Wikia is the Calendar extension, which can be enabled by request. Wikia has offered a number of calendar extensions in the past but the one we offer today is called “SimpleCalendar”. Like Maps, Calendar is a neat visual add-on to your wiki no matter what the subject of your wiki is. It allows people to see events - be it new episodes, conventions, game release dates - in a visible and colorful manner.
This time, let’s look at the basic use of the calendar function. Just like maps, calendar looks like a template but with the calendar function denoted by a pound sign. The default displays a calendar of all twelve months in the current year. So here is the 2013 calendar on a wiki page.
And again, you can add more parameters to this tool to customize your results. Here we have asked to see only July 2013’s calendar and also asked to see the full names of the days of the week as opposed to the default abbreviations.
You can also use CSS to customize the calendar to fit your wiki’s theme and design. Here’s a basic example where we tweaked the calendar to have a purple header and more space between the days.
Here you can see a calendar in use on the Nick magazine wiki. Full list of all formats & CSS is at the Simple Calendar extension page on MediaWiki.org: http://www.mediawiki.org/wiki/Extension:Calendar
Many wikis have images that link you to a page. But sometimes, images have a lot of different subjects or themes and it’s helpful to link to more than one page. For example, let’s say you have a picture of the American founding fathers signing the Declaration of Independence. It wouldn’t make sense to have the image to link to just Thomas Jefferson when Benjamin Franklin, John Hancock, and others are clearly in the picture. So you may want to use an image map to make the specific signers’ face link to their page. Image map is enabled by default, and can be used in a variety of ways.
How does image map work? Here you can see the code syntax for the image from the previous slide. That one image links out to 5 different wikis depending where you click in it. I know this may look a bit daunting so lets break down what you are seeing.
As you noticed, there are specific terms that you can use within an imagemap. Not all of these are mandatory to use but they allow for different customization. Important ones you will see are:
- imagemap – tag to start & end, which you must use
- desc (or description) – specifies the location of the caption
- poly – coordinates for links - which tells the system which part of the image should link to which page.
- rect – rectangle coordinates
- circle – circle coordinates
- default – gives the default link if part of the image does not have one of the other shapes already drawn on it.
If you were to hit edit, the code for the image map would look like this. I am going to strip out some of the similar lines so we can focus on distinct sections.
So here is a simplified version of that. File is the actual name of the file that the image is pulled from, so the island and the caption that is displayed when you hover it over. This also include the size and placement of the image.
Next is circle & the coordinates. These are saying where you want the circle to be located, what it should link to, and how big the circle should appear. The first two number are the coordinates of the location, so 59 pixels in to the right and 119 pixels down. The 10 is stating that the circles radius is 10 pixels. Lastly is desc - which states that the caption for the image should appear in the bottom left. And on either side of these definitions you see the imagemap tag.
And this is the result, with each circle indicating a different linked page. If you click on the image a place that does not have a circle on it, you will be directed to the default link location.
Polls are a good way to add interactive content to your wiki. In a nutshell, you create a poll by adding the question and as many answers as you wish and then users can vote on them. All votes are tabulated automatically and display the totals to all viewers. They are a great way to engage new users and get them involved on your wiki. Polls are enabled by default and here you can see an example poll from Burnopedia.
How do you create a basic poll? All you need to use is the Poll tag. The first line under the tag is the question and this is followed by the answer options. In this example, we are asking the user what their favorite color is, followed by the options of red, green, blue, or other. You then add a closing poll tag to end the list of options.The number of options is unlimited, but we do recommend not going too crazy! Each user can only choose one option to vote on, but they can change their vote at any time.
Polls have a fluid width of whatever the width of the current article space is. To modify the design, you can wrap the poll in a template, as Burnopedia did, or you can also use local CSS. Here is an an example of the same poll from earlier with some CSS changes. You can see we adjusted the colors and font styling.
A couple of tips and information you should be aware of. To keep up engagement, we recommend updating your polls from time to time to keep up with your wiki topic. For example, if you are on TV wiki, you could update the poll weekly to match the latest episode.
So you are aware, anytime you edit the question or the options, the votes on that poll will reset. So, if you want to keep the already acquired votes, don’t adjust that poll, but rather create a new one.
So let’s move on to the Dynamic Page List extension, or DPL. This extension creates a list of pages based on a number of parameters you specifically define and will automatically update pages that now meet or no longer meet this criteria. This is often used on wikis for maintenance of pages, or lists of characters with certain features, and many other ways.
DPL has a lot of options and some queries can be quite complex. The most common form of DPL is just a standard bulleted list of pages. DPL requires a certain level of selection criteria which is typically a single category, but can include several categories and/or specific pages. For example, Aion Wiki uses it to display information such as skill or quests. Here you can see we are displaying a simple list of 5 skills from the Gladiator skills category. This extension is not enabled by default and must be requested.
Here is a more advanced version showing pages marked for deletion that is primarily used for wiki maintenance. As you can see in the query, I want to get a list of all pages in the Candidates for deletion category, but I do not want any of the Candidates for speedy deletion or copyright violations. Those are actually tabulated in another table. For sake of time, I won’t be going in to all the parameters here and what they mean. At the end of this segment, we will give you a few links so that you can review all of these parameters, but I wanted to show you what a more complex query looks like. So what will this result in?
Here you can see the table generated from the query in the last slide in the leftmost box. On the page I actually have 3 DPL queries, include: candidates for deletion, the candidates for speedy deletion and suspected copyright violations. This was created give users a chance to discuss a page that is tagged for deletion before the admins go ahead and delete them.
As I mentioned, DPL is a great tool but can get complex as well as taxing on the page load time, so a couple of pieces of advice:
- Works best with good categorization - since DPL often pulls from categories, its important to have a good category structure and to make sure to categorize pages properly
- Be Specific - DPL can display up to 500 results, so the more specific the query, the more useful your results will be.
- Only use where needed - Some extension can do what DPL does, but better. For example, if you’re only interested in seeing pages that are in two different categories, use category intersection extension instead of dpl as that tool is better suited for that specific job.
- List of DPL parameters visit the help page listed here.
Variables are shortcuts for small pieces of information that may be repeated and modified multiple times on a page. It is generally used within templates, and the extension is enabled upon request.
This slide shows the 3 variable functions in action. The first is used to define what the variable’s value is. The second is what you need to write, in order for this to display.
Here we are defining a variable called lastname with the value ‘Manley’, just like our very own Sarah Manley. To display Sarah’s last name, all you have to write on the page is . Now it’s convenient we made this a variable, because Sarah got married and changed her last name to Morales. So instead of having to update her last name in many places, all I have to do is update the variable’s value, so writing with ‘Morales’ will mean everything below it on the page will now use the new value.
The 3rd option here, allows you to both define and show the last name in one place. So rather than needing to have an extra lines of wikitext that doesn’t display, you can do it all at once. Later on the page, you still use to display the text. This also works if you want to change the variable half way through the page.
So, as a very basic example, if we were writing the biography of Sarah, here is where we would start. We define her last name, and state where she was born and went to college. Here she has the last name Manley.
Now in 2012, Sarah got married. So within our biography we want to change her last name from 2012 onwards to Morales. We can do that with the #vardefineecho as you see here. From this point on in the page, Sarah’s last name will change to Morales rather than Manley.
And here is the results of the above set of lines. So here you can see. Sarah is born, has her maiden name, gets married and her last name changes and all future mentions of her last name will appear as her married last name. So variables are helpful for repeating as well as updating terms, and can be adjusted on the fly at any time.
References are a great way to let users know where the information was gathered from - be it a website, book, magazine, movie, newspaper article, etc. They are enabled by default on your wiki and are very easy to use. You can see here on the Harry Potter wiki that a reference is being used to cite the date hermione was born.
The references extension requires you use two tags on a page. The first is <ref> which defines the text of the reference and adds the footnote link to the article. The second is <references/> which defines where you want the list of references to be placed on the page, which is typically at the very bottom of the article.
Here you can see an example of a sentence on the harry potter wiki, in which a fact about harry potter is being referenced to a particular book. Its all that easy to do and use on your wiki.
A couple of general points about extension on Wikia. First, when using an extension, it’s important to pay close attention to syntax. Most often a function won't run because the syntax used is incorrect more missing an important part like a close tag. This is why it’s important to always test out what you are adding.
Another area to remember is, just because an extension exists, it doesn't mean you need to use it on your wiki or on every page on your wiki. Adding lots of complex code slows down how fast a page can load and makes it trickier for others to edit. Use these tools where they work well, not just for the sake of using them.
If you know of an extension for mediawiki that Wikia is not yet using, feel free to contact us with information about it. We are constantly available extensions, and welcome new ideas. Please though do keep in mind that we can’t add everything There are security and performance concerns we need to keep in mind to maintain a fast and secure site.
- File:Templates Overview
- File:Wikia Mobile Apps & Skin
- File:Videos on your wiki
- File:Templates 101 Tips for editing & creating templates on Wikia
- File:Social Media & Your Wiki
- File:Best Practices for Structuring your Wiki Categories, Namespaces and Navigation
- File:SEO Tips and Tricks
- File:Wikia Webinars - Introducing the Message Wall & Wiki Navigation
- File:Managing your wiki - review of tools & special pages
- File:Mainpages 101 - How to make a great mainpage for your wiki
- File:Keeping The Peace - Best practices for handling conflict on your wiki
- File:Tips for Designing & Promoting Your Wiki
- File:Intro to CSS & Your Wiki Webinar
- File:What is your copyright - A webinar focused on content licensing with Creative Commons.wmv
- File:Wikia Copyright Basics Webinar
- File:Community Guidelines Webinar
- File:Tips & Tools for Community Discussions
- File:Advanced Ways to Customize Your Wiki Webinar
- File:Wikia Webinars - Admin Tools & Tips
|This image was uploaded by Fandom Staff.|