CODEWITHSUNDEEP
javascripthtml
Chris
Chris

Reputation: 607

Can't embed a badge in HTML

I have a certification and a badge provided by Acclaim. I want to embed it in my personal website but it's not working. here's the code they provided:

<div data-iframe-width="150" data-iframe-height="270" data-share-badge-id="60615e70-6409-4752-9d77-3553a43d13d2" data-share-badge-host="https://www.youracclaim.com"></div>
<script type="text/javascript" async src="//cdn.youracclaim.com/assets/utilities/embed.js"></script>

but even when simply put onto an empty html:5 page, I get the error: Loading failed for the <script> with source “file:///assets/utilities/embed.js”. What's the problem here? I'm not sure how Acclaim can provide a ready-to-paste script that's just simply not working, nothing shows up on the website. I'm guessing the problem is at the src... part, but don't know how to fix it.

Upvotes: 0

Views: 2458

Answers (2)

T P
T P

Reputation: 1

<div data-iframe-width="150" data-iframe-height="270" data-share-badge-id="4d10a792-b3c3-4ce2-a1b1-961332b9d222" data-share-badge-host=https://www.credly.com></div>
<script type="text/javascript" async src="//cdn.credly.com/assets/utilities/embed.js"></script>

Upvotes: -2

Brad
Brad

Reputation: 163468

If you're loading your page via file:, then protocol-relative URLs aren't going to work. The script tag has:

src="//cdn.youracclaim.com/assets/utilities/embed.js"

This should be changed to:

src="https://cdn.youracclaim.com/assets/utilities/embed.js"

You'll find though that when you're using an actual web server, this is a non-issue. The reason for the protocol-relative URLs is so that HTTP pages would use the HTTP version, and HTTPS would use the HTTPS version. This method is outdated anyway. HTTPS should be used everywhere, even if you're loading HTTPS JavaScript from an HTTP page.

Upvotes: 3

Related Questions