Announcement: Tweet preview improvements

announcements
tweet-preview

#1

Today we’re announcing several improvements to previewing Tweets on the Ads API.

  1. It’s now possible to retrieve HTML previews for Scheduled Tweets.
  2. All of our preview endpoints now fully support video, meaning videos render and are playable directly from the HTML preview. This includes videos embedded in cards (with one exception, noted below).

These updates are available now.

For clarity, we’ll refer to the endpoints that enable previewing Tweets in the following way:

Preview

The Tweet preview endpoint is for Tweets that don’t yet exist. As a result, it supports many of the same parameters in our Tweet and Scheduled Tweet create endpoints. In order to support video, we’ve added the video_id parameter to this endpoint.

However, given that we’re still working toward adding card_uri support for this endpoint, it currently does not support Video Website Cards. All other cards—cards with preview_urls—work with Tweet preview, though.

The Tweet preview endpoint supports images, videos, and all cards, with the exception of Video Website Cards.

View

Our new Scheduled Tweet view endpoint works the same way as the existing Tweet view endpoint. The Scheduled Tweet ID is appended to the resource’s path (example below).

Both endpoints support images, videos, and all cards, including Video Website Cards. The Scheduled Tweet View endpoint also supports GIFs.

More

We’ve also worked to ensure that the dates in both Tweet view and Scheduled Tweet view reflect the created_at date for the former and the scheduled_at date for the latter. In addition, the Tweet action buttons—Reply, Retweet, Like, and Direct message—are now returned with Tweet preview, which wasn’t previously the case. Details matter.

Twitter Ads API Team

ps: If there are other issues—we are aware of a few—please let us know. We look forward to your feedback.


$ twurl -H ads-api.twitter.com "/2/accounts/18ce54d4x5t/scheduled_tweets/preview/919331596020285440"
{
  "request": {
    "params": {
      "scheduled_tweet_id": 919331596020285440
    }
  },
  "data": [
    {
      "platform": "web",
      "preview": "<!DOCTYPE html> <html> <head>   <meta charset="utf-8" />      <link href="https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.cb572b35a753a67c4416.css" rel="stylesheet" /> </head>  <body>       <div class="Tweet--timeline   Tweet   Tweet--web          "  data-tweet-id="919331596020285440">    <img class="Tweet-avatar" src="https://pbs.twimg.com/profile_images/756348317458509825/DTKcRCpS_normal.jpg" width="48" height="48" alt=""/>    <div class="Tweet-body">     <div class="Tweet-header">       <div class="Tweet-userData">         <a href="https://twitter.com/apimctestface" target="_blank" class="Tweet-userLink">           <span class="Tweet-name">API McTestface</span>                            <span class="Tweet-screenName">@apimctestface</span>         </a>       </div>         <span class="Tweet-timeLabel">         <span class="Tweet-timestamp">           <span class="Icon Icon--clock"></span>           Oct 31         </span>       </span>     </div>         <div class="Tweet-text " dir="">video w/o</div>           <div class="CardContainer   CardContainer--timeline       CardContainer--web    " >             <div class="VideoCard">      <div class="Card-video">           <iframe class="Card-videoIframe"       src="https://twitter.com/i/videos/static?json_rpc=1&square_corners=1&image_src=https%3A%2F%2Fpbs%2Etwimg%2Ecom%2Famplify_video_thumb%2F887777498917777408%2Fimg%2FcwavyNV2brPoEOlK%2Ejpg&video_url=https%3A%2F%2Fvideo%2Etwimg%2Ecom%2Famplify_video%2F887777498917777408%2Fvid%2F1280x720%2F35qJ3AUkmYIWfLGT%2Emp4"></iframe>      <button class="Card-videoPosterImageContainer">       <img alt="" class="Card-videoPosterImage" src="https://pbs.twimg.com/amplify_video_thumb/887777498917777408/img/cwavyNV2brPoEOlK.jpg" />       <span class="Card-videoPosterImagePlayButton Icon Icon--playButton"></span>     </button> </div>    </div>              </div>       </div>     <div class="Tweet-footer">         <div class="Tweet-actions ">   <button class="Tweet-action Tweet-action--reply" type="button">     <span class="Icon Icon--reply"></span>     <span class="Tweet-actionCount">##</span>   </button>   <button class="Tweet-action Tweet-action--retweet" type="button">     <span class="Icon Icon--retweet"></span>     <span class="Tweet-actionCount">##</span>   </button>   <button class="Tweet-action Tweet-action--favorite Tweet-action--like" type="button">     <span class="Icon Icon--heart"></span>     <span class="Tweet-actionCount">##</span>   </button>   <button class="Tweet-action Tweet-action--dm" type="button">     <span class="Icon Icon--dm"></span>   </button> </div>             <div class="Tweet-context Tweet-context--promotion">   <div class="Tweet-badge Tweet-badge--promotedBy">      <span class="Icon Icon--promoted"></span>      <span class="Tweet-badgeText">Promoted</span>   </div> </div>    </div> </div>   </body> </html> "
    },
    {
      "platform": "android",
      "preview": "<!DOCTYPE html> <html> <head>   <meta charset="utf-8" />      <link href="https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.cb572b35a753a67c4416.css" rel="stylesheet" /> </head>  <body>       <div class="Tweet--timeline   Tweet   Tweet--android          "  data-tweet-id="919331596020285440">    <img class="Tweet-avatar" src="https://pbs.twimg.com/profile_images/756348317458509825/DTKcRCpS_normal.jpg" width="48" height="48" alt=""/>    <div class="Tweet-body">     <div class="Tweet-header">       <div class="Tweet-userData">         <a href="https://twitter.com/apimctestface" target="_blank" class="Tweet-userLink">           <span class="Tweet-name">API McTestface</span>                            <span class="Tweet-screenName">@apimctestface</span>         </a>       </div>         <span class="Tweet-timeLabel">         <span class="Tweet-timestamp">           <span class="Icon Icon--clock"></span>           Oct 31         </span>       </span>     </div>         <div class="Tweet-text " dir="">video w/o</div>           <div class="CardContainer   CardContainer--timeline       CardContainer--android    " >             <div class="VideoCard">      <div class="Card-video">           <iframe class="Card-videoIframe"       src="https://twitter.com/i/videos/static?json_rpc=1&square_corners=1&image_src=https%3A%2F%2Fpbs%2Etwimg%2Ecom%2Famplify_video_thumb%2F887777498917777408%2Fimg%2FcwavyNV2brPoEOlK%2Ejpg&video_url=https%3A%2F%2Fvideo%2Etwimg%2Ecom%2Famplify_video%2F887777498917777408%2Fvid%2F1280x720%2F35qJ3AUkmYIWfLGT%2Emp4"></iframe>      <button class="Card-videoPosterImageContainer">       <img alt="" class="Card-videoPosterImage" src="https://pbs.twimg.com/amplify_video_thumb/887777498917777408/img/cwavyNV2brPoEOlK.jpg" />       <span class="Card-videoPosterImagePlayButton Icon Icon--playButton"></span>     </button> </div>    </div>              </div>       </div>     <div class="Tweet-footer">         <div class="Tweet-actions ">   <button class="Tweet-action Tweet-action--reply" type="button">     <span class="Icon Icon--reply"></span>     <span class="Tweet-actionCount">##</span>   </button>   <button class="Tweet-action Tweet-action--retweet" type="button">     <span class="Icon Icon--retweet"></span>     <span class="Tweet-actionCount">##</span>   </button>   <button class="Tweet-action Tweet-action--favorite Tweet-action--like" type="button">     <span class="Icon Icon--heart"></span>     <span class="Tweet-actionCount">##</span>   </button>   <button class="Tweet-action Tweet-action--dm" type="button">     <span class="Icon Icon--dm"></span>   </button> </div>             <div class="Tweet-context Tweet-context--promotion">   <div class="Tweet-badge Tweet-badge--promotedBy">      <span class="Icon Icon--promoted"></span>      <span class="Tweet-badgeText">Promoted</span>   </div> </div>    </div> </div>   </body> </html> "
    },
    {
      "platform": "iphone",
      "preview": "<!DOCTYPE html> <html> <head>   <meta charset="utf-8" />      <link href="https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.cb572b35a753a67c4416.css" rel="stylesheet" /> </head>  <body>       <div class="Tweet--timeline   Tweet   Tweet--iphone          "  data-tweet-id="919331596020285440">    <img class="Tweet-avatar" src="https://pbs.twimg.com/profile_images/756348317458509825/DTKcRCpS_normal.jpg" width="48" height="48" alt=""/>    <div class="Tweet-body">     <div class="Tweet-header">       <div class="Tweet-userData">         <a href="https://twitter.com/apimctestface" target="_blank" class="Tweet-userLink">           <span class="Tweet-name">API McTestface</span>                            <span class="Tweet-screenName">@apimctestface</span>         </a>       </div>         <span class="Tweet-timeLabel">         <span class="Tweet-timestamp">           <span class="Icon Icon--clock"></span>           Oct 31         </span>       </span>     </div>         <div class="Tweet-text " dir="">video w/o</div>           <div class="CardContainer   CardContainer--timeline       CardContainer--iphone    " >             <div class="VideoCard">      <div class="Card-video">           <iframe class="Card-videoIframe"       src="https://twitter.com/i/videos/static?json_rpc=1&square_corners=1&image_src=https%3A%2F%2Fpbs%2Etwimg%2Ecom%2Famplify_video_thumb%2F887777498917777408%2Fimg%2FcwavyNV2brPoEOlK%2Ejpg&video_url=https%3A%2F%2Fvideo%2Etwimg%2Ecom%2Famplify_video%2F887777498917777408%2Fvid%2F1280x720%2F35qJ3AUkmYIWfLGT%2Emp4"></iframe>      <button class="Card-videoPosterImageContainer">       <img alt="" class="Card-videoPosterImage" src="https://pbs.twimg.com/amplify_video_thumb/887777498917777408/img/cwavyNV2brPoEOlK.jpg" />       <span class="Card-videoPosterImagePlayButton Icon Icon--playButton"></span>     </button> </div>    </div>              </div>       </div>     <div class="Tweet-footer">         <div class="Tweet-actions ">   <button class="Tweet-action Tweet-action--reply" type="button">     <span class="Icon Icon--reply"></span>     <span class="Tweet-actionCount">##</span>   </button>   <button class="Tweet-action Tweet-action--retweet" type="button">     <span class="Icon Icon--retweet"></span>     <span class="Tweet-actionCount">##</span>   </button>   <button class="Tweet-action Tweet-action--favorite Tweet-action--like" type="button">     <span class="Icon Icon--heart"></span>     <span class="Tweet-actionCount">##</span>   </button>   <button class="Tweet-action Tweet-action--dm" type="button">     <span class="Icon Icon--dm"></span>   </button> </div>             <div class="Tweet-context Tweet-context--promotion">   <div class="Tweet-badge Tweet-badge--promotedBy">      <span class="Icon Icon--promoted"></span>      <span class="Tweet-badgeText">Promoted</span>   </div> </div>    </div> </div>   </body> </html> "
    }
  ]
}

How to preview a video website card?
Ads API Version 3
Failed to preview scheduled tweet using GET accounts/:account_id/tweet/preview/:tweet_id
#2

#3