2

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.

Improve this question
6
  • What do you see in the console? Are you serving from the filesystem? Commented Jun 24, 2015 at 20:46
  • How do you test? Code you've posted works for me. Commented Jun 24, 2015 at 20:47
  • I am getting this in console GET file://platform.twitter.com/widgets.js net::ERR_FILE_NOT_FOUND. but if i access the path //platform.twitter.com/widgets.js in browser i can get to the script file. Commented Jun 24, 2015 at 20:50
  • @sainaen: in browser, tried both in chrome and mozilla. Commented Jun 24, 2015 at 20:51
  • 1
    Try to replace //platform.twitter.com/widgets.js with http://platform.twitter.com/widgets.js. It will make it work even if it's embedded in the local file (with the file scheme). Commented Jun 24, 2015 at 20:52

1 Answer 1

Reset to default
4

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments