Javascript Widget Displays as Blank Space

  • Resolved Elkerton

    (@elkerton)


    5 years, 5 months ago

    Greetings,

    I am trying to display a javascript widget on my AMP WordPress site, but the page only displays a blank space. I have run the header and widget script through the AMP Validator and there were no errors.

    Following is the header script:
    <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>

    Following is the widget script:

    <amp-script src='https://joshuaproject.net/widget/upgotd_customizer.php?cfc=484848&chc=A6A6A6&clc=06658D&cbg=EEEEEE&bbg=770000&blc=FFFFFF&bhc=A6A6A6&fbg=770000&ffc=ffffff&flc=ffffff&fhc=A6A6A6&oft=Arial&tfsz=15px&pfsz=15px&ifsz=12px&ffsz=11px&ori=horz&wpw=220px&bdrtl=5px&bdrtr=5px&bdrbl=5px&bdrbr=5px&bdc=770000&bdw=1px&pop=1&lan=1&relg=1&eva=1&stat=1'>
</amp-script>

    Thank you for your assistance.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    Hello. This is not a proper use of amp-script. The amp-script component is not a drop-in replacement for script tags. The JavaScript being embedded has to abide by certain constraint, and one of them is that document.write() is not allowed.

    In order to embed this widget, you’ll have to iframe it.

    For example, create an HTML page that contains the following:

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>html,body {margin:0; padding:0}</style>
	</head>
	<body>
		<script src='https://joshuaproject.net/widget/upgotd_customizer.php?cfc=484848&chc=A6A6A6&clc=06658D&cbg=EEEEEE&bbg=770000&blc=FFFFFF&bhc=A6A6A6&fbg=770000&ffc=ffffff&flc=ffffff&fhc=A6A6A6&oft=Arial&tfsz=15px&pfsz=15px&ifsz=12px&ffsz=11px&ori=horz&wpw=220px&bdrtl=5px&bdrtr=5px&bdrbl=5px&bdrbr=5px&bdc=770000&bdw=1px&pop=1&lan=1&relg=1&eva=1&stat=1'></script>
	</body>
</html>

    Place it on your site, for example at https://echristiannews.com/widget.html

    Then you can embed it in your site via:

    <iframe width="350" height="233" layout="fixed" frameborder="0" scrolling="no" sandbox="allow-scripts" src="https://echristiannews.com/widget.html">
</iframe>

    Note that the AMP plugin will automatically convert this to an amp-iframe.

    Thread Starter Elkerton

    (@elkerton)

    Thank you Weston – this worked splendidly. And yes, I found it works best to use the standard iframe tags and let AMP do the rest.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Javascript Widget Displays as Blank Space’ is closed to new replies.