Using embed code

If you haven’t used interactive or responsive screen graphics before, an easy way to start is to use the embed code supplied by Graphic News. All you have to do is paste a small piece of code (available at the point of download) - the “embed code” onto your web page. If you host graphics locally you can also use embed code (see below).

  1. INTERACTIVES: These are in HTML created in Adobe Edge Animate. The embed code creates an iframe. For graphic GN12345 the embed code could be something like:

    <iframe src='' frameborder=’0’ scrolling=’no’ style=’transform: scale(1.0); -webkit-transform:scale(1.0); -mis-transform: scale(1.0); width=800px; height=600px’></iframe>

    • 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
    • EventIDs MatchID Sportlive: Some graphics can be shown in different versions depending on the event ID in the frame code. For example, a Sport Tournament Guide interactive could alternatively show a particular match if the ID for that event is inserted in the embed code. Event IDs are in a text file that can be downloaded.

      <iframe src='' frameborder=’0’ scrolling=’no’ style=’transform: scale(0.75); -webkit-transform:scale(0.75); -mis-transform: scale(0.75); width=800px; height=600px’></iframe>


  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. For example the embed code for graphic GN12345:

    <div id="GN12345"> < /div><script src="//" type="text/javascript">< /script>

    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.

ADVANTAGES OF USING THE EMBED CODE SUPPLIED BY GRAPHIC NEWS: 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.

For graphics hosted by Graphic News, a cloud based Content Distribution Network is used to share the load. This also improves speed as the pages are served from a server near to you, but there is an economic downside – Graphic News is charged for the bandwidth and the number of hits. Graphic News therefore reserves the right to request websites with high visitor numbers to host graphics on their own servers, or pay a small supplement to cover the direct costs.

HOSTING GRAPHICS LOCALLY: 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 system or 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
FAQ: How can I change the web font used by an interactive graphic
FAQ: How can I get alerted when an interactive or screen graphic is updated?

Welcome to Graphic News

Please get in the habit of logging in when you arrive as some pages may soon be restricted. If you are new to Graphic News there is a Website Guide to help you find your way around.

November 24, 2017 — Ai2HTML screen graphics - The script has been updated to allow multiple screen graphics to be published on the same web page. Click here for instructions

November 24, 2017 — Training - mobile graphics- The GN AI2HTML method is very fast and easy. It allows designers with conventional design skills to produce responsive “mobile” friendly graphics to meet news deadlines. Contact helpdesk @ if you would like to join our next training course.

If you need help or have questions at any time, please contact us