Work-around for embedding widgets (JS security) : Paper.li Help

Help Forums/Something's not working/Trouble shooting

Work-around for embedding widgets (JS security)

Kelly Hungerford
posted this on January 19, 2012 10:47

We recognized there is an issue for some users who would like to embed the Nomad and Headlines widgets on platforms that strip JS.

Some blogging platforms do not authorize the use of javascript widgets. To word around this limitation, you can use the legal iframe html tag. 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.

First, we'll create the HTML document that will reside on a remote server and invoke the javscript code:

<!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 EMBED CODE GOES HERE
</body>
</html>

Let's say we save this in a document called _nomad.html. ( This name is just an example) This document can be directly invoked from a browser for testing purposes by accessing http://my.remoteserver.com/_nomad.html

We then switch to the blogging platform and inserting the iframe statement to the theme, template, etc, for the blog or site. The actually 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.

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

NOTE: Be certain that the iframe dimensions are the same that you set in the Nomad code. 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 and using that.

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/