Newbie - Can't get html widget to work

Exporting & Previewing
1

Hi,
I’m really new to Hype so this question might seem silly. I have pasted some html code into a widget so that my Twitter feed can be seen on my page. The code is:

<a class="twitter-timeline" href="https://twitter.com/Waste_Deep">Tweets by Waste_Deep</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

When I preview the page within Hype, the widget works fine, however, when I export the file, the widgets are blank. I can’t figure out why. Any help would be much appreciated!

WasteDeep Social Media Test 2.zip (1.7 MB)

2

Since this starts with //platform, when you preview it on your computer it uses the file:// protocol, so it doesn't work. To force it to actually access the platform domain, you'll need to use https://platform.twitter.com

So your full code would be:

<a class="twitter-timeline" href="https://twitter.com/Waste_Deep">Tweets by Waste_Deep</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

1 Like
3

Thanks heaps Daniel!! It’s working now.

One more question if you can. Will some widgets only work if the site has been hosted? I have a Facebook widget which, as with the Twitter widget, previews correctly within Hype, however, fails when I export it. The code I’m using is:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-comments" data-href="https://www.facebook.com/groups/1227858214006528/" data-numposts="5"></div>

Thanks a lot!

4

Looks like you might be hitting the same problem. Notice how the URL is //connect ?

Just change //connect.facebook.net to https://connect.facebook.net

When posting code, select your code and click this button in the forum compose window:

5

Thanks again. I did try adding the https: however it still doesn’t work unless the site is hosted; which is fine for what I’m doing. Apologies for not using < / > button!

6

Do you use a local server, like Mamp pro, when you test your files locally?
https://www.mamp.info/en/mamp-pro/