User:Matsch/Integrating your wiki content in other websites

This short how-to explains how you can integrate your wiki content into other websites via iframes or something the like.
Another use case of this how-to is to have two different (looking) wikis with the same content.

Goal edit

Additionally to your normal wiki, make your hard-earned content available to other websites with an easy way of integration. Alternatively you can create two wikis that look different but have exactly the same content (e.g. different branding).

Approach edit

We will create a new (sub) domain for your wiki which will have a different default skin set. This skin will hide all navigation, edit, and add personal features of the wiki and will only show the content area.

Advantages of this approach:

  • Easy to integrate it into other websites using iframes or something similar.
  • The skin can be customized as desired.
  • Visitors to the normal wiki won't see any difference
  • No modifications of MediaWiki core are necessary.

Steps edit

1. Create New (Sub-)Domain edit

Create a new (sub) domain (e.g. http://external.yourwiki.com) pointing to the directory of your MediaWiki installation. Both your normal address and the new sub domain should point to the same location. This will enable us to distinguish your normal wiki from the external one.

2. Create a New Skin edit

If you just want to create a second wiki with same content but different skin you can skip this step and use whichever skin you want in step 3 (instead of <<yourexternalskin>>).

See Manual:Skinning for additional instructions on how to do MediaWiki skins.

  1. Use your current skin or the MonoBook skin as a base for creating a new external skin. Copy all associated files and directories to a new name (e.g. <<YourExternalSkin>>).
  2. Edit the file $IP/skins/<<YourExternalSkin>>.php and delete the parts not necessary anymore as described below.

    This is what the current MonoBook.php looks like in MediaWiki 1.13.0 (partially):
    <div id="column-content">
    	<div id="content">
    
    <!-- [... 15 ADDITIONAL LINES OF SOURCE CODE ...] -->
    
    	</div>
    </div>
    <div id="column-one">
    	<div id="p-cactions" class="portlet">
    		<h5><?php $this->msg('views') ?></h5>
    		<div class="pBody">
    
    <!-- [... 63 ADDITIONAL LINES OF SOURCE CODE ...] -->
    
    </div><!-- end of the left (by default at least) column -->
    <div class="visualClear"></div>
    <div id="footer">
    

    For hiding the navigation, the tabs and the personal/user links you should delete everything from (including)

    <div id="column-one">
    

    to (including)

    </div><!-- end of the left (by default at least) column -->
    
  3. You can now also customize the CSS file $IP/skins/<<yourexternalskin>>/main.css (and all compatibility files like IE70Fixes.css, if necessary):
    1. Change the margins for the #content area:
      #content {
      	margin: 0; /* <== this one */
      	padding: 0 1em 1em 1em;
      	position: relative;
      	z-index: 2;
      }
      
    2. Remove the border around the #content area:
      #content {
      	background: white;
      	color: black;
      /*	border: 1px solid #aaa; <== delete or comment the two lines
      	border-right: none;     <== */
      	line-height: 1.5em;
      }
      
    3. Additionally you can hide the section edit links. Add the following at the end of your main.css:
      .editsection { display:none; }
      
    4. Any further modifications you wish to make for the external version of your wiki content...

3. Change your LocalSettings.php edit

For your wiki to know which skin it should use, we will create a switch statement, which sets $wgDefaultSkin according to the requested domain name.

In your $IP/LocalSettings.php replace

$wgDefaultSkin = 'currentskin';

with

switch( $_SERVER['HTTP_HOST'] ) {
    case "<<external.yourwiki.com>>":
	$wgDefaultSkin = '<<yourexternalskin>>';
	break;
    default:
	$wgDefaultSkin = 'currentskin';
}

4. Enjoy! edit

You can now put http://external.yourwiki.com or any specific page of your wiki in an <iframe> element on another website.

Alternative Approaches edit