AMP - Social Media Sharing

Document created by Herberth Alvarado Employee on Nov 17, 2016Last modified by Herberth Alvarado Employee on Jan 26, 2017
Version 6Show Document
  • View in full screen mode

Maintainer: Andrea Zuniga

 

How to embed AMP in Twitter and Facebook?

Twitter

AMP's  self-detect for desktop/mobile modes is well suited for Twitter Player Card. Check out AMP Premier installation at https://twitter.com/FoxNewsVideo from a desktop browser. The iframe that FoxNews uses is here https://video.foxnews.com/v/video-embed.html?video_id=2682080460001 Be sure to click View Media.

 

The overall steps are here:

  1. You should host an iframe with the AMP player in a div that fills the full body of the page, and this will become the iframe that Twitter uses.
  2. Make sure the iframe and the player and it's config over HTTPS. (minus the stream). See the guidelines below. Repeatedly test access to the Player Card iframe until you need now browser warning about insecure content. Other customers have told us that non-secure content is OK after playback begins, so you want want to make auto play off for your embed.
  3. Post the Player Card link to twitter following Twitter's instructions.

 

For your video page, don’t forget the twitter tags. For an example of an the web page tags, Fox New's tags in Fox News Video appear as:

Web page tags

<meta name="twitter:card" content="player">

<meta name="twitter:url" content="http://video.foxnews.com">

<meta name="twitter:title" content="Former NFL star takes action after teens trashed home">

<meta name="twitter:description" content="Brian Holloway is using social media to help police">

<meta name="twitter:image" content="http://video.foxnews.com/images/foxnews/thumb-placeholder.png">

<meta name="twitter:player" content="https://video.foxnews.com/v/video-embed.html?video_id=2682080460001">

<meta name="twitter:player:width" content="435">

<meta name="twitter:player:height" content="251">

 

Share website link via Twitter

To add the tweet (share) option for your player's website, you can add it manually via the event "share" and the tweet API documentation, please check the follow links:

 

Based on these links you can add the functionality on the event listener share, here's a sample of the code:

 

Share link via Twitter

var config = {
  autoplay : true,
  mode:'html-auto',
  volumepanel : {
     direction : "vertical"
  },
  share: {
    enabled: true
  },
  media : {
    title : "NEC Front Row",
    poster : '../resources/images/hd_world123678.jpg',
    embed: {},
    link: "YOUR_WEBSITE_LINK",
    source : [{
      src : "YOUR_STREAM",
      type : "video/f4m"
       }, {
      src : "YOUR_STREAM",
      type : "application/x-mpegURL"
     }]
  }
};

 

function loadHandler(event) {
   amp = akamai.amp.AMP.create("akamai-media-player", config, readyHandler);
};

 

function readyHandler(event){
  amp.share.addEventListener('share',function(){
    shareHandler();
  });
};

 

function shareHandler(event) { 

  let strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
  let URL = "https://twitter.com/intent/tweet?text=Now%20Playing&url="+config.media.link+"&hashtags=playingnow";
  let win = window.open(URL, "_blank", strWindowFeatures);

}

 

Facebook

We intentionally retain non-Javascript modes of AMP's Flash mode (AMP SWF) in part for Facebook embeds which allow SWF's only with no JS access. Check out https://www.facebook.com/FoxNewsVideo. You need to make an additional, special flash-only version of the XML config (older format that you don't usually work with directly).

  1. You could go to any embed you have of AMP and run "amp.getFlashXML().toString()" (or in older versions "amp.player.getConfigXML()") or similar, in the browser consple and construct a Flash-only config from that.
  2. Save it as amp-flashonly.xml nearby your regular config(s). (It should then look something like this flash-only config here: http://video.foxnews.com/assets/akamai/resources/conf/config.xml? except this has more modules enabled).
  3. Then, you should play around with loading a URL as follows in your browser, readying the path for the OG tag. This URL is composed of several parts
    • http://www.yourdomain.com: Your domain
    • amp.premier/AkamaiPremierPlayer.swf? : the location of your swf player (here you can choose one the various builds distributed in AMP package)
    • settings_url=YOURFLASHONLYCONFIGPATH: the location of your Flash config. The one you just created.
    • &video_url=YOURFLASHSTREAMURL: your HDS stream.
    • The final URL should be something like: http://www.yourdomain.com/amp.premier/AkamaiPremierPlayer.swf?settings_url=YOURFLASHONLYCONFIGPATH&video_url=YOURFLASHSTREAMURL
  4. Put the appropriate OG tags in your video page, and then try to share it to your wall.
  5. The last step is to do some JavaScript, for this step, you should visit the Facebook Developer Documentation for further details. From AMP side, you can take a look at the samples section at the end of this response.

 

OG Tags: See below for http://video.foxnews.com examples of the tags, they are good examples overall:

Example tags

<meta property="og:title" content="Former NFL star takes action after teens trashed home">

<meta property="og:description" content="Brian Holloway is using social media to help police">

<meta property="og:url" content="http://video.foxnews.com">

<meta property="og:image" content="http://video.foxnews.com/images/foxnews/thumb-placeholder.png">

<meta property="og:type" content="video">

<meta property="og:video" content="http://video.foxnews.com/assets/video-player.swf?video_id=2682080460001&

amp;d=video.foxnews.com&amp;auto_play=true">

<meta property="og:video:secure_url" content="https://video.foxnews.com/assets/video-player.swf?

video_id=2682080460001&amp;d=video.foxnews.com&amp;auto_play=true">

<meta property="og:video:height" content="360">

<meta property="og:video:width" content="640">

<meta property="og:video:type" content="application/x-shockwave-flash">

<meta property="og:site_name" content="Fox News" />

For more details about OG tags see:

The Open Graph protocol

Open Graph Stories - Sharing - Documentation - Facebook for Developers

 

Tools to validate OG tags:

https://developers.facebook.com/tools/debug/sharing/

https://developers.facebook.com/tools/debug/og/object/

 

Quick Samples about sharing with:

AMP Premier - Samples - Share

AMP Premier - Samples - Share Page

AMP Premier - Samples - Share Player

 

Share Event

This allows you to bring your favorite share provider and maintain a consistent experience between the site and the player. You can call to add your own handling code:

Share event

amp.addEventListener("share", {}  )

Attachments

    Outcomes