Tweet Preview API with Card

VelimirLes · 2015-07-28T00:14:53.272Z

We are using the Tweet Preview API https://dev.twitter.com/ads/reference/get/accounts/%3Aaccount_id/tweet/preview to display embedded tweet previews for existing tweets, and while composing Cards.

Using the accounts/:account_id/tweet/preview endpoint and providing a status and a card_id provides an i-frameable document. The document includes all the DOM elements for displaying the card (divs with classes CardContainer, BasicAppCard, etc.) But the included css (in this example https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.2531ed5be5dfa579b54d.css) includes a CSS rule to hide the card:

.CardContainer--web .BasicAppCard {
    display: none;
}

which prevents the card from being displayed.

We can modify the display property using Javascript within the iframe, but it seems like this card container should be visible, particularly since card_id is a parameter on the preview API.

Is there something we’re missing? How do you show the card section of the preview when providing card_id to the preview API without modifying the DOM after rendering?

andrs · 2015-07-30T21:48:29.302Z

Hey @VelimirLes - thanks for raising this. This sounds a little odd. Could you give us an example request using twurl that returns a preview HTML that is not displayed? This will help us understand what is happening and if there is indeed an issue.

VelimirLes · 2015-08-04T22:58:45.019Z

hey @andrs,

The following is a response from the preview API when a card is attached:

twurl -H "https://ads-api.twitter.com" "/0/accounts/18ce53y91ub/tweet/preview?card_id=siv0&status=Install now"

    {
  "data_type": "tweet_preview",
  "data": [
    {
      "platform": "web",
      "preview": "<!DOCTYPE html><html><head>  <meta charset=\"utf-8\" />    <link href=\"https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.f96d9083b56b9154f617.css\" rel=\"stylesheet\" /></head><body>    <div class=\"Tweet Tweet--timeline   Tweet--web      \" dir=\"\" data-tweet-id=\"\">  <img class=\"Tweet-avatar\" src=\"https://pbs.twimg.com/profile_images/556174881407004672/gpsecbNn_normal.jpeg\" width=\"48\" height=\"48\" alt=\"\"/>  <div class=\"Tweet-body\">    <div class=\"Tweet-header\">      <div class=\"Tweet-userData\">        <a href=\"//twitter.com/OldWeirdGrandpa\" target=\"_blank\" class=\"Tweet-name\">Old Weird Grandpa</a>        <a href=\"//twitter.com/OldWeirdGrandpa\" target=\"_blank\" class=\"Tweet-screenName\">@OldWeirdGrandpa</a>      </div>      <small class=\"Tweet-timeLabel\">        <span class=\"Tweet-timestamp\">          <span class=\"Icon Icon--clock\"></span>                  </span>      </small>    </div>    <div class=\"Tweet-text \" dir=\"\">Install now</div>      <div class=\"CardContainer  CardContainer--timeline     CardContainer--web   \">    <div class=\"BasicAppCard\">  <img src=\"http://is3.mzstatic.com/image/pf/us/r30/Purple1/v4/d1/e7/a9/d1e7a991-ece5-85fd-8d63-1a97e1cca6ae/mzl.likgmbke.100x100-75.jpg\" class=\"BasicAppCard-icon\" alt=\"Hearthstone: Heroes of Warcraft icon\" />  <div class=\"BasicAppCard-metadataContainer\">    <div class=\"BasicAppCard-title\">Hearthstone: Heroes of Warcraft</div>    <div class=\"BasicAppCard-price\">      <span class=\"BasicAppCard-appleAppStorePriceLabel\">          Ratings/pricing not available for preview      </span>      <span class=\"BasicAppCard-googlePlayPriceLabel\">          Ratings/pricing not available for preview      </span>    </div>    <div class=\"BasicAppCard-description\"></div>    <button class=\"BasicAppCard-cta Card-button\" type=\"button\">      INSTALL    </button>  </div></div></div>    <div class=\"Tweet-context Tweet-context--promotion\">      <div class=\"Tweet-badge Tweet-badge--promotedBy\">        <span class=\"Icon Icon--promotedGray\"></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.f96d9083b56b9154f617.css\" rel=\"stylesheet\" /></head><body>    <div class=\"Tweet Tweet--timeline   Tweet--android      \" dir=\"\" data-tweet-id=\"\">  <img class=\"Tweet-avatar\" src=\"https://pbs.twimg.com/profile_images/556174881407004672/gpsecbNn_normal.jpeg\" width=\"48\" height=\"48\" alt=\"\"/>  <div class=\"Tweet-body\">    <div class=\"Tweet-header\">      <div class=\"Tweet-userData\">        <a href=\"//twitter.com/OldWeirdGrandpa\" target=\"_blank\" class=\"Tweet-name\">Old Weird Grandpa</a>        <a href=\"//twitter.com/OldWeirdGrandpa\" target=\"_blank\" class=\"Tweet-screenName\">@OldWeirdGrandpa</a>      </div>      <small class=\"Tweet-timeLabel\">        <span class=\"Tweet-timestamp\">          <span class=\"Icon Icon--clock\"></span>                  </span>      </small>    </div>    <div class=\"Tweet-text \" dir=\"\">Install now</div>      <div class=\"CardContainer  CardContainer--timeline     CardContainer--android   \">    <div class=\"BasicAppCard\">  <img src=\"http://is3.mzstatic.com/image/pf/us/r30/Purple1/v4/d1/e7/a9/d1e7a991-ece5-85fd-8d63-1a97e1cca6ae/mzl.likgmbke.100x100-75.jpg\" class=\"BasicAppCard-icon\" alt=\"Hearthstone: Heroes of Warcraft icon\" />  <div class=\"BasicAppCard-metadataContainer\">    <div class=\"BasicAppCard-title\">Hearthstone: Heroes of Warcraft</div>    <div class=\"BasicAppCard-price\">      <span class=\"BasicAppCard-appleAppStorePriceLabel\">          Ratings/pricing not available for preview      </span>      <span class=\"BasicAppCard-googlePlayPriceLabel\">          Ratings/pricing not available for preview      </span>    </div>    <div class=\"BasicAppCard-description\"></div>    <button class=\"BasicAppCard-cta Card-button\" type=\"button\">      INSTALL    </button>  </div></div></div>    <div class=\"Tweet-context Tweet-context--promotion\">      <div class=\"Tweet-badge Tweet-badge--promotedBy\">        <span class=\"Icon Icon--promotedGray\"></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.f96d9083b56b9154f617.css\" rel=\"stylesheet\" /></head><body>    <div class=\"Tweet Tweet--timeline   Tweet--iphone      \" dir=\"\" data-tweet-id=\"\">  <img class=\"Tweet-avatar\" src=\"https://pbs.twimg.com/profile_images/556174881407004672/gpsecbNn_normal.jpeg\" width=\"48\" height=\"48\" alt=\"\"/>  <div class=\"Tweet-body\">    <div class=\"Tweet-header\">      <div class=\"Tweet-userData\">        <a href=\"//twitter.com/OldWeirdGrandpa\" target=\"_blank\" class=\"Tweet-name\">Old Weird Grandpa</a>        <a href=\"//twitter.com/OldWeirdGrandpa\" target=\"_blank\" class=\"Tweet-screenName\">@OldWeirdGrandpa</a>      </div>      <small class=\"Tweet-timeLabel\">        <span class=\"Tweet-timestamp\">          <span class=\"Icon Icon--clock\"></span>                  </span>      </small>    </div>    <div class=\"Tweet-text \" dir=\"\">Install now</div>      <div class=\"CardContainer  CardContainer--timeline     CardContainer--iphone   \">    <div class=\"BasicAppCard\">  <img src=\"http://is3.mzstatic.com/image/pf/us/r30/Purple1/v4/d1/e7/a9/d1e7a991-ece5-85fd-8d63-1a97e1cca6ae/mzl.likgmbke.100x100-75.jpg\" class=\"BasicAppCard-icon\" alt=\"Hearthstone: Heroes of Warcraft icon\" />  <div class=\"BasicAppCard-metadataContainer\">    <div class=\"BasicAppCard-title\">Hearthstone: Heroes of Warcraft</div>    <div class=\"BasicAppCard-price\">      <span class=\"BasicAppCard-appleAppStorePriceLabel\">          Ratings/pricing not available for preview      </span>      <span class=\"BasicAppCard-googlePlayPriceLabel\">          Ratings/pricing not available for preview      </span>    </div>    <div class=\"BasicAppCard-description\"></div>    <button class=\"BasicAppCard-cta Card-button\" type=\"button\">      INSTALL    </button>  </div></div></div>    <div class=\"Tweet-context Tweet-context--promotion\">      <div class=\"Tweet-badge Tweet-badge--promotedBy\">        <span class=\"Icon Icon--promotedGray\"></span>        <span class=\"Tweet-badgeText\">Promoted</span>      </div>    </div>  </div></div></body></html>"
    }
  ],
  "request": {
    "params": {
      "status": "Install now",
      "card_id": "siv0",
      "account_id": "18ce53y91ub"
    }
  }
}

The linked CSS file is https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.f96d9083b56b9154f617.css

Relevant CSS rules, if I’m reading it right (it’s sizable):

.CardContainer--web .BasicAppCard{display:none}
.CardContainer--web .ImageAppCard{display:none}

etc

andrs · 2015-08-06T13:58:24.090Z

Thanks @VelimirLes - this is excellent. We will investigate this internally and get back to you as soon as we can!

andrs · 2015-08-06T14:23:32.121Z

Interestingly enough I can’t recreate this - using the very same HTML returned for the web preview seems to work just fine for me. What browser are you using? When you inspect the element, can you see that CSS rule being applied?

brandonmblack · 2015-08-16T14:23:31.672Z

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.