USING EMBED CODE

If you haven’t used Graphic News' responsive screen graphics or interactives before, an easy way to start is to use the embed code supplied by Graphic News. Embed code is a small piece of code (available at the point of download) that you can paste onto your web page. Interactives use an iframe and stay the same height as the screen width decreases. Responsive "screen" graphics use a div and get longer as the screen width decreases. Even if you host graphics locally on your own servers you can still use embed code.

As well as being an easy way to publish digital graphics, embed code also avoids compatibility issues associated with the way some Content Management Systems are constructed. Plus, if an interactive is hosted on a Graphic News server, your website will automatically display the intended font and the latest update. This is particularly important with SPORTLIVE graphics.

Graphics hosted by Graphic News are served using a cloud-based Content Distribution Network, which uses nodes all around the world to improve loading speed by delivering the pages from a server nearest to you. Our SPORTLIVE graphics also use a cloud-based load balancer to deliver the live data but there is an economic downside – Graphic News is charged for the bandwidth and the number of requests. Graphic News therefore reserves the right to request websites with high visitor numbers pay a small supplement to cover the direct costs of the load balancing.
  1. INTERACTIVES: These are in HTML, created in Tumult Hype. The embed code includes an iframe, something like this:
    • To resize: For responsives (post July 2015), set the width to 100% (ignoring the scale factor and height). For earlier non-responsive interactives, change the scale factor from 1.0 to whatever size you want, for example to 0.75 to reduce the graphic to 75%
    • https: Embed code obtained after July 6, 2016 is equally usable for http or https. For code obtained before then it was necessary to change http to https if your webpage was behind a paywall
    • Sportlive EventIDs, MatchIDs: Some graphics can be shown in different versions depending on the EventID in the iframe code. For example, an interactive Sportlive Tournament Guide could alternatively show a particular match if the ID for that event was inserted in the embed code. EventIDs are available in a downloadable text file....
  2. RESPONSIVE SCREEN GRAPHICS: These are created in Adobe Illustrator and converted to HTML. A screen graphic is essentially an html <div> so it can be included anywhere on a web page. To ensure that the images are displayed properly regardless of the protocol used by your page, e.g. http/https, a small piece of javascript is used to pull the images in from a Graphic News server.
  3. AMP EMBED CODE: Special embed code is also available for Accelerated Mobile Pages as there are strict rules on the use of javascript. For interactives, this just means using an amp-iframe instead of an iframe. For responsive graphics, the embed code displays the mobile version of the graphic only.
  4. VIDEO GRAPHICS: These are hosted on the Graphic News Vimeo channel for smoother streaming and better controls.
Websites may also host graphics themselves and use their own embed code, this reflecting where the graphics are hosted and how the website is structured. This is necessary if a graphic is modified or translated. If you host interactives yourself:
• You must make sure the graphic uses your own web fonts or the appearance will reflect whatever web font is available in the browser of the person viewing the graphic
• At least two members of your staff must be on our UPDATES e-alert list. This is particularly important if you are hosting Sportlive graphics