Login

Learning&Support

Documentation

Embedding a Twitter feed in HTML

Twixl Support Team Updated: - Created :

When you want to embed content in a .html-article (e.g. a Twitter feed), you need to make to circumvent the file: protocol. Let's explain what the problem is and how to tackle that problem.

Don't!

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Twitter</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="css/normalize.css" rel="stylesheet" media="all">
 <link href="css/styles.css" rel="stylesheet" media="all">
</head>
<body>
 <div id="page">
 <div id="twitter-holder">
 <a class="twitter-timeline" data-lang="de" data-width="240" data-height="400" data-dnt="true"  href="URL-TO-YOUR-TWITTER-FEED"><span id="console">TITLE FOR YOUR NIFTY TWITTER FEED</span></a>
 </div>
 </div>
 <script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>

The problem in this example is this piece of code: <script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

In mobile apps, we load the pages using the file: protocol. This means it will try to load the script as follows: <script src="file://platform.twitter.com/widgets.js" charset="utf-8"></script>. That url of course doesn't exist and that's the reason why you get an error.

Do!

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Twitter</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="css/normalize.css" rel="stylesheet" media="all">
 <link href="css/styles.css" rel="stylesheet" media="all">
</head>
<body>
 <div id="page">
 <div id="twitter-holder">
 <a class="twitter-timeline" data-lang="de" data-width="240" data-height="400" data-dnt="true"  href="https://twitter.com/spitexch?ref_src=twsrc%5Etfw"><span id="console">Spitex Schweiz auf Twitter. Der Zugang zu diesen Inhalten setzt eine aktive Internetverbindung voraus.</span></a>
 </div>
 </div>
 <script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>

The trick is to hardcode the src, so you force the mobile app to use the https protocol. The nice thing about this, is that this hardcoding will work in your mobile apps, but also in your Browser Client! So the end-result needs to be: <script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Was this article helpful?

0 out of 0 found this helpful