Promote MDN

Love MDN? Help share the open-Web goodness with fellow web developers with material promoting the Mozilla Developer Network! Wallpapers, stickers, posters, animations, website badges, you name it, link to it from here.

WordPress plugin

The Promote MDN plugin for WordPress blogs is available to help people who blog about Web technologies or Mozilla-related products both promote their own blogs as well as MDN itself. It works in two ways:

1. When you publish a blog post, it automatically links key terms (such as "HTML", "JavaScript", and "CSS", among others) to the appropriate pages on MDN. This lets you write about Web technologies and automatically link to relevant documentation without having to do anything yourself. It's incredibly useful! The terms and their destination pages on MDN are configured using a special page here on MDN.
2. A special "Notify Mozilla of this post" checkbox is added to post editing pages; this option sends an email to the PR and MDN teams at Mozilla, so we can, if appropriate, mention your blog post in promotional material, tweet about it, and so forth. Checking this box doesn't guarantee a mention, but it will certainly call it to the attention of the right people!

Installing this plugin is helpful to you and to MDN both, so if you haven't already installed it, you should! If you want to help code on the plugin, go to the wp-promote-mdn GitHub repo.

JavaScript snippet

The recommended way to automatically link keywords to MDN pages is the Promote MDN WordPress plugin given above, but if your site or blog isn't running on WordPress, you can embed the JavaScript code below to do the same thing. This script does the same thing as the WordPress plugin; it converts known keywords in the page's content into links to the appropriate documentation on MDN.

You can configure the maximum number of keywords to turn into links by changing the value of maxLinks in the options object, o. You can also specify the elements to search, the class to use for the created link, and a set of additional keywords and target URLs to scan for.

To use this snippet, just embed it right before your closing </body> tag at the end of your content.

<script type="text/javascript" >
    (function (d,f,a) {
        // Your settings here
        var o = {maxLinks: 4, searchElements: ['div', 'h'], linkClass: 'link-to-mdn', extraLinks: {'keywordx': 'https://example.com'}};

        var s=d.createElement("script");s.type="text/javascript";if(s.f)
        {s.a=function(){if(s.f=="loaded"||s.f=="complete")
        {s.a=null;PromoteMDN(o)}}}else{s.onload=function()
        {PromoteMDN(o)}}s.src="https://raw.githubusercontent.com/riverspirit/promote-mdn-script/master/promote-mdn.js";
        d.getElementsByTagName("head")[0].appendChild(s)
    })(document,'readyState','onreadystatechange');
</script>

This snippet loads the primary code that does all the real work from Github. If you would prefer to host that code on your server yourself (for security, performance, etc.), just download the code from Github, add it to your site, and adjust the URL on line 9 of the code above to match.

Web site banner images

If you'd like to link to MDN from your web site using a promotional image, we have a number of them to choose from:

Feel free to use these on your web site to link to MDN!

Desktop wallpapers

First designed at the 2006 Firefox Developer's Summit by Sean Martell based on an idea from Chris Beard, this graphic became a smash hit at the SXSW conference in 2007. Now available as a desktop wallpaper in a variety of sizes:

• 800x600 pixels
• 1024x768 pixels
• 1280x1024 pixels
• 1440x900 pixels
• 1680x1050 pixels

These wallpapers are available for use under the terms of the Creative Commons Attribution-NonCommercial license. These wallpapers are also covered by the Mozilla Trademark Policy.