IMPORTANT NOTE : The header uses the hashchange event system to navigate to the project infos page and grid and make sure the user has those pages in his history.
Please make sure the routing system of your project is not conflicting with the hashchange event system.
The header has a dependency on jquery to work. You need to add Jquery to your HTML. The framework was built with the version 2.2.4 of Jquery.
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/lib/jquery-2.2.4.min.js"><\/script>')</script>After that, you need to call the load_framework.js file on our prod server and initialize it. The index options that you can pass are described below.
<script src="https://interactive-pip.nfb.ca/static/js/load_framework.js"></script>
<script>
var indexOptions = {
currentProjectId: 117,
base_url: {
fr: "http://grasslands.nfb.ca/",
en: "http://laplaine.onf.ca/"
}
}
load_framework.init(indexOptions);
</script>##Css The header css is loaded via javascript (for environnement testing on our side) but if you want the small flash where the html is not styled when you load the page, you can add to your header the css of the header on our prod server.
<link rel="stylesheet" type="text/css" href="https://interactive-pip.nfb.ca/static/css/header.min.css">| Parameter | Type | Description |
|---|---|---|
| currentProjectId (required) | number | The ID of your project in the interactive framework CMS. This will ensure that it’s your project that is opened when you click on “Get more info” in the header. |
| base_url | object | This is the url in french and in english of your project. This will ensure that the language toggle works. If your project is only available in one language, just set one property. |
| inverted | boolean | By default the navbar is white (false). If you want to change the navbar to black, add this parameter with the value true. |
| displaySoundToggle | boolean | By default, the sound toggle is displayed (true). If there is no sound in your project, you can add this property and set it to false. |
| forceLanguage | string | "en" or "fr". By default, the language is set by determining if nfb or onf is present in the url. If you want to overwrite it, you can pass that variable. |
Here is the events you can listen :
| Parameter | Description |
|---|---|
| ifw_openOverlay | Event will be fired when the user opens the overlay. |
| ifw_closeOverlay | Event will be fired when the user closes the overlay. |
| ifw_muteSound | Event will be fired when the user mutes the sound. |
| ifw_unmuteSound | Event will be fired when the user unmutes the sound. |
| ifw_enterFullscreen | Event will be fired when the user enters fullscreen mode. |
| ifw_exitFullscreen | Event will be fired when the user exits fullscreen mode. |
| ifw_headerLoaded | Event will be fired when the header is loaded |
You can find a file in the repo with examples of how to assign events. Here is an example :
$(document).on( "ifw_closeOverlay", function() {
console.log('overlay close');
});To make the Twitter and Facebook share button works, you need to ensure that this metadata is provided in your html:
| Metas | Description |
|---|---|
| og:title | The title of the page. |
| og:description | A brief description of the content, usually between 2 and 4 sentences. This will displayed below the title of the post on Facebook. |
| og:image | The URL of the image that appears when someone shares the content to Facebook. See facebook docs for images size. |
| og:image:width | The width of the og:image. Better to include it to avoid that the first person to share has no image. doc |
| og:image:height | The height of the og:image. Better to include it to avoid that the first person to share has no image. doc |
| twitter:description | A description that concisely summarizes the content as appropriate for presentation within a Tweet. You should not re-use the title as the description or use this field to describe the general services provided by the website. Platform specific behaviors: * iOS, Android: Not displayed * Web: Truncated to three lines in timeline and expanded Tweet |
If your project doesn’t have a custom fav icon, please use this code in your html to use the NFB fav icon and apple-touch-icon.
<link rel="shortcut icon" type="image/ico" href="https://media1.onf.ca/medias/favicon.ico" />
<link rel="apple-touch-icon" type="image/ico" href="https://media1.onf.ca/medias/apple-touch-icon.png" />The language of the header is based on the domain. (If "nfb" is in the url, the header will be in english, if "onf" is in the url it will be in french). If it's not finding any of that in the url the language of the header will be english. If you want to test on local in french you can add ?language=fr to your url.
You can find an example of a 404 page in the repo. You can change the background for an image of your project. Recommanded file size : 2048x1152.
There is also a file in the repo with example of how to track a page views and events.
google_analytics.gaTrack({
language: "en",
name: "testing",
ua_code: "madeup1",
pageview: "page"
});google_analytics.gaTrack({
language: "fr",
name: "testing",
ua_code: "madeup2",
event: "auto_begin"
});The pixel base code tracks activity on your website, providing a baseline for measuring specific events. Copy the base code below and paste it between the header tags on every page of your website:
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1722751167968328');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" src="https://www.facebook.com/tr?id=1722751167968328&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->