Tweet Previews for Existing Tweets Showing Same CSS for web, android, iphone


#1

Is there a reason all the tweets seem to be the same across all devices? This is for an existing tweet:

AccountId: 18ce53vjuh5?
tweetId: 642209129436594176

Response:
https://jsonblob.com/5604287de4b01190df39721e


#2

That’s a pretty simple tweet you are previewing, it’s just text, how about you try one out that you’d expect to render differently based on the target (web / Android / iOS)?


#3

Hello, sorry for late reply. Even if its just text, the font for “Text Account, @eaglescoutsdev” is supposed to be different for iPhone, Android, and Web, based on what I see on twitter’s previews. Anyway, I think I have pinpointed the issue:

for this preview:

{"android":"<!DOCTYPE html><html><head>  <meta charset=\"utf-8\" />    <link href=\"https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.386eb1401b0e14924639.css\" rel=\"stylesheet\" /></head><body>    <div class=\"Tweet--timeline TweetTweet--android\" dir=\"\" data-tweet-id=\"\">  <img class=\"Tweet-avatar\" src=\"https://abs.twimg.com/sticky/default_profile_images/default_profile_0_normal.png\" width=\"48\" height=\"48\" alt=\"\"/>  <div class=\"Tweet-body\">    <div class=\"Tweet-header\">      <div class=\"Tweet-userData\">        <a href=\"//twitter.com/eaglescoutsdev\" target=\"_blank\" class=\"Tweet-name\">Test Account</a>        <a href=\"//twitter.com/eaglescoutsdev\" target=\"_blank\" class=\"Tweet-screenName\">@eaglescoutsdev</a>      </div>      <small class=\"Tweet-timeLabel\">        <span class=\"Tweet-timestamp\">          <span class=\"Icon Icon--clock\"></span>                  </span>      </small>    </div>    <div class=\"Tweet-text \" dir=\"\">test tweet</div>      <a class=\"Tweet-photoContainer\" href=\"http://pbs.twimg.com/media/CReYOAuVAAEWlYU.jpg\" target=\"_blank\">  <img alt=\"Embedded image permalink\" class=\"Tweet-photo\" src=\"http://pbs.twimg.com/media/CReYOAuVAAEWlYU.jpg\"></a>    <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>","web":"<!DOCTYPE html><html><head>  <meta charset=\"utf-8\" />    <link href=\"https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.386eb1401b0e14924639.css\" rel=\"stylesheet\" /></head><body>    <div class=\"Tweet--timeline TweetTweet--web\" dir=\"\" data-tweet-id=\"\">  <img class=\"Tweet-avatar\" src=\"https://abs.twimg.com/sticky/default_profile_images/default_profile_0_normal.png\" width=\"48\" height=\"48\" alt=\"\"/>  <div class=\"Tweet-body\">    <div class=\"Tweet-header\">      <div class=\"Tweet-userData\">        <a href=\"//twitter.com/eaglescoutsdev\" target=\"_blank\" class=\"Tweet-name\">Test Account</a>        <a href=\"//twitter.com/eaglescoutsdev\" target=\"_blank\" class=\"Tweet-screenName\">@eaglescoutsdev</a>      </div>      <small class=\"Tweet-timeLabel\">        <span class=\"Tweet-timestamp\">          <span class=\"Icon Icon--clock\"></span>                  </span>      </small>    </div>    <div class=\"Tweet-text \" dir=\"\">test tweet</div>      <a class=\"Tweet-photoContainer\" href=\"http://pbs.twimg.com/media/CReYOAuVAAEWlYU.jpg\" target=\"_blank\">  <img alt=\"Embedded image permalink\" class=\"Tweet-photo\" src=\"http://pbs.twimg.com/media/CReYOAuVAAEWlYU.jpg\"></a>    <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>","iphone":"<!DOCTYPE html><html><head>  <meta charset=\"utf-8\" />    <link href=\"https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.386eb1401b0e14924639.css\" rel=\"stylesheet\" /></head><body>    <div class=\"Tweet--timeline TweetTweet--iphone\" dir=\"\" data-tweet-id=\"\">  <img class=\"Tweet-avatar\" src=\"https://abs.twimg.com/sticky/default_profile_images/default_profile_0_normal.png\" width=\"48\" height=\"48\" alt=\"\"/>  <div class=\"Tweet-body\">    <div class=\"Tweet-header\">      <div class=\"Tweet-userData\">        <a href=\"//twitter.com/eaglescoutsdev\" target=\"_blank\" class=\"Tweet-name\">Test Account</a>        <a href=\"//twitter.com/eaglescoutsdev\" target=\"_blank\" class=\"Tweet-screenName\">@eaglescoutsdev</a>      </div>      <small class=\"Tweet-timeLabel\">        <span class=\"Tweet-timestamp\">          <span class=\"Icon Icon--clock\"></span>                  </span>      </small>    </div>    <div class=\"Tweet-text \" dir=\"\">test tweet</div>      <a class=\"Tweet-photoContainer\" href=\"http://pbs.twimg.com/media/CReYOAuVAAEWlYU.jpg\" target=\"_blank\">  <img alt=\"Embedded image permalink\" class=\"Tweet-photo\" src=\"http://pbs.twimg.com/media/CReYOAuVAAEWlYU.jpg\"></a>    <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>"}

The css classes: “Tweet–timeline TweetTweet–android” and “Tweet–timeline TweetTweet–ios” should be “Tweet–timeline Tweet–android” and “Tweet–timeline Tweet–ios”. When I make these changes in the css I am able to see the expected tweet preview I see like on twitter.


#4

Thanks for those very helpful details. We’re working on resolving this issue now, and I’ll let ping this thread with updates