Problem when exporting using custom code to embed a Twitter feed

Hey all, very new to Bootstrap Studio and CSS but I'm using it for a school project right now. When previewing the site, the custom code Twitter embed works perfectly in the browser. When exported however, it won't show up when I open the HTML file.

Any idea what the problem is? All of the other assets work fine.

Thanks! Dawn

Where you export to, is it accessible by outside sources? Such as would I be able to type in a website address to see your exported site? Are you just double clicking on the .html file to open it up in the web browser? If that is the case it doesn't really have outside access so JavaScript can't access the external resources from twitter to launch.

You should try bringing up the web browsers Development Tool window (F12) and then refresh your page and look in the Console section of the Dev Tools to see if there are any errors. If there are, knowing those error might help figure out what's wrong.

Saj

Thank you Saj, I'm sure that's the problem. I am just double clicking on the .html file. So if it were eventually hosted on a server, it would probably work?

Right now the error reports: file://platform.twitter.com/widgets.js Failed to load resource: net::ERR_FILE_NOT_FOUND

I think it shouldn't be a problem for me to submit the assignment and show a screenshot of the preview showing that it would potentially work if hosted. Is there any way of perhaps including the Javascript command in the exported folder such that I could send a zip file and the instructor could open the .html file and everything works? All of the images and assets are working fine.

Thanks so much, I appreciate the help!

Dawn

Yes if it were hosted some where you should be good to go then.

I'm going to have to go with, I doubt including a local file of widgets.js locally will work as it's going to need to communicate with the twitter server to get your real time timeline/feed content which it can't if it's not hosted.

You probably can fake it though if you want to try by viewing your site in the preview and letting the twitter feed load.

  1. In your site add an id="twitter-code" on the parent element that directly contains the Twitter code you entered.
  2. Then use the Dev Tools (F12) the first tab should show you all your HTML find the id="twitter-code" right click it and select Copy Element(inner if it's choice) or select Edit as HTML and highlight everything in the box and Copy it.
  3. In the BSS app, on the bottom right in the Design pane click on Pages to expand right click on your page that has the twitter code and select Duplicate rename it to something like index-local
  4. double click that duplicated page and on the bottom left in the Overview pane, find id="twitter-code"
  5. right click it and select Convert to HTML that will change to say Custom Code
  6. select it and then on the top right in the Options pane, click on the icon that looks like < > to expose the Custom Code component in the bottom middle
  7. select all the content and paste in the code you copied from the Dev Tools

That I think should probably work and you'll have a spot in time in your twitter feed that can be viewed locally but it still won't function like normal though.

Just let the teacher know there is a Twitter widget but it requires the site to be hosted on a web server to function so you made a local file that should display a non-functioning Twitter widget so they can see what it looks like. Obviously, verify that this actually works and all images etc... load so it doesn't look bad.

Saj

Wonderful! I'll give that a try. Thanks again for the help!