Current status of the Ning Platform is always available on the Ning Status Blog.

Blogs

NC for Hire

Who wants full screen, responsive Iframes solution for their Ning Site?  I know I have for a while.  What I am going to show you all today is something I've been trying to figure out for around 5 years, but finally sat down and hammered it out.  This solution works for both Ning 2.0 and Ning 3.0 Networks, but in slightly different ways. You can use it to embed Member maps (maps in general), other pages, Google Sites, you name it!   I'll go through both so that everyone can give it a try regardless of the platform.  Let's Begin.

Full Screen iFrames for Ning 2.0

In order to make this work, you mist be adding an iframe to a Page (can be a page in a group) because they have the option of adding code to the <head> of page.  You'll want to first add this block of code to that "Custom" section.


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">    
        
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script>
            document.getElementsByTagName("html")[0].className = "js";
   </script>
      
<link rel="stylesheet" href="http://api.ning.com/files/FsV0PLw632rm*RRGcdOHUd2yajCj7k5tIhs4C68gtOPXI2MKao24gjiqROqJQzQoy*t17zaaT01VA883XpwFusCEC3CQUTRw/normalize.css">

    <link rel="stylesheet" href="http://api.ning.com/files/FsV0PLw632pjSDZ5Zs2aEK6Nj*I3R9IzR2lTtUS5QnhU4jo9eytH3ChObmLrpVp75AdvLdd0hMTVHJAwpW2crdWeYxZ6-T00/style.css" media="screen" type="text/css" />

Now you'll want to add this code to your actual page inside the text box, replacing the red url with the one you are iframing into the page:


<script type="text/javascript">                 document.getElementsByTagName("html")[0].className = "js";     </script>
 <div class="wrapper"> <div class="iframe"><iframe src="http://yoursiteiframe.com/index.html">
 </iframe>
</div>
 </div>

<script src='http://api.ning.com/files/oto4-hHdKDFkXL8wxgOrQ0bf-m4WeqeUtHVL8VJoPEnHKDr2HT8SyAzc0rG0ZQBdLxm-wDOu8bI1HfQ8XlvIHHV1FVP2yXRo/jquery.js' type="text/javascript"> </script>
<script src="http://api.ning.com/files/FsV0PLw632ohjNV4Ru1gJuSEkQsLL9ZozcyU3gHPo6QHyMFZBUv99tSO6dvHdpe6fgZFs*SSrOLRMQsbxyhfUIKha3CE4OJM/index.js" type="text/javascript"> </script>

Demo Using a Google Sites Page

Full width Iframes for Ning 2.0

Full Screen iFrames for Ning 3.0

Now in 3.0, as with most things related to code, it is much simpler to get it working with less headache. Take a look at this full block of code which can be added to one HTML module inside Sites & Pages or as a custom page inside a Group.


<p><link rel="stylesheet" href="http://api.ning.com/files/FsV0PLw632rm*RRGcdOHUd2yajCj7k5tIhs4C68gtOPXI2MKao24gjiqROqJQzQoy*t17zaaT01VA883XpwFusCEC3CQUTRw/normalize.css" /> <link rel="stylesheet" href="http://api.ning.com/files/FsV0PLw632pjSDZ5Zs2aEK6Nj*I3R9IzR2lTtUS5QnhU4jo9eytH3ChObmLrpVp75AdvLdd0hMTVHJAwpW2crdWeYxZ6-T00/style.css" media="screen" type="text/css" /></p>
<meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript">            document.getElementsByTagName("html")[0].className = "js";         
</script>
<div class="wrapper">
<div class="iframe"><iframe width="100%" height="240" src="http://yoursiteiframe.com/index.html"></iframe></div>
</div>
<script src="http://api.ning.com/files/oto4-hHdKDFkXL8wxgOrQ0bf-m4WeqeUtHVL8VJoPEnHKDr2HT8SyAzc0rG0ZQBdLxm-wDOu8bI1HfQ8XlvIHHV1FVP2yXRo/jquery.js" type="text/javascript"></script>
<script src="http://api.ning.com/files/FsV0PLw632ohjNV4Ru1gJuSEkQsLL9ZozcyU3gHPo6QHyMFZBUv99tSO6dvHdpe6fgZFs*SSrOLRMQsbxyhfUIKha3CE4OJM/index.js" type="text/javascript"></script>

Demo of Full Screen Iframe Map from Fusion Tables

And there you have it! Responsive Full Width Iframes for your Ning networks.

Please Note:  The file upload button seems to be giving me some trouble over here on creators and sometime the formatting of the code gets messed up when copying from a blog post, so if you head over to this post on my project site, you can download the TXT version of this code at the bottom of the page.

I look forward to your feedback and seeing your version. If you are in need of help setting up your Ning network, send me a message. Happy to help!

Email me when people comment –

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Comments

This reply was deleted.