Displaying Google Adsense in MediaWiki

This post shows how to insert code that displays ads in MediaWiki. The proposed methods use hooks instead of modifying the skin. This has two advantages:

  1. No need to modify each skin separately. This allows users to change skins and ads will be presented to them in the same logical place.
  2. It makes upgrades simpler. Hooks reside in LocalSettings.php which isn’t modified by MediaWiki version upgrades, unlike skins.

The examples below show how to insert ads into the header, footer and sidebar of each page. I’ve used the Google Adsense ad-serving code, but it could be easily replaced by the ad-serving code of any other ad network.

Header

We use the SiteNoticeAfter hook to place our ad code directly below the site-notice and above the article header.
header_ad
The following snippet should be added to your LocalSettings.php. You should modify the ad-code between the EOT lines to match yours. A 728x90px leader board fits well and usually has large number of available ads in AdSense.

$wgHooks['SiteNoticeAfter'][] = function(&$siteNotice, $skin) {
        $siteNotice .= <<< EOT
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
    style="display:inline-block;width:728px;height:90x"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="6440411535"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOT;
        return true;
};

Footer

The SkinAfterContent hook. allows us to display a banner right after the article content.
footer_ad
Most horizontal ads would fit nicely for this location. As before, the ad code goes between the EOT lines. This time, however, we need to wrap it in a <div> to center-align the ad.

$wgHooks['SkinAfterContent'][] = function(&$data, $skin) {
        global $myAdCode;
        $data .= '<div style="text-align:center;">';
        $data .= <<< EOT
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
    style="display:inline-block;width:728px;height:90x"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="6440411535"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOT;

        $data .= '</div>';
        return true;
};

Sidebar

sidebar_ad
Placing an ad in the sidebar, turns out to be a little trickier than the header and the footer. The SkinBuildSidebar allows us to insert ads between the Navigation portal and the ToolBox portal in the sidebar. However there are few caveats:

The first one, is that in the default Vector skin, the portals are collapsible. This may be a nice feature, but I’m not sure having an option to hide ads is such a good idea. Hence we add a little JavaScript snippet that makes the ad portal permanent.

Secondly, each portal in the sidebar has a title. The title of the portal containing the ads will be “Ads”. If your wiki is non-english, you’ll probably want to translate it. To do so, you simply need to create the page MediaWiki:Ads in your wiki and write the translation there.

Thirdly, the sidebar is a too narrow for 160x600px vertical skyscraper, which is the narrowest recommended vertical placement size. You could either use narrower ad size, which as Google AdSense warns have significantly less stock, or increase a bit the size of the sidebar. Increasing the size of the sidebar should be done per skin. For the default vector skin, the can be done by editing the MediaWiki:Vector.css page (creating it if necessary) and adding the following lines:

/* increase Vector sidebar width to accommodate ads */
div#mw-panel { width: 12em; }
div#p-Ads div.body {margin: 0em !important; }
div#footer, #mw-head-base, div#content { margin-left: 12em; }
#left-navigation { margin-left: 12em; }

If your wiki is in RTL language, you need to use a modified snippet:

/* increase Vector sidebar width to accommodate ads */
div#mw-panel { width: 12em; }
div#p-Ads div.body {margin: 0em !important; }
div#footer, #mw-head-base, div#content { margin-right: 12em; }
#left-navigation { margin-right: 12em; }

Below is the code that needs to be placed in LocalSettings.php. Again, you should replace the ad code between the EOT lines.

$wgHooks['SkinBuildSidebar'][] = function($skin, &$bar) {
        $out = <<< EOT
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
    style="display:inline-block;width:160px;height:600x"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="6440411535"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOT;
        $out .= "<script>$('#p-Ads').addClass('persistent');</script>";
        $bar['Ads'] = $out;
        return true;
};

The three types of ads can be previewed in this wiki.

17 thoughts on “Displaying Google Adsense in MediaWiki

  1. Alex

    Great Post!

    But I have a question. On my website I want to insert Adsense after the first and the second header in the article (I do not mean the article title at the top position, just headings in the text).

    How do I achieve this?

    I would also pay few bucks for a ready to use solution.

  2. Guy Post author

    Thanks, the way to do it is insert an add using one of the hooks, placing it inside a div and then placing the div in the designated place using javascript.

  3. Alex

    Thanks!

    An other Question. The method in your post would show ads on every page, but how to prevent it to appear on the main page for example.

    Some pages do not have content, but the ads would appear there. What to do in that case?

  4. Guy Post author

    I guess you could write some php code to check beforehand the wiki namespace of the page or its title and prevent showing the ads in some cases.

  5. Pingback: Displaying Google Adsense in MediaWiki | Guy Rutenberg | Affiliate News Board

  6. Elio

    Hello,

    Thanks for this very useful guide. I am having a bit of a problem, though, with the sidebar unit. I edit Vector.css as directed… but so far as I can see, it doesn’t “take” — no changes I make in Vector.css seem to actually have an effect on the Vector skin. It’s very baffling.

    I wonder if you might have any idea as to why that might be?

  7. Cem

    Hi,

    Thank you for this great tutorial. It’s work. But i have a question. I am using mobile version for Mediawiki. When i use this code, mobile version broken because this code seems mobile version too. How i fix that? Can you help?

  8. Pingback: MediaWiki投放广告代码的几种办法 | BioHos

  9. caddy

    hi there,
    i’m getting parse error when i’m trying to use ur code
    my wiki version is 1.17
    any idea why i get that error?

  10. Karthi

    Hi Guy,
    Thank you very much, it worked awesome but ads on the top header is aligning to left.
    Could you help to guide for making it center aligned?

  11. Nick Hood

    @Karthi – you could try to use the div variant posted here for the footer placement. That seems to be designed to align the ad block in the center.

  12. Pat

    I got it all to work with sitenotice, the script it present when I load the page. Sitenotice is present on the page. I hid it underneath the top bar element, but the area underneath where the actual ad appears should still be visible. But it’s not, the area for the ad is there when I inspect it, but nothing appears.

    I’m not sure if it’s an issue with my custom skin, or my adsense account. Will ads still load if sitenotice is obscured by other elements on the page?

  13. Pingback: #StackBounty: #google-adsense #mediawiki What is a "data-ad-slot" for Google Adsense and why is inline styling required? – TechUtils.in

Leave a Reply

Your email address will not be published. Required fields are marked *