Select Page

Yesterday I talked about twitter cards, today I’m going to expand on this topic when it comes to the twitter Player card.

As I covered in the last topic, there are a variety of different card types that can be imported into twitter. In my experimentation I have learned a few things when it comes to implementing the player card.

The player card is meant for audio or video on your site, and you need to make sure that you meet the following guidelines:

  1. Default to ‘sound off’ for videos that automatically play content
  2. Content greater than 10 seconds in length must not automatically play
  3. Include stop, pause and play controls

In addition, the following criteria must also be met:

  • Test your experience across all Twitter clients, including Twitter’s iPhone and Android apps, as well as twitter.com and mobile.twitter.com. Cards that do not work in all Twitter clients listed will not be approved.
  • Build your HTML page used in the iframe (referenced via twitter:player:stream) to be responsive, ensuring the video content fills the full width of any display area provided, across all clients.
  • Use HTTPS for your iframe, stream and all assets within your meta tags.

So, what I originally set out to do was update the sharing feature on my site gifnotjif.com to display a twitter photo card that would show the animated GIF image in the stream. Guess what? Animated GIFs, while supported on twitter, are not supported in the card feature just yet. I did some searching around to try and figure out how to accomplish this and that’s when I came across another site that was trying to accomplish the same thing I was. What they did was create an iframe player that would import the GIF and had controls to start and stop the loop.

I’m guessing until twitter rolls out support for animated GIFs in cards, this is the only workaround that I can find. So, how do you do it?

Well, first of all – you’re going to need to set up a shell for your embed HTML – this is the location that twitter looks at to pull in your media and display it in their timeline. Makes sense, because this way they don’t need to proxy content and they can embed it in the timeline.

I created a very rough, basic embed page in PHP that I was using to load my content:


<?php

$img = $_REQUEST['img'];
$cover = preg_replace('/\.[^.\s]{3,4}$/', '', $img);

?>

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta property="og:title" content="GIFnotJIF"/>
<meta property="og:description" content="Discover the best animated GIFs on the web and spread the creamy peanut buttery love with your friends."/>
<meta property="og:site_name" content="GIFnotJIF.com"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://gifnotjif.com/gifs/<?php echo $img?>">

<meta name="twitter:account_id" content="" />
<meta name="twitter:card" content="player">
<meta name="twitter:title" content="Look what I found on GIFnotJIF">
<meta name="twitter:creator" content="@jeromius">
<meta name="twitter:site" content="@jeromius">
<meta name="twitter:description" content="#gifnotjif">
<meta name="twitter:image:src" content="https://gifnotjif.com/gifs/<?php echo $img?>">
<meta name="twitter:image" content="https://gifnotjif.com/gifs/<?php echo $img?>">
<meta name="twitter:domain" content="gifnotjif.com">
<meta name="twitter:player" content="https://gifnotjif.com/gifs/<?php echo $img?>">
<meta name="twitter:player:width" content="435">
<meta name="twitter:player:height" content="244">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
</head>

<style>

body{
margin:0;
padding:0;
}

.container{
position:relative;
width:100%;
height:auto;
margin:0 auto;
}

.icon{
cursor:pointer;
float:left;
height:40px;
width:40px;
color:#FFFFFF;
transition: all 300ms ease-in-out;
}

.icon:hover{
color:#06F;
}

.play:before{
font-family:"FontAwesome";
content:"f04b";
font-size:30px;

}

.pause:before{
font-family:"FontAwesome";
content:"f04c";
font-size:30px;
}

.stop:before{
font-family:"FontAwesome";
content:"f04d";
font-size:30px;
}

.controls{
position:absolute;
bottom:-40px;
width:96%;
height:30px;
background:#000000;
z-index:1;
padding:2%;
}

.controls span{
float:right;
}

.setImage{
width:100%;
height:auto;
cursor:pointer;
}

.GIFholder{
display:none;
}

</style>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div id="indicator"></div>
<div class="container">
<div class="GIFcover">
<img class="setImage" src="https://gifnotjif.com/jpgs/<?php echo $cover?>.jpg"/>
</div>
<div class="GIFholder">
<img class="setImage" src="https://gifnotjif.com/gifs/<?php echo $cover?>.gif"/>
</div>
<div class="controls">
<div id="play" class="play icon"></div>
<div id="stop" class="stop icon"></div>
<span><a href="http://gifnotjif.com"><img src="http://gifnotjif.com/header_mini.jpg"></a></span>
</div>
</div>
<script type="text/javascript">

$(document).ready(function(){

$(".setImage").click(function(){
var myClass = $("#play").attr("class");
if (myClass == "play icon" || myClass == "icon play"){
$("#play").removeClass('play');
$("#play").addClass('pause');
$(".GIFcover").hide();
$(".GIFholder").show();
}
if (myClass == "pause icon" || myClass == "icon pause"){
$("#play").removeClass('pause');
$("#play").addClass('play');
$(".GIFholder").hide();
$(".GIFcover").show();
}
});

$("#play").click(function(){
var myClass = $(this).attr("class");
if (myClass == "play icon" || myClass == "icon play"){
$("#play").removeClass('play');
$("#play").addClass('pause');
$(".GIFcover").hide();
$(".GIFholder").show();
}
if (myClass == "pause icon" || myClass == "icon pause"){
$("#play").removeClass('pause');
$("#play").addClass('play');
$(".GIFholder").hide();
$(".GIFcover").show();
}
});

$("#stop").click(function(){
var myClass = $("#play").attr("class");
if (myClass == "pause icon" || myClass == "icon pause"){
$("#play").removeClass('pause');
$("#play").addClass('play');
}
$(".GIFcover").show();
$(".GIFholder").hide();
});

});

</script>
</body>
</html>

Basically, I’ve created a container that holds a static cover image and another container that holds the animated GIF. I wired in some basic jQuery functions to play/stop the animation by basically showing/hiding the image. It’s janky, but it’s the best way around it.

You can see an example of how this looks here.

Assuming I did this right, if I were to insert an iframe into this post, it should pull the player in like this:

And as we can plainly see, it’s pulling in the player correctly!

There are a few things that I’ve noticed while going through the approval process from twitter:

1. You must meet their guidelines – play controls are a must, they will deny you if there aren’t any controls.

2. Your source file (in this case, the animated GIF) MUST be pulled from a secure location. That means you will need to have a SSL cert on your site.

It might take a couple tries to get through their approval process, I’m still waiting on approval, but this should meet all their guidelines for a player card.

Once it’s approved, it means you can just add an HTML link in twitter and your content will be replaced by the player card. Cool stuff!

This example shows how you can implement a player for animated GIFs, but the same steps can be taken if you had a media player on your site or wanted to share audio.

 

UPDATE 6/26/2014:

I have submitted this several times to twitter, and while fulfilling the requirements, it doesn’t look like I’m getting approval anytime soon. I think they have reserved this for the “big boys” and have locked out lowly devs from using these. You can still integrate your content from any of the big players (vimeo, YouTube, etc…) without any issue. I won’t give up, but right now – seems like I’m stuck in the age old struggle of little guy v. big corporation.