CODEWITHSUNDEEP
javascripthtmltwitter
user971741
user971741

Reputation:

Unable to embed tweet into HTML

I am trying to embed a tweet into my website through this method.

But I am unable to get it right. This is my HTML markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<blockquote class="twitter-tweet" lang="en">
  <p lang="en" dir="ltr">Can you answer this? Tem como calcular a diagonal no Canvas? <a href="http://t_.co/E8dD01jGKX">http://t_.co/E8dD01jGKX</a> <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a></p>
  &mdash; SO em Português (@StackOverflowPT) <a href="https://twitter.com/StackOverflowPT/status/613791039539806208">June 24, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>

And all I am seeing in browser is this:

enter image description here

Merely just HTML, not style as Twitter embedded tweet box.

Upvotes: 2

Views: 2537

Answers (1)

sainaen
sainaen

Reputation: 1578

The link to the Twitter's widgets.js is a so called protocol relative or scheme-less: it doesn't define its own URI scheme and uses whatever its host page happend to be opened on. This is useful to support both http and https schemes without changing the link in the source code.

Now, because you're testing with the local file, the scheme used is file, that is specifically created for files located on the same machine with browser. And so protocol-less //platform.twitter.com/widgets.js gets the file scheme and becomes a link to the local file widgets.js in the folder platform.twitter.com which probably you don't have on your machine.

To fix that, just add a scheme, http or https, like this:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
</head>

<body>
  <blockquote class="twitter-tweet" lang="en">
    <p lang="en" dir="ltr">Can you answer this? Tem como calcular a diagonal no Canvas? <a href="http://t.co/E8dD01jGKX">http://t.co/E8dD01jGKX</a>  <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a>
    </p>
    &mdash; SO em Português (@StackOverflowPT) <a href="https://twitter.com/StackOverflowPT/status/613791039539806208">June 24, 2015</a>
  </blockquote>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  <!--                 ^                -->
</body>

</html>

Upvotes: 4

Related Questions