Follow

Widgets: You Would Like to Embed a Widget on a Site That Strips Javascript

We recognize there is an issue for some users who would like to embed one of our widgets on platforms that strip javascript.

Some blogging platforms do not authorize the use of javascript widgets. To work around this limitation, you can use the iframe html tag, if the site allows it.

 

     

Screen Shot 2014-02-12 at 11.26.47 PM.png For Wordpress.org, which strips javascript, we recommend using the highly reviewed plugin Advanced iframe to insert your paper.li widget.  Follow the instructions given by the Advanced iframe plugin to insert the widget code. 

Wordpress.com does not allow the iframe tag, nor do they allow plugins. 

          

 

For sites that allow the iframe HTML tag

First, we'll create the HTML document that will reside on a remote server and will invoke the javscript code:The iframe tag will allow you to define a rectangular area which will be populated from a site residing outside the blogging platform. This allows you to run the javascript code and return the rendered result back to the browser for that rectangle. The key requirement here is to have an external site to place the html containing the javascript embed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
<html> 
<head> 
<base target="_blank" /> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
</head> 
<body> 
NOMAD OR HEADLINES WIDGET EMBED CODE GOES HERE 
</body> 
</html>

Let's say we save this in an html type document called _nomad.html. ( This name is just an example.)

 

We then switch to the blogging platform and inserting the iframe statement to the theme, template, etc, for the blog or site. The actual HTML container for the iframe tag will depend on your blogging platform. This can be a plain div tag or a custom tag such as section for Posterous. The iframe invokes the page above.

<iframe width="390" height="480" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" src="LINK TO HOSTED FILE GOES HERE"></iframe>

Save your theme and verify that the Nomad or Headlines widget now appears on your blog.

NOTES:

(1) Be certain that the iframe dimensions are the same that you set in the Nomad or Headlines code.

(2) If you are not able to host a page yourself, you can check with a hosting provider that offer services for free. Another alternative could be setting up a public file in a service such a Dropbox.

 

Below are a few additional references. If you find a solution that works for you, feel free to drop us a line and we will share it with the community. 

For tumblr:

 http://tumblr.spantz.org/post/212824287/using-javascript-to-provide-dynamic-content-in-tumblr
 http://marketingconversation.com/2011/04/06/how-to-add-custom-html-javascript-etc-code-to-your-tumblr/

For others, such as WP.com and Posterous, Google pages. 

 http://perishablepress.com/press/2007/01/02/embed-external-content-via-iframe-and-div/

 

If these instructions aren't helping with your issue, tweet us at @paper_li with your paper URL and name of browser and we can help further.  

 

Was this article helpful?
8 out of 8 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk