How to Share Interactive Media on Different Platforms

Interactive Media and NewsML Users

Interactive Media is XHTML and Javascript combining video, images, documents, links, and other content into a shareable, embeddable, and interactive self-contained unit.  

There are two types of Smart/Interactive Media:

  • Smart Image: picture or infographic with animated hotspots
  • Smart Video: video with animated hotspots

News Components associated with Smart Multimedia include:

NewsComponent Role = "Smart Multimedia"

There are several Smart Multimedia subtypes. The subtypes are identified by a Property element of the DescriptiveMetadata element of the Smart Multimedia NewsComponent, with a FormalName of "SubType".

(./NewsComponent/DescriptiveMetadata/Property[@FormalName="SubType"]/@Value )

Smart Multimedia NewsComponent XPath:

In Business Wire NewsML, "Smart Multimedia" are contained within NewsComponent/ContentItem/DataContent as complete XHTML documents.  

The XHTML documents consist of content to be included on a site for presenting the "Smart Multimedia".

These elements will be contained in the <body> of the XHTML document. Only extract the div containing the Smart Multimedia and its contents and insert this into the HTML page.

We recommend extracting this data by XPath as the simplest method.

The following are the XPath queries for each of the NewsComponents:  

Smart Multimedia XPath (Role: "Smart Multimedia"):

/NewsML/NewsItem/NewsComponent/NewsComponent/NewsComponent[Role/@FormalName='Smart Multimedia']/ContentItem/DataContent/html/body/div 

Smart Multimedia may be retrieved using the following XPath, with the desired Role and Format included: 

/NewsML/NewsItem/NewsComponent/NewsComponent/NewsComponent[Role/@FormalName='<role>']/ContentItem[Format/@FormalName='XHTML']/DataContent/*[namespace-uri()='http://www.w3.org/1999/xhtml' and local-name()='html']/*[namespace-uri()='http://www.w3.org/1999/xhtml' and local-name()='body']/*[namespace-uri()='http://www.w3.org/1999/xhtml' and local-name()='div'] </role>

Smart Multimedia NewsComponent: 

<NewsComponent> 
<Role FormalName="Smart Multimedia" /> 
<AdministrativeMetadata> 
<Property FormalName="VID_ID" Value="9999999999"/> 
</AdministrativeMetadata> 
<DescriptiveMetadata> 
<Language FormalName="en" /> 
<Property FormalName="Rank" Value="1" /> 
<Property FormalName="SubType" Value="Smart Image" /> 
</DescriptiveMetadata> 
<ContentItem Duid="c72245248"> 
<Format FormalName="XHTML"/> 
<MimeType FormalName="text/xhtml"/> 
<DataContent> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title/> 
</head> 
<body> 
<div class="bwsmartmedia"><object data=https://player.vimeo.com/video/9999999999?background=true&amp;keyboard=false&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;backgroundColor=transparent width="1920" height="1080"> 
<p>iframes are not supported by your browser.</p> 
</object> 
</div> 
</body></html> 
</DataContent> 
</ContentItem> 
</NewsComponent>

Owned Website

Add the Interactive Media embed link or iFrame code to a designed page on your website.  

Interactive Media displays on most websites/CMS with full interactivity.  

How to Enable Interactive Media on Drupal

Use the <iframe> embed code. 

This is a sample of the embed code you’ll use on your site:

<iframe src="https://player.vimeo.com/video/999999999?background=true&amp;keyboard=false&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" width="1920" height="1080" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="embedcode"></iframe>

How to Enable Interactive Media on WordPress

Personal and Premium Accounts

With Personal and Premium Accounts, you can add the embed code or link and this will post as a link to view your Interactive Media.

  • Open your WordPress account and go to the Edit page.
  • Add Interactive Media embed code or link.
  • View Interactive Media link on your published page.

Business Accounts

The Business Account is needed to install the Embed.ly plugin. This is the only WordPress account type that allows Interactive Media to be embedded and viewed in full vs. having to click elsewhere.  

  • Open your WordPress Business account.
  • Add the Embed.ly plugin.
  • Add the embed code to your post or page.
  • View Interactive Media on your published page. 

How to Enable Interactive Media on Liferay  

Use the <iframe> embed code.

This is a sample of the embed code you’ll use on your site: 

<iframe src="https://player.vimeo.com/video/999999999?background=true&amp;keyboard=false&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" width="1920" height="1080" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" title="embedcode"></iframe>

How to Enable Interactive Media on Medium

Medium uses the Embed.ly plugin as an inclusive part of the platform so the embed appears automatically when added to a post or page. Your Interactive Media appears with full interactive functionality.

  • Open your Medium page (account needed; free to sign up.)
  • Add the embed code to your page.
  • View Interactive Media on your published page.

How to Share Interactive Media on Social Media

Use the Share Icons

Click the social media icon of your choice to post directly to the social site’s status page, which will populate an image card and a link to your Interactive Media.

Share the Embed Link

Use the preview link (https://view) instead of the embed link (https://embed) in order to display an image card that links to your Interactive Media. The embed link does not display an image card, only the preview link.

How to Enable Interactive Media on Facebook, LinkedIn, & Tumblr

  • Use the embed code.
  • Your Interactive Media will appear as an Image Card that links to the full viewing experience.  
  • Interactive Media will not appear in the Facebook feed or Facebook Canvas formats like native Facebook videos.

How to Enable Interactive Media on SnapChat

While you cannot embed or share your Interactive Media directly on SnapChat, you can share a web page that contains your Interactive Media and use Snap Ads Web View to direct viewers to that page. The Web View feature allows users to swipe up on an ad or story to open a webpage within Snapchat's in-app browser.

  • Create a Web Page with the iFrame
  • Set Up a Snap Ad with Web View: Create a Snap Ad using Snapchat's Ads Manager. In the ad setup, choose Web View as the action you want users to take. Insert the URL of your webpage that contains the iFrame.
  • Users Swipe Up to Access the Content: When viewers see your ad or story, they can swipe up to open the webpage with the iFrame inside Snapchat’s in-app browser.

How to Enable Interactive Media on X  

  • To embed through your X account, you need Player Card approval from X.
  • A Player Card allows you to display a video, audio, or media player inline within a post.
  • Use the embed code and your post will include your full Interactive Media.