Once applied to your website, the Open Knowledge Ribbon will look like this:
CSS
Add the below code to the <head> section of your webpage, to include a small stylesheet:
<link rel="stylesheet" href="//a.okfn.org/html/oki/panel/assets/css/frontend.css"/>JavaScript
Add the below JavaScript:
<script src="//a.okfn.org/html/oki/panel/assets/js/frontend.js" type="text/javascript"></script>HTML
Lastly, there is the HTML. Where and how you add this depends slightly on your website, but the are two basic options.
Fixed Position
This is probably the most straightforward method, just add the following snippet immediately after the opening <body> tag:
<div id="ok-panel-wrapper" class="fixed-ok-panel"><div id="ok-panel" class="closed"><div class="container"><iframe src="//a.okfn.org/html/oki/panel/panel.html" scrolling="no"></iframe></div></div><a class="ok-ribbon" href="//okfn.org/"><img src="//a.okfn.org/html/oki/panel/assets/images/oki-ribbon.png" alt="Open Knowledge"></a></div>Note: this will cause the ribbon to appear in front of whatever is on the page. To avoid this, see below method.
Relative Position
This will add the ribbon into the flow of the document. First add the following immediately after the opening <body> tag:
<div id="ok-panel" class="closed"><div class="container"><iframe src="//a.okfn.org/html/oki/panel/panel.html" scrolling="no"></iframe></div></div>Then add this where you want the ribbon to appear (should be near the top of the page):
<div id="ok-panel-wrapper"><a class="ok-ribbon" href="//okfn.org/"><img src="//a.okfn.org/html/oki/panel/assets/images/oki-ribbon.png" alt="Open Knowledge"></a></div>Colour Options
With the above, default implementation, the ribbon will be green. There are also black and white options. For white on black add black to the ok-ribbon class, like so:
<a class="black ok-ribbon" href="//okfn.org/"><img src="//a.okfn.org/html/oki/panel/assets/images/oki-ribbon.png" alt="Open Knowledge"></a>and for black on white, add white:
<a class="white ok-ribbon" href="//okfn.org/"><img src="//a.okfn.org/html/oki/panel/assets/images/oki-ribbon.png" alt="Open Knowledge"></a>